[Javascript] Event Loop와 Call Stack ⭐

 

const fs=require('fs') 
/*1*/ 
const aaa=()=>{ setTimeout(()=>{console.log('d');}); console.log('c') }; 

/*2*/ 
setTimeout(()=>{ 
    fs.readFile('any.txt',()=>{ 
        setTimeout(()=>{ console.log('e'); },0); 
        setImmediate(()=>{ console.log('f'); }) 
    })},100) ;

/*3*/ 
setTimeout(()=>{console.log('a');aaa()}) 

/*4*/
Promise.resolve().then(()=>{aaa(); console.log('b');})

c

b
a
c
d
d
f
e

이벤트 루프와 call back queue는 브라우저/node.js 가 제공해준다 // web apis라고 쓴 부분이 브라우저가 제공해주는 것들

 

비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 브라우저 / Node.js가 담당한다.

 

기본적으로 Call Stack(LIFO)에 실행 순서대로 쌓이고 실행이 되는데
WEB APIs에 해당하는 것들은 비동기처리를 위해 Callback Queue를 사용합니다.
WEB API에는 setTimeout, Promise의 then(), AJAX 가 있습니다.


1) Call stack으로 2번 setTimeout(100)이 들어오고 비동기 처리를 위해 Callback Queue의 Task Queue로 들어갑니다.
2) Call stack으로 3번 setTimeout(0)이 들어오고 비동기 처리를 위해 Callback Queue의 Task Queue로 들어갑니다.
3) Call stack으로 4번 Promise가 들어오고 비동기 처리 (then)을 위해 Callback Queue의 Micro task Queue로 들어갑니다.
=> Call stack 비어있는 상태 이므로, Callback Queue가 수행될 수 있다.
4) Callback Queue에서는 제일 먼저 Micro task Queue가 수행되기 때문에, Promise 의 then()코드가 실행되고,
Callstack에 4번의 aaa()가 쌓입니다.
4-1) aaa()내부의 setTimeout(0) 이 Task Queue로 들어갑니다.
4-2) Callstack에 console.log('c')가 들어오고 화면에 c가 출력됩니다
4-3) aaa()는 종료됩니다
5) Callstack의 aaa()는 사라지고, Callstack에 console.log('d')가 들어오고 화면에 d가 출력됩니다
6) Callback Queue의 Task Queue에서 시간이 0인 3번이 수행되어 화면에 a -> c -> d 순으로 출력됩니다.
7) Callback Queue의 Task Queue에서 시간이 0인 4에서 호출되었던 1번의 setTImeout이 수행되어 d가 출력됩니다.
8) Callback Queue의 Task Queue에서 마지막으로 남아있는 2번의 setTimeout이 수행되고,
fs.readFile 내 (I/O 처리) setTimeout과 setImmediate가 사용되었으므로 setImmediate => setTimeout 순으로 Callback Queue의 Task Queue에 들어가 수행됩니다. 그래서 화면에 f e 순서로 출력이 됩니다.
즉, c b a c d d f e 순으로 수행이 됩니다.

그리고 Microtask Queue에 해당하는 Promise코드가 먼저 사용된다.

file I/O 내부에서는 무조건 setImmediate가 먼저 실행된다.

---

관련 강의/블로그
https://www.youtube.com/watch?v=S1bVARd2OSE
https://meetup.toast.com/posts/89

자바스크립트와 이벤트 루프 : NHN Cloud Meetup

> Node.js의 클러스터를 사용하는 멀티 스레드 환경에서는 이벤트 루프에 대한 탄탄한 이해가 없다면 예상치 못한 버그 앞에 좌절하게 될 지도 모른다.