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