12. 이벤트 루프(Event Loop) - 3

이벤트 루프의 작동 방식에 따른 코드 실행 순서

이벤트 루프는 JavaScript의 비동기 작업을 관리하고 실행하는 핵심 메커니즘입니다. 브라우저와 Node.js 환경에서 모두 동작하며, 코드 실행 순서를 이해하는 것은 JavaScript 개발자에게 매우 중요합니다.

1. 이벤트 루프의 개념

이벤트 루프는 Call Stack, Callback Queue, Event Table, Event Queue로 구성됩니다.

• Call Stack: 현재 실행 중인 함수의 호출 정보를 저장하는 곳입니다.
• Callback Queue: 비동기 작업의 콜백 함수들이 대기하는 큐입니다.
• Event Table: 비동기 작업과 관련된 이벤트와 콜백 함수의 매핑 정보를 저장합니다.
• Event Queue: 이벤트 발생 시 콜백 함수가 대기하는 큐입니다.

2. 코드 실행 순서

이벤트 루프는 다음과 같은 순서로 동작합니다.

1. 코드가 실행되면 Call Stack에 쌓입니다.
2. 비동기 작업이 발생하면 해당 작업은 백그라운드에서 처리되고, 콜백 함수는 Event Queue에 추가됩니다.
3. Call Stack이 비어있을 때 Event Queue의 콜백 함수가 순서대로 Call Stack으로 이동하여 실행됩니다.
4. 이러한 과정이 반복되어 비동기 작업이 실행됩니다.

3. 코드 예제

아래 코드는 비동기 작업을 수행하고 콜백 함수를 등록하는 예제입니다.

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

console.log('End');

 

위 코드를 실행하면 'Start'와 'End'가 먼저 출력되고, 그 후 'Timeout'이 출력됩니다. 이는 setTimeout 함수가 비동기 작업을 수행하고, 해당 작업이 Call Stack이 비어있을 때 실행되기 때문입니다.

결론

이벤트 루프를 이해하는 것은 JavaScript 개발에서 매우 중요합니다. Call Stack과 Event Queue 간의 상호 작용을 이해하면 비동기 작업의 동작 방식을 이해하고 코드를 더욱 효율적으로 작성할 수 있습니다.