[JavaScript] 비동기 문제

코드잇 스프린트 4기

6주 차 위클리 페이퍼

 

예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요.

// 1번
let num = 1;

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

// 3번
num = 3;

// 4번
console.log(num);

 

출력: 3

 

1. 전역 실행 컨텍스트가 콜 스택에 쌓이게 됩니다.

2. setTimeout 함수가 호출되면 실행 컨텍스트가 생성되고 콜 스택에 쌓이게 됩니다.

3. setTimeout는 콜백 함수를 호출하고 종료되어 콜 스택에서 제거됩니다.

4. setTimeout과 같은 비동기 함수의 콜백 함수는 브라우저에 의해서 최소 타이머의 시간 경과 후 태스크 큐에 쌓이게 됩니다.

6. setTimeout의 콜백 함수가 태스크 큐에 대기 중인 동안 전역 컨텍스트가 마저 실행되어 num에 3이 재할당 되고 console.log(num);에 의해 console에 3이 출력됩니다.

7. 전역 실행 컨텍스트가 종료되어 콜 스택에서 제거 됩니다.

7. 이벤트 루프는 콜 스택이 비어있는 지 확인(Tick)하고 비어있다면 태스크 큐에 대기 중인 콜백 함수를 콜 스택에 쌓습니다.

8. 콜백 함수의 실행 컨텍스트가 생성되고 num에 2가 재할당 되고 종료되어 콜 스택에서 제거됩니다.

 

 

---

참고 자료

https://velog.io/@edie_ko/javascript-eventloop

 

 

감사합니다.