자바스크립트의 이벤트 루프(Event Loop)란?

먼저 이벤트 루프(Event Loop)에 대해서 알기 전에 JavaScipt의 특징인 Single Thread(싱글 스레드)에 대해서 알아보겠습니다.

스레드(Thread) & 프로세스(Process)

• 프로세스(Process): 실행 중인 프로그램 자체를 의미합니다. 운영체제에서 하나의 독립된 작업 단위로 관리됩니다. 각각의 프로세스는 자신만의 메모리 공간을 가지고 독립적으로 실행됩니다.
• 스레드(Thread): 프로세스 내에서 실행되는 작은 작업 단위입니다. 한 프로세스는 여러 개의 스레드를 가질 수 있고, 스레드들은 같은 프로세스 내에서 메모리 공간을 공유하며 동시에 실행될 수 있습니다.

싱글 스레드(Single Thread) & 멀티 스레드(Multi Thread)

• 싱글 스레드: 하나의 스레드에서 모든 작업을 처리합니다. 즉, 한 번에 하나의 작업만 처리할 수 있습니다.
• 멀티 스레드: 여러 스레드가 동시에 실행되며, 하나의 프로세스가 동시에 여러 작업을 처리할 수 있습니다.

 

JavaScript는 왜 싱글 스레드(Single Thread)인가?

JavaScript는 기본적으로 싱글 스레드로 설계되었습니다. 이는 자바스크립트가 처음 웹 브라우저에서 사용될 때, DOM 조작을 안전하게 처리하기 위해 하나의 작업이 끝난 후 다음 작업을 처리하는 방식으로 동작하도록 만든 것입니다. 여러 스레드가 동시에 DOM을 조작하면 데이터 충돌이 발생할 수 있기 때문입니다.

 

JavaScript 동작 과정

출처 :  How JavaScript works: an overview of the engine, the runtime, and the call stack

JavaScript 엔진은 크게 Memory Heap과 Call Stack으로 이루어져 있습니다.

• Memory Heap : 메모리 할당이 일어나는 장소
• Call Stack : 코드가 실행될 경우 하나씩 stack의 형태로 쌓이는 장소

Memory Heap & Call Stack

먼저 Memory Heap에 있는 사용자가 작성한 코드들은 Call Stack에서 Stack 방식으로 쌓이며 코드를 실행하게 되는데 이때 동기 함수들은 그대로 실행하게 되고 비동기 함수들은 Web API로 처리하게 되며 일을 분배합니다.

• Stack : 후입선출(LIFO)로 마지막에 들어간 것이 먼저 나가는 방식

Web API

Javscript를 사용하면서 우리가 많이 사용하는 API 들은 사실 JavaScript에서 지원하는 것이 아닌 웹 브라우저에서 제공하는 API로 DOM ,AJAX, Timeout 등이 있습니다.

Call Stack에서 실행된 비동기 함수는 Web API에서 처리를 하게 되고 그동안에 Call Stack은 나머지 동기 함수들을 처리하게 됩니다.

Web API는 비동기 함수들을 처리하며 작업이 완료된 비동기 함수들을 Callback Queue로 넘겨주게 됩니다.

Event Loop

Event Loop는 Call Stack과 Callback Queue를 상태를 계속 감시하며 Call Stack에 함수들이 존재하지 않는다면 Callback Queue에 있는 비동기 함수들을 Call Stack에 밀어 넣게 됩니다.

그 후 Call Stack에서 비동기 함수를 실행시키게 됩니다.

 

JavaScript는 싱글 스레드(Single Thread)인데 멀티 스레드(Multi Thread)처럼 동작할 수 있는 이유

위에서 설명드린 것처럼 JavaScript는 기본적으로 싱글 스레드지만, 브라우저나 Node.js 같은 환경에서 멀티 스레드로 동작하는 시스템을 활용해 비동기 작업을 병렬적으로 처리할 수 있기 때문입니다.