javascript 심화 6 (이벤트 루프)

이벤트 루프 📖

자바스크립트의 특징

이벤트 루프를 설명하기 전에 자바스크립트의 특징에 대해 간단히 알아보겠습니다.

 

❗중요 키워드 싱글 스레드, 비동기

 

자바스크립트는 한 번에 하나의 작업만을 처리하기 때문에 싱글 스레드 언어입니다. 

비동기로 동작하기 때문에 싱글 스레드임에도 불구하고 동시에 작업을 수행할 수 있습니다.

그러나 비동기로 동작하는 핵심 요소는 자바스크립트가 아닌 브라우저가 가지고 있습니다!

 

브라우저의 기본 구조

브라우저 기본 구조

 

구성 요소

Heap : 메모리 할당이 발생하는 곳입니다.

 

Call Stack : 실행 컨텍스트를 저장하는 자료구조(LIFO)로 함수를 호출하면 Call Stack에 push 됩니다.

 

Web APIs : 브라우저에서 제공하는 API로 DOM, AJAX, setTimeout 등이 있습니다. Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백 함수를 Callback Queue에 추가합니다.

 

Callback Queue : 함수(콜백함수)를 저장하는 자료구조(FIFO)로 Call Stack과는 다르게 먼저 들어온 함수를 가장 먼저 처리합니다.

 

Event Loop : Call Stack과 Callback Queue를 감시하다가 Call Stack이 비어있을 경우 Callback Queue에 존재하는 콜백 함수를 하나씩 Call Stack에 옮기는 역할을 합니다.

 

 

이벤트 루프 과정

console.log('first')

setTimeout(function cb() {
    console.log('second')
}, 0); // 0ms 뒤 실행

console.log('third')

 

 

위 코드를 예시로 동작 순서를 보여드리겠습니다.

 

 

✨동작 순서✨

1. console.log('first')가 Call Stack에 추가되고 화면에 출력한 뒤 Call Stack에서 제거됩니다.

 

2. setTimeout이 Call Stack에 추가되고 실행되면서 브라우저에서 제공하는 timer Web API를 호출한 후 Call Stack에서 제거됩니다.

 

3. console.log('third')는 timer가 실행되는 동안  Call Stack에 추가되고 화면에 출력한 뒤 제거되며, 0ms의 시간만큼 시간이 지난 뒤 콜백 함수로 전달한 cb가 Callback Queue에 추가됩니다. 

 

❗여기서 궁금한 점 지연 시간이 0ms인데 왜 third가 실행이 완료될 때까지 기다리는지

✨Event Loop는 Call Stack이 비워져 있을 때 Callback Queue에 있는 함수를 Call Stack으로 옮기기 때문입니다!

 

4. Event Loop는 Call Stack이 비어있는 것을 확인하고 Callback Queue에 있는 콜백 함수를 Call Stack에 추가합니다.

 

5. cb함수가 실행되고 내부의 console.log('second')가 Call Stack에 추가되고 화면에 출력한 뒤 Call Stack에서 제거됩니다.

 

 

 

 

---

출처 🏷️

https://medium.com/sjk5766/javascript-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%95%B5%EC%8B%AC-event-loop-%EC%A0%95%EB%A6%AC-422eb29231a8

https://velog.io/@seokkitdo/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84%EB%9E%80