#20 자바스크립트 이벤트 루프(Event Loop): 콜 스택, 이벤트 큐, 태스크 큐

자바스크립트는 단일 스레드(Single-threaded) 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 브라우저나 Node.js 환경에서 비동기 작업을 지원하기 위해 이벤트 루프(Event Loop)라는 메커니즘을 사용합니다. 이 글에서는 자바스크립트의 이벤트 루프 개념을 이해하기 위해 콜 스택(Call Stack), 이벤트 큐(Event Queue), 태스크 큐(Task Queue)가 어떻게 작동하는지 설명하고, 실제 예제를 통해 각 개념을 살펴보겠습니다.

콜 스택(Call Stack)이란?

콜 스택은 현재 실행 중인 함수가 쌓이는 LIFO(Last In, First Out) 구조의 데이터 스택입니다. 함수가 호출되면 스택에 쌓이고, 함수가 완료되면 스택에서 제거됩니다. 자바스크립트는 이 콜 스택을 사용해 함수를 순차적으로 실행합니다.

콜 스택 예제

function firstFunction() {
    console.log('First Function');
    secondFunction();
}

function secondFunction() {
    console.log('Second Function');
    thirdFunction();
}

function thirdFunction() {
    console.log('Third Function');
}

firstFunction();

이 코드를 실행하면 다음과 같은 순서로 콜 스택에 함수가 쌓이고 제거됩니다:

1. firstFunction()이 호출되어 콜 스택에 추가됩니다.
2. firstFunction() 내부에서 secondFunction()이 호출되어 콜 스택에 추가됩니다.
3. secondFunction() 내부에서 thirdFunction()이 호출되어 콜 스택에 추가됩니다.
4. thirdFunction()이 완료되면 콜 스택에서 제거됩니다.
5. secondFunction()이 완료되면 콜 스택에서 제거됩니다.
6. firstFunction()이 완료되면 콜 스택에서 제거됩니다.

이벤트 큐(Event Queue)란?

이벤트 큐는 비동기 작업의 콜백 함수들이 대기하는 큐입니다. 브라우저가 이벤트, HTTP 요청 응답, 타이머 등의 비동기 작업을 처리할 때, 이 작업들이 완료되면 해당 콜백 함수가 이벤트 큐에 추가됩니다.

태스크 큐(Task Queue)란?

태스크 큐는 이벤트 큐와 유사하지만, 우선 순위가 다릅니다. 일반적으로 태스크 큐에는 setTimeout, setInterval 같은 타이머 기반 함수의 콜백 함수가 대기합니다. 이벤트 루프는 콜 스택이 비어 있을 때, 이벤트 큐와 태스크 큐를 검사하여 대기 중인 콜백 함수를 콜 스택에 추가하여 실행합니다.

이벤트 큐와 태스크 큐 예제

console.log('Start');

setTimeout(function() {
    console.log('Timeout Callback');
}, 0);

Promise.resolve().then(function() {
    console.log('Promise Callback');
});

console.log('End');

위 코드를 실행하면 다음과 같은 순서로 로그가 출력됩니다:

1. console.log('Start')가 콜 스택에 추가되어 실행됩니다.
2. setTimeout은 비동기 함수로, 콜백 함수가 태스크 큐에 추가됩니다.
3. Promise의 then 메서드는 마이크로태스크 큐(Microtask Queue)에 콜백 함수를 추가합니다.
4. console.log('End')가 콜 스택에 추가되어 실행됩니다.
5. 콜 스택이 비게 되면 이벤트 루프가 마이크로태스크 큐에 있는 Promise 콜백을 먼저 실행합니다.
6. 마지막으로 태스크 큐에 있는 setTimeout의 콜백이 실행됩니다.

출력 결과는 다음과 같습니다:

Start
End
Promise Callback
Timeout Callback

이벤트 루프(Event Loop)란?

이벤트 루프는 자바스크립트 엔진이 비동기 작업을 처리할 수 있게 해주는 메커니즘입니다. 이벤트 루프는 콜 스택이 비어 있는지 확인한 후, 이벤트 큐 또는 태스크 큐에서 대기 중인 콜백 함수를 콜 스택에 추가하여 실행합니다. 이 과정이 반복되면서 비동기 작업들이 순차적으로 처리됩니다.

이벤트 루프의 동작 원리

1. 콜 스택: 현재 실행 중인 작업을 처리합니다.
2. 이벤트 큐: 비동기 작업이 완료되면, 해당 작업의 콜백이 대기합니다.
3. 태스크 큐: 타이머와 관련된 비동기 작업의 콜백이 대기합니다.
4. 이벤트 루프: 콜 스택이 비어 있을 때 이벤트 큐나 태스크 큐에서 콜백을 가져와 실행합니다.

결론

자바스크립트의 이벤트 루프는 비동기 작업을 처리하여, 단일 스레드 환경에서도 비동기 작업을 효율적으로 실행할 수 있게 합니다. 콜 스택, 이벤트 큐, 태스크 큐의 상호작용을 이해하면, 자바스크립트의 비동기 처리 방식과 그 동작 원리를 깊이 이해할 수 있습니다. 이로 인해 효율적인 코드 작성과 디버깅이 가능해집니다.