[JavaScript] 이벤트 루프(event loop) 란???

이 글을 읽기 전 참고하면 좋은 글
https://puenti.tistory.com/82

[JavaScript] 자바스크립트에서 heap, stack, queue란?

 

이벤트 루프(event loop) 란?

이벤트 루프란 자바스크립트에서 가장 중요한 개념 중 하나 입니다.
자바스크립트는 싱글 스레드 기반의 언어(인터프리터 언어)로서 한 가지 작업 밖에 못하는 언어적 한계를 가지고 있습니다.
그러다보니 자바와 같은 컴파일 언어와 비교하면 컴파일 하는 과정이 없기 때문에 컴파일 하는 시간은 소요되지 않으나, 인터프리터 언어는 실행파일을 별도로 생성하지 않기 때문에 실행시마다 인터프리트 과정이 반복 수행되어 실행 속도가 느리다는 단점이 있습니다.
 
이러한 단점을 상쇄시키기 위해 나온 개념이 바로 이벤트 루프입니다.
코드의 실행이 차단(blocked)되는 동기(synchronous) 처리 방식으로 작성하면 다른 작업을 수행할 수 없습니다.
그러나 JavaScript에서는 비동기 방식으로 처리를 해서 이러한 제한을 극복할 수 있습니다.
 
이벤트 루프는 이러한 비동기성을 지원하는 방식 중 하나로, 브라우저나 Node.js와 같은 JavaScript 실행환경에서 이벤트 처리를 담당합니다. 이벤트 루프는 이벤트 발생 시 해당 이벤트를 처리하기 위해 콜백(callback) 함수를 대기열(Queue)에 추가하고, 대기열(Queue)에서 이벤트를 꺼내와 실행합니다.
 

출처 - 자바스크립트 MDN

 
이벤트 루프는 크게 두 가지 단계로 구성됩니다.
첫 번째 단계는 이벤트 발생을 감지하고, 두 번째 단계는 대기열에서 콜백 함수를 꺼내와 실행하는 것입니다.

1. 이벤트 발생 감지는 브라우저와 Node.js일 경우로 나뉘게 됩니다.

브라우저의 경우 DOM 이벤트, 타이머 이벤트, XMLHttpRequest 이벤트 등을 감지하고, Node.js의 경우 I/O 작업, 타이머 이벤트 등을 감지합니다.
2. 대기열에서 콜백 함수를 꺼내와 실행할 때는 콜백 함수가 완료될 때까지 기다리지 않고, 다음 이벤트 발생을 감지하기 위해 바로 대기열로 돌아갑니다.
 
간단한 코드로 이벤트 루프의 작동원리에 대해 알아보겠습니다

(function Test() {

  console.log('시작');

  setTimeout(function cb() {
    console.log('콜백 1: 콜백 메시지');
  }); // has a default time value of 0

  console.log('평범한 메시지');

  setTimeout(function cb1() {
    console.log('콜백 2: 콜백 메시지');
  }, 0);

  console.log('종료');

})();

// "시작"
// "평범한 메시지"
// "종료"
// "콜백 1: 콜백 메시지"
// "콜백 2: 콜백 메시지"

위 코드를 실행하면 "시작"→"콜백 1: 콜백 메시지"→"평범한 메시지"→"콜백 2: 콜백 메시지"→"종료" 순서대로 출력되는 것이 아니라
"시작"→"평범한 메시지"→"종료"→"콜백1: 콜백 메시지"→"콜백2: 콜백 메시지" 순서대로 출력이 됩니다.
 
이는 setTimeout 함수를 호출하면, 이벤트 루프에서는 콜백 함수를 이벤트 큐에 저장하고, 일정 시간이 지난 후에 이벤트 큐에서 콜백 함수를 꺼내 실행하기 때문입니다.

 
즉, 이벤트 루프에서 스택과 큐를 조합하여 비동기 작업을 처리하는데, 스택에 있는 작업이 모두 처리되면 이벤트 큐에서 대기 중인 작업을 하나씩 꺼내어 스택에 쌓아 처리합니다. 이렇게 함으로써 자바스크립트 엔진은 비동기 작업을 순서대로 처리하는 것이 아니라, 가능한 빠르게 처리할 수 있도록 구현되어 있습니다.
 
이렇게 이벤트 루프를 통해 JavaScript는 비동기적으로 처리되는 코드들을 순서대로 실행하면서, 다른 작업을 수행할 수 있습니다.
이를 통해 JavaScript는 효율적인 비동기 처리를 구현할 수 있습니다.