[TIL] Event Loop

JavaScript는 단일 스레드(single-threaded) 언어이며, 이는 JavaScript가 한 번에 하나의 작업만 처리할 수 있음을 의미합니다. 그러나, JavaScript 환경에서는 많은 비동기 작업들이 발생합니다. 예를 들어, 사용자의 입력을 기다리거나, 네트워크 요청의 완료를 기다릴 때입니다. 이러한 비동기 작업들을 관리하고 실행 순서를 조정하는 메커니즘을 Event Loop라고 합니다.

Event Loop의 동작

Event Loop는 Call Stack, Callback Queue(Task Queue), 그리고 Web APIs 등으로 구성되며, 이들 간의 상호작용을 통해 비동기 작업을 처리합니다.

Call Stack:

JavaScript는 Call Stack을 사용하여 코드를 실행합니다.
Call Stack에 함수가 추가되면, JavaScript는 그 함수를 실행합니다.
함수가 종료되면, 그 함수는 Call Stack에서 제거됩니다.

Callback Queue:

비동기 작업이 완료되면, 콜백 함수가 Callback Queue에 추가됩니다.

Web APIs:

브라우저에서 제공하는 비동기 작업을 위한 API들입니다. (예: setTimeout, fetch 등)
이러한 API들은 Callback Queue에 콜백을 추가할 때 사용됩니다.

동작 과정

Call Stack이 비어있는지 확인합니다.
Call Stack에 있는 작업을 실행합니다.
Web API를 통해 비동기 작업을 수행합니다.
비동기 작업이 완료되면, 그에 연결된 콜백 함수가 Callback Queue에 추가됩니다.
Call Stack이 비어 있을 때, Event Loop는 Callback Queue에서 콜백 함수를 꺼내어 Call Stack에 추가합니다.
이러한 과정이 반복됩니다.

아래는 setTimeout을 사용한 간단한 예시입니다.

console.log('First'); // (1)

setTimeout(() => {
  console.log('Second'); // (3)
}, 0);

console.log('Third'); // (2)

1. 'First'를 출력합니다. (Call Stack에 console.log('First')가 추가되었다가 제거됨)
2. setTimeout을 호출하며, 이에 따라 Web API에서 타이머가 시작됩니다. (Call Stack에 setTimeout이 추가되었다가 제거됨)
3. 'Third'를 출력합니다. (Call Stack에 console.log('Third')가 추가되었다가 제거됨)
4. 타이머가 종료되면, setTimeout의 콜백 함수가 Callback Queue에 추가됩니다.
5. Call Stack이 비어 있으므로, Event Loop는 Callback Queue에서 콜백 함수를 꺼내어 Call Stack에 추가하고 실행합니다.
6. 최종적으로 'Second'를 출력합니다.

 

결과는

First
Third
Second

 

Event Loop는 JavaScript가 단일 스레드 언어임에도 불구하고, 비동기 작업을 효율적으로 관리하고 처리할 수 있게 해줍니다.