[Javascript] 호출 스택과 이벤트 루프

자바스크립트는 이벤트 기반 방식으로 동작한다. 이벤트 기반 시스템에서는 이벤트 리스너에 콜백 함수를 등록한다. 예를 들어 버튼을 누르면 경고 창을 띄우도록 설정할 때, 클릭 이벤트 리스너에 경고 창을 띄우는 콜백 함수를 등록한다.

 

• 이벤트 루프 - 이벤트 발생 시 호출할 콜백 함수들을 관리한다. 호출된 콜백 함수의 실행 순서를 결정하고, 노드가 종료될 때까지 이벤트 처리를 위한 작업을 반복한다.
• 태스크 큐(콜백 큐) - 콜백 함수들이 기다리는 공간. 이벤트 루프가 정한 순서대로 콜백 함수들이 줄 서있는 공간.
• 백그라운드 - 타이머, I/O 작업 콜백, 이벤트 리스너들이 동작하는 곳

 

function first(){
    second();
    console.log('첫 번째');
}
function second(){
    third();
    console.log('두 번째');
}
function third(){
    console.log('세 번째');
}
first();

 

위 코드에서 first 함수가 제일 먼저 호출되고, 그 안의 second 함수가 호출된 뒤, 마지막으로 third 함수가 호출된다. 호출된 순서와 반대로 실행이 완료된다. 따라서 콘솔에는 세 번째, 두 번째, 첫 번째 순으로 찍히게 된다. 이를 쉽게 파악하는 방법은 호출 스택을 그려보는 것이다.

 

 

function run(){
    console.log("실행");
}
console.log("시작");
setTimeout(run, 3000);
console.log("끝");

 

먼저 전역 컨텍스트인 main 함수가 호출 스택에 들어간다. 그 뒤 setTimeout이 호출 스택에 들어간다.

호출 스택에 들어간 순서와 반대로 setTimeout이 먼저 실행된다. setTimeout이 실행되면 타이머와 함께 run 콜백을 백그라운드로 보내고 호출 스택에서 빠진다. 그 다음으로 main 함수가 호출 스택에서 빠진다. 백그라운드에서는 3초를 센 후 run 함수를 태스크 큐로 보낸다.

 

 

호출 스택에서 main까지 실행이 완료되어 호출 스택이 비어있는 상황이다. 이벤트 루프는 호출 스택이 비어 있으면 태스크 큐에서 함수를 하나씩 가져와 호출 스택에 넣고 실행한다.

 

 

이벤트 루프가 run 콜백을 태스크 큐에서 꺼내 호출 스택으로 올린 상황이다. 호출 스택으로 올려진 run은 실행되고, 실행 완료 후 호출 스택에서 비워진다. 

 

 

 

만약 호출 스택에 함수들이 너무 많이 차 있으면 3초가 지난 후에도 run함수가 실행되지 않을 수 있다. 이벤트 루프는 호출 스택이 비어 있을 때만 태스크 큐에 있는 함수를 호출 스택으로 가져오기 때문이다. 이것이 setTimeout의 시간이 정확하지 않을 수도 있는 이유이다.