[자바스크립트] 이벤트 루프(Event Loop)

 

이벤트 루프

 

Javascript 엔진

 

Javascript 엔진에는 한 개의 Call Stack과 Heap이 존재한다. Call Stack에 관한 내용은 다음 글을 참고

 

2020.11.03 - [Developer/Javascript] - 자바스크립트 개발자라면 알아야 할 Concept 33 [#1. Call Stack]

자바스크립트 개발자라면 알아야 할 Concept 33 [#1. Call Stack]

2022.03.23 - [프로그래머스/데브코스 프론트엔드] - [자바스크립트] 원시타입(Primitive Type)과 참조타입(Reference Type)

[자바스크립트] 원시타입(Primitive Type)과 참조타입(Reference Type)

 

Javascript 안에 Call Stack은 함수가 호출되는 순서대로 쌓이는 구조이다. 이 Call Stack에서 함수들을 처리하고 Call Stack이 Empty 상태가 되면 더 이상 실행될 함수가 없다는 것을 의미한다.

 

싱글 스레드

 

Javascript는 Call Stack이 한 개만 존재하기 때문에 한 번에 하나의 일만 처리하기 때문에 싱글 스레드라고 한다. 그렇다면 어떻게 비동기 처리는 하는 것일까?

 

답은 웹 브라우저 덕분이다. Javascript는 웹 브라우저 상에서 동작하는데, 웹 브라우저가 멀티 스레드(Multi Thread)이기 때문이다. 웹 브라우저 전체를 보면, Javascript 엔진 외에 Web APIs와 Callback Queue 그리고 이벤트 루프(Event Loop)가 존재한다.

 

 

 

Web APIs

 

Web APIs는 DOM 관련 메서드, 타이머(setTimeout), AJAX(HTTP 응답) 등의 메서드들을 제공한다. Web APIs가 제공하는 메서드들은 모두 비동기 메서드이고, 이 덕분에 Javascript가 싱글 스레드임에도 비동기 처리가 가능한 것이다. Web APIs의 메서드들은 동작을 마치면 Callback 함수를 Callback Queue로 넘겨준다.

 

 

이벤트 루프(Event Loop)

 

이벤트 루프는 Callback Queue에 있는 Callback 함수들을 CallStack에 넘겨주기 위해 항상 살펴보고 있다. Call Stack이 Empty 상황일 때(더 이상 실행할 함수가 없을 때) Callback Queue에 Callback 함수들이 들어온 순서대로 Call Stack에 push 되고, Call Stack은 다시 Empty 상황을 만들 기 위해 LIFO 구조로 함수들을 실행한다.