[Article] 자바스크립트 엔진의 비동기 처리 원리 파헤치기

오늘은 자바스크립트 엔진의 비동기 처리 원리를 조금 깊게 파헤쳐보려합니다. 비동기의 대표적인 예시는 setTimeout Web API함수겠죠?

간단한 Quiz!

function source() {
  console.log('caller');
  let a = 1;
  const obj = { one: 1 };
  setTimeout(() => {
    a += 2;
    console.log(a);
    console.log(obj.one++);
    console.log('settimeout callback');
  }, 3000);
  setTimeout(() => {
    a += 3;
    console.log(a);
    console.log(obj.one++);
    console.log('settimeout callback2');
  }, 1000);
  console.log('end of caller');
}

source();

위 코드를 실행하면 어떤 값이 콘솔에 출력이 될까요? 잠시 시간을 두고 생각해 보시지요 ㅎㅎ.

정답은

caller
end of caller
4
1
settimeout callback2
6
2
settimeout callback

입니다!

caller
end of caller
3
1
settimeout callback
6
2
settimeout callback2

를 생각하신 분이 있나요? 그렇다면 이 글이 유용할 수도 있겠습니다.

비동기함수인setTimeout이 호출이 되면, setTimeout함수의 실행 컨텍스트가 생성이되고, 콜 스택에 푸시되어 실행이 됩니다.

setTimeout은 비동기함수이기에, 콜 스택에서 바로 제거가 됩니다.

setTimeout함수의 콜백함수는요?

=>

자바스크립트 엔진은 내부적인 타이머를 가지고 있고, end시간을 기준으로 콜백을 정렬해서 가지고 있습니다.

엔진 내부의 타이머에서 정해진 시간이 되면, 그제서야 콜백함수를 태스크큐(Job queue)로 푸시합니다.

조금 더 깊이 있게 알아보는 자바스크립트 엔진의 비동기처리 원리

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

V8 engine 뜯어보기

https://v8.dev/