[javascript] 자바스크립트의 이벤트루프?

 

 

 

javascript는 대표적인 싱글스레드 언어입니다. 싱글스레드란 말 그대로 스레드가 하나라서 한번에 한가지 일밖에 못한다는 뜻입니다. 
그런데 브라우저가 자바스크립트를 실행할 때 뭔가 동시에 여러가지 일을 하는 것 처럼 느껴지게 하지 않나요? 
그 이유는 자바스크립트 엔진이 제공하지 못하는 여러 기능들을 제공하는데요 
WebAPI, DOMAPI, setTimeout, HTTP Request 등 여러가지 브라우저가 제공하는 api들로 비동기처리를 도와줍니다.

1. 함수를 실행하면 콜스택에 우선 추가됩니다. 

이 콜스택은 자바스크립트 엔진에 있는 건데요, 스택! 이기 떄문에 선입후출(FILO) 하게됩니다. 함수가 값을 return함과 동시에 콜스택은 그 함수를 pop 해버립니다.

 

2. setTimeout은 WebAPI가 제공해주는 API 인데요, 이것은 메인스레드를 블로킹하지 않고 작업을 지연시킵니다.

setTimeout이 브라우저에 타이머 이벤트를 요청하고 바로 콜스택에서 제거됩니다. setTimeout function을 지나면 그 function 안에 있는 함수가 Web API에 추가됩니다.

 

3. setTimeout에 설정된 시간동안 함수는 Task Queue(작업 큐)에 대기하고 있다가 이벤트루프가 감지하면 콜스택에 추가됩니다.

 

4. 이벤트루브는 현재 실행중인 task(작업)이 있는 지 없는지, Task Queue(작업 큐)가 비었는지 task가 있는 지 반복적으로 확인합니다. 

- 모든 비동기 API는 작업이 완료되면 콜백함수를 Task Queue(작업 큐)에 추가합니다.
- 이벤트 루프틑 "현재 실행중인 task(작업)이 없을 때! (주로 콜스택이 비워졌을때) Task Queue(작업 큐)의 첫번째 task를 꺼내와서 실행합니다.

 

이러한 브라우저의 비동기함수들 또는 Node.js의 IO관련 함수들 등 모든 비동기 방식의 API는 이벤트 루프를 통해서 콜백함수를 실행합니다.