비동기 작업과 Event Loop

 

JavaScript는 싱글 스레드 언어로, 한 번에 하나의 작업만 처리할 수 있다. 그러나 비동기 작업(예: setTimeout, 이벤트 리스너, AJAX 요청 등)을 통해 병렬적으로 실행되는 작업처럼 보이게 한다. 이를 가능하게 하는 핵심 요소가 Event Loop이다.

---

주요 구성 요소

1. Memory Heap:
   • 변수와 객체가 저장되는 메모리 공간.
2. Call Stack:
   • JavaScript가 실행되는 작업 순서를 관리하는 스택 구조.
   • 함수 호출이 쌓이고, 실행이 끝나면 제거된다.
3. Web APIs:
   • 브라우저 또는 Node.js에서 제공하는 비동기 기능(setTimeout, DOM 이벤트, HTTP 요청 등)을 처리하는 환경.
4. Callback Queue:
   • 비동기 작업이 완료된 후 실행 대기 중인 콜백 함수가 저장되는 큐.
5. Event Loop:
   • Callback Queue를 계속 확인하며, Call Stack이 비어 있으면 큐에 있는 콜백 함수를 Call Stack으로 이동시켜 실행.

 

 

 

 

setTimeout 예제와 흐름

 

 

console.log('Start');

setTimeout(() => {
    console.log('Timeout callback executed');
}, 2000);

console.log('End');

---

실행 순서

1. console.log('Start'):
   • Call Stack에 추가 → 실행 후 제거 → "Start" 출력.
2. setTimeout:
   • setTimeout 함수는 Call Stack에 추가 → 실행 후 Web API로 비동기 작업 전달 → Call Stack에서 제거.
3. console.log('End'):
   • Call Stack에 추가 → 실행 후 제거 → "End" 출력.
4. setTimeout 콜백:
   • 2초가 지나면 Web API에서 Callback Queue로 콜백 함수 전달.
   • Event Loop가 Call Stack을 확인하여 비어 있으면, Callback Queue의 콜백을 가져와 실행.
   • "Timeout callback executed" 출력.

---

비동기 작업 흐름

1. Call Stack:
   • 동기 작업 실행 → Web API에 비동기 작업 전달.
2. Web API:
   • 비동기 작업 실행 (타이머, 이벤트 대기, 요청 처리 등).
3. Callback Queue:
   • 완료된 비동기 작업의 콜백을 저장.
4. Event Loop:
   • Call Stack이 비어 있는지 확인 → 비어 있으면 Callback Queue에서 작업을 가져와 실행.

 

 

 

Start
End
Timeout callback executed

 

• setTimeout은 브라우저의 Web API에서 처리하며, 비동기적으로 콜백 함수를 실행한다.
• Event Loop가 Call Stack과 Callback Queue 사이에서 작업을 조율한다.
• 비동기 코드는 항상 나중에 실행되므로 동기 작업의 결과가 먼저 출력된다.