호출 스택과 이벤트 루프로 본 자바스크립트 실행 순서
자바스크립트는 싱글 스레드인데도 비동기 작업을 처리할 수 있다. 그 비밀은 호출 스택과 이벤트 루프에 있다. 자바스크립트 런타임 환경의 구성 요소와 이벤트 루프가 작업을 처리하는 순서를 정리했다.
자바스크립트 런타임 환경
Call stack과 Event loop는 자바스크립트의 동작 원리를 이해하기 위해 꼭 숙지해야하는 개념이다.
자바스크립트가 실행되는 환경을 의미하는 자바스크립트 런타임 환경은 다음과 같이 구성되어 있다. 크게 Memory heap, call stack, web apis, callback queue, event loop가 있다.
Call Stack
호출 스택은 함수의 호출을 스택 방식으로 기록하는 자료구조다. 프로그램에서 요청이 들어올 때마다 순서대로 스택에 담고, 가장 나중에 들어온 작업을 먼저 처리하는 LIFO(Last In First Out) 구조이다.
자바스크립트는 싱글 스레드 기반 언어이기 때문에 하나의 호출 스택만을 가지고 있고, 한 번에 하나의 task만 처리할 수 있다.
function fifth(){console.log(5)}
function fourth() { fifth()
console.log(4)}
function third() { fourth()
console.log(3)}
function second() { third()
console.log(2)}
function first() { second()
console.log(1)}
first();
// first 호출시 결과값
// 5 4 3 2 1
예시 코드와 같이 최상단 코드레벨에서 first라는 함수가 호출되었고, second부터 fifth까지 차례대로 호출되고 마지막 fifth 함수부터 실행되고 반환되는 것을 확인할 수 있다.
이렇게 동기 로직에서는 하나의 task가 종료될 때까지 다른 Task는 실행되지 못하고 순차적으로만 실행될 수 있다.
Callback Queue
Callback Queue는 함수를 저장하는 자료구조이다. Call stack과 다르게 가장 먼저 들어온 함수를 가장 먼저 처리하는 FIFO(First In First Out) 구조다. 특정 이벤트에 따른 콜백 함수를 정의하면, 콜백 함수는 Callback Queue에 저장된다.
Event Loop
Event Loop는 Call stack이 다 비워지면 Callback queue에 존재하는 함수를 하나씩 호출 스택으로 옮기는 역할을 한다.
- 호출 스택의 작업을 모두 처리한다.
- 호출 스택이 비었을 경우. Microtask Queue를 확인하고 처리해야 할 작업이 있다면 Call Stack에 넣고 처리한다.
- 만약 Microtask Queue가 비었을 경우에는 Animation Frames를 확인하고 처리해야 할 작업이 있다면 Call Stack에 넣고 처리한다.
- 1~3 과정을 거치고 난 후 마지막으로 Callback Queue를 확인하고 이전 과정과 같이 Call Stack에 넣고 처리한다.
* 크롬 브라우저(V8) 기준 Microtask Queue -> Animation Frames-> Callback Queue 의 순서로 비동기 함수의 콜백 함수를 처리하게 된다.
이벤트 루프의 동작을 시각적으로 보려면 http://latentflip.com/loupe/
여기서는 백그라운드와 태스크 큐, 이벤트 루프가 정확히 어떻게 구현되어 있는지에 대해서 자세히 다루지는 않지만, 이벤트루프를 간단하게 이해하는 데 좋다.
