[지식루프 IT공부] 콜백함수 처리 순서

다음 코드를 실행할 때, 콘솔에 출력될 값은 무엇일까요? 

 

let num = 1;

setTimeout(() => {
  num = 2;
}, 0);

num = 3;

console.log(num);

 

콘솔에 출력될 값은 3입니다.

그 이유는, 

JavaScript의 실행 순서와 이벤트 루프 메커니즘을 이해하면 이 결과를 명확히 알 수 있습니다. 코드를 단계별로 분석해 보겠습니다.

1. let num = 1;
   • 변수 num이 선언되고 값 1로 초기화됩니다.
2. setTimeout(() => { num = 2; }, 0);
   • setTimeout은 비동기 함수로, 콜백 함수 () => { num = 2; }를 최소 0ms 후에 실행하도록 예약합니다.
   • 비록 지연 시간이 0ms로 설정되었지만, JavaScript는 동기 코드를 먼저 모두 실행한 후 이벤트 큐에 있는 비동기 작업을 처리합니다. 따라서 이 콜백은 즉시 실행되지 않고, 현재 실행 스택이 비워질 때까지 대기합니다.
3. num = 3;
   • 동기 코드로, num의 값을 즉시 3으로 변경합니다.
4. console.log(num);
   • 현재 num의 값을 출력합니다. 이 시점에서 num은 3입니다.
   • setTimeout의 콜백은 아직 실행되지 않았으므로 num = 2는 적용되지 않았습니다.

실행 순서 요약

1. 동기 코드가 먼저 실행됩니다:
   • num = 1 → num = 3 → console.log(num) (출력: 3).
2. 동기 코드 실행이 완료된 후, 이벤트 큐에 있는 setTimeout의 콜백이 실행됩니다:
   • num = 2가 실행되지만, 이미 console.log가 실행된 이후이므로 출력에 영향을 주지 않습니다.

추가 설명

JavaScript는 단일 스레드로 동작하며, 이벤트 루프를 통해 비동기 작업을 관리합니다. setTimeout(..., 0)은 콜백을 즉시 실행하지 않고, 현재 호출 스택이 비워진 후 이벤트 큐에서 처리됩니다. 따라서 동기 코드(num = 3과 console.log(num))가 먼저 실행되고, 그 이후에 setTimeout의 콜백이 실행됩니다.

결론

콘솔에는 3이 출력되며, 이는 동기 코드가 비동기 콜백보다 먼저 실행되기 때문입니다.