호출스택, 이벤트 루프

자바스크립트

1. 호출 스택

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

 

• Anonymous은 가상의 전역 컨텍스트(항상 있다고 생각하는게 좋음)
• 함수 호출 순서대로 쌓이고, 역순으로 실행됨
• 함수 실행이 완료되면 스택에서 빠짐
• LIFO 구조라서 스택이라고 불림

function run() {
    console.log('3초 후 실행');
}
console.log('시작');
setTimeout(run, 3000);
console.log('끝');

 

• 위 코드의 결과는 시작 -> 끝 -> 3초 후 실행
• 호출 스택만으로는 설명이 안 됨(run은 호출 안 했는데?)
• 위코드는 호출 스택 + 이벤트 루프로 설명할 수 있음

 

이벤트 루프: 이벤트 발생(setTimeout 등) 시 호출할 콜백 함수들(위의 예제에서는 run)을 관리하고, 호출할 순서를 결정하는 역할

 

• 태스크 큐: 이벤트 발생 후 호출되어야 할 콜백 함수들이 순서대로 기다리는 공간
• 백그라운드: 타이머나 I/O 작업 콜백, 이벤트 리스너들이 대기하는 공간. 여러 작업이 동시에 실행될 수 있음

 

• 예제 코드에서 setTimeout이 호출될 때 콜백 함수 run은 백그라운드로
• 백그라운드에서 3초를 보냄
• 3초가 다 지난 후 백그라운드에서 태스크 큐로 보내짐

 

• run이 호출 스택에서 실행되고, 완료 후 호출 스택에서 나감
• 이벤트 루프는 태스크 큐에 다음 함수가 들어올 때까지 계속 대기
• 태스크 큐는 실제로 여러 개고, 태스크 큐들과 함수들 간의 순서를 이벤트 루프가 결정함