setTimeout은 왜 비동기인가?

#setTimeout은 비동기 함수의 대표적인 함수이다. 그렇다면 setTimeout은 왜 비동기 함수인가?

setTimeout함수는 일정 시간이 지난 후에 콜백 함수를 실행한다. 일정 시간이 지나는 동안 다른 함수나 코드들이 setTimeout을 기다리지 않고 바로 실행이 된다. 이는 동기적으로 작동하는 것이 아닌 비동기적으로 작동하는 것이다. 

##이 외에도 다른 이유

1. 비동기적 실행: setTimeout 함수는 일정 시간이 지난 후에 콜백 함수를 실행하도록 예약하는 역할을 한다. 따라서 setTimeout 함수가 호출되면 코드의 실행이 지연되고, 다음 코드 블록이 실행될 때까지 기다리지 않고 즉시 다음 코드가 실행된다.
2. 블로킹하지 않음: setTimeout 함수는 콜백 함수를 예약한 후에도 프로그램이 블로킹되지 않습니다. 즉, 다른 작업을 수행할 수 있으며, setTimeout으로 예약된 작업이 완료될 때까지 기다리지 않고 계속 진행할 수 있습니다.
3. 이벤트 루프와 함께 동작: JavaScript의 이벤트 루프(Event Loop)는 비동기적인 작업을 관리하고 실행합니다. setTimeout 함수로 예약된 작업은 이벤트 루프를 통해 비동기적으로 실행됩니다.

# 코드로 보는 예시

function callSetTimeOut(){
    setTimeout(()=>{ return console.log('1 - call!')},3000);
}
callSetTimeOut();
console.log('2 - call');
console.log('3 - call');

위와 같이 코드를 작성하면 2,3,1이라는 결과가 나온다. 이는 비동기적으로 작동하는 setTimeout함수 때문이다. 순차적으로 실행하게 하기 위해서는 promise, thne을 사용해서 비동기를 동기적으로 변환을 해주면 된다.

## pormise, then을 사용해서 작성하기

function callSetTimeOut(){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
			console.log('1 - call!');
            resolve(); // 비동기 작업 완료 후 프로미스 해결
        }, 3000);
    });
}

callSetTimeOut().then(() => console.log('2 - call')).then(() => console.log('3 - call'));

이렇게 코드를 작성하면 1,2,3이라는 결과를 얻는다. 동기적으로 작동하는 것처럼 할 수 있다. 또한 promise, then을 사용하면 콜백 지옥에서 벗어 날 수 있다.
(resolve에는 완료된 값을 전달하고, reject에는 에러 정보를 전달한다. 그러나 이들 함수는 선택적으로 값을 받을 수 있다. 만약 값이 전달되지 않으면 보통 undefined가 된다.)

## 콜백 지옥 예시

setTimeout(() => {
    console.log('첫 번째 비동기 작업 시작');
    setTimeout(() => {
        console.log('두 번째 비동기 작업 시작');
        setTimeout(() => {
            console.log('세 번째 비동기 작업 시작');
            // 추가적인 비동기 작업 수행...
        }, 1000);
    }, 1000);
}, 1000);

위와 같이 작성하게 되면 콜백 지옥이라는 매너리즘에 빠진다. 이를 해결하기 위해서는 앞서말한 promise를 사용하면된다. 위의 코드를 promise로 해결하면 아래와 같은 코드가 나온다.

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

delay(1000)
    .then(() => {
        console.log('첫 번째 비동기 작업 시작');
        return delay(1000);
    })
    .then(() => {
        console.log('두 번째 비동기 작업 시작');
        return delay(1000);
    })
    .then(() => {
        console.log('세 번째 비동기 작업 시작');
        // 추가적인 비동기 작업 수행...
    });