[JS] 자바스크립트 엔진 비동기 처리 flow

function add(a, b, callback) {
  setTimeout(() => {
    const result = a + b;
    callback(result);
  }, 3000);
}

add(2, 3, (result) => {
  console.log(`result = ${result}`);
});

간단한 코드를 보며 JS Engine이 동기처리와 비동기 처리를 어떻게 하는지 정리해보도록 하겠습니다.

Heap : 변수, 상수들의 사용되는 메모리를 저장하는 영역
Call Stack : 호출 스택 (코드 실행)

자바스크립트 실행

자바스크립트가 실행되게 되면 먼저 Call Stack에 자바스크립트의 최상위 실행 문맥인 Main Context가 가장 먼저 들어오게 됩니다.

Main Context가 Call Stack에 들어왔다는 것은 프로그램이 시작 되었다는 뜻이고 Call Stack에 Main Context가 나가게 되면 프로그램이 종료되었다는 뜻입니다.

add 함수가 들어가고 add 함수 안에 있는 비동기 함수인 setTimeout과 그 안에있는 callback 함수가 Call stack에 들어가게 됩니다.

JS engine은 비동기 함수를 Web APIs로 넘깁니다.

Call stack에 setTimeout 함수가 존재하지 않기 떄문에 add 함수가 실행되게 됩니다.

Web APIs에서 setTimeout 함수는 3초동안 기다린 후 setTimeout 함수는 사라지고 callback 함수가 CallbackQueue에 들어가게 됩니다.

Event loop는 Callback Queue 안에 있는 callback 함수를 call stack에 넘겨주는 역할을 합니다.

Event loop는 call stack에 Main Context를 제외한 나머지 함수가 존재하지 않는지를 계속 체크합니다. Callback Queue에 있는 함수는 Call stack에 Main context"만" 존재 해야 callback 함수를 실행할 수 있기 때문입니다.

callback 함수가 실행되면 call stack에 Main context만 존재하게 되고 이 Main context마저 call stack에서 사라지면서 자바스크립트 프로그램이 종료되게 됩니다.

해당 게시글은 인프런 강의
"한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지(이정환)"
를 정리한 내용입니다. 쉽게 잘 설명해주시니 여러분도 강의를 듣는 것을 추천드립니다.