Event Loop

JS 는 싱글 스레드 언어이다. JS 엔진은 메모리 구조로 Memory Heap 과 Call Stack 을 가진다

- Memory Heap 에서는 메모리 할당이 일어난다. 변수, 객체, 함수 등등 을 메모리에 할당한다

- Call Stack 은 코드가 실행됨에 따라 스택 프레임이 쌓이는 공간이다. 우리가 프로그램의 어느 위치에 있는 지 알려주는 자료구조이다

JS 에 Call Stack 은 1개 뿐이므로, 한 번에 1가지 일밖에 하지 못한다. 뭔가 비동기적인 일이 필요할 때 Blocking 없이 어떻게 처리할 수 있을까? 다행히 JS 엔진이 제공하지 않는 것을 브라우저가 제공하고 있다

 

그것은 바로 Web API! Web API에는 DOM API, AJAX, fetch, setTimout, Http Request 같은 것들이 있다. Web API 는 비동기적인, blocking 이 없는 동작을 만들 수 있게 해준다

 

JS 가 브라우저에서 실제 동작할 때는 JS 엔진만 있는 게 아니라, 브라우저의 Web API 와 Callback Queue와 Event Loop 가 함께 동작하는 것이다

from https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

JS 에서 function 을 호출하면, 그것은 Call Stack 에 쌓인다. (위에서 보았듯 Call Stack 은 JS 엔진의 일부다) Stack 은 선입후출 방식이다. function 이 결과값을 return 하면, Stack 에서는 빠져 나온다

 

from https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

respond 함수가 setTimeout Function 을 리턴한다고 하면, setTimeout 은 Web API 에 의해 동작한다. 이 메소드는 JS 메인 스레드에 blocking 없이 작업을 지연시켜준다

 

from https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

Call Stack 에서는 값을 반환한 respond 함수, setTimeout 함수가 모두 빠져나간다. setTimout 함수의 callback 함수는 Web API 에 추가된다. Web API 에서 설정한 시간만큼 기다린다. JS 엔진과 상관없이 동작하는 것이다

설정한 시간이 다 흐르고 나서, 이 callback 함수는 바로 Call Stack 에 추가되는 것이 아니다. 대신 Queue (= Callback Queue) 에 추가된다. Queue 에서 자기 차례가 될 때까지 기다린다. 그 다음 동작의 핵심역할을 하는 것은?

 

Event Loop 이다! Event Loop 의 역할은 Queue 와 Call Stack 을 연결하는 것이다. Call Stack 이 비어있다면(=이전에 호출된 함수들이 모두 제 값을 반환했다면), Event Loop 는 Queue 의 가장 첫번째 아이템을 Call Stack 으로 넘겨준다 Queue 는 선입선출로 Call Stack 과 다른 방식으로 동작한다

이제 Call Stack 으로 넘어간 callback 함수는 제 값을 반환하고 Call Stack 에서 빠져나오게 되는 것이다!

 

 

예를 들어 수업시간에 배웠던 예시를 살펴보겠다

setTimeout(function() {
    console.log('1');
}, 0); 

console.log('2');

for (let i = 0; i < 3; ++i) {
    loop();
}

setTimeout(function() {
    console.log('3');
}, 0); 

console.log('4');

function loop() {
    console.log('5');
}

setTimeout 함수는 WebAPI 에 콜백함수를 추가하고, JS 의 Call Stack 에서는 바로 빠져나온다. (딜레이 시간이 0 이더라도) 콜백함수는 Web API 에 추가되어 딜레이 시간만큼 동작한 후에 Callback Queue 에 추가된다. 그 사이 Call Stack 에는 console.log('2'), loop() 함수 등등 동기함수들이 동작한다. Call Stack 이 완전히 빈 상태일 때 Event Loop 가 Callback Queue 에 있는 아이템을 앞에서부터 차례로 Call Stack 에 넣는다. 따라서 동기 함수가 완전히 실행이 끝난 다음에 콜백함수가 실행되는 것이다. 그래서 정답은 2555413

 

참고

https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

https://velog.io/@jjunyjjuny/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8B%9C%EA%B0%81%ED%99%94-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84

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

.