[JavaScript] 이벤트 루프는 무엇일까?

싱글스레드인데 여러가지 일을 할 수 있다?

자바스크립트는 싱글스레드이므로 콜스택을 하나만 가지고 있고, 한 번에 하나씩 작업을 처리할 수 있다.
하지만 자바스크립트가 사용되는 환경을 보면, 많은 작업들이 동시에 처리되는 것처럼 보인다.
이는 이벤트 루프를 이용하여 비동기 방식으로 동시성을 지원하기 때문이다.

이벤트 루프?

메모리 힙(Memory Heap) : 메모리 할당이 일어나는 곳이다. (ex. 선언한 변수, 함수 등)

콜스택(CallStack) : 요청된 작업들이 순차적으로 쌓이는 곳이다.

테스크 큐(Task Queue) : 비동기 처리 함수의 콜백함수, 이벤트 핸들러, 타이머 함수(SetTimeout)등이 저장되는 영역이다.

이벤트 루프(Event Loop) : 콜스택과 테스크 큐를 계속 주시하다가 콜스택이 비어 있으면 테스크 큐 내의 테스크를 콜스택으로 넣어주는 역할을 한다.

이벤트 루프는 콜스택과 테스크 큐를 주시하다가 콜스택이 비어 있으면, 테스크 큐의 첫 번째 콜백을 콜스택에 넣어준다. 이 과정이 비동기 함수가 호출되는 방식이다.
동시성을 지원하기 위한 비동기 요청 처리는 자바스크립트 엔진이 아닌 Node.js 또는 브라우저에서 담당한다.

그럼 코드로 간단히 알아보자.

예제 코드

function a() {
  console.log('a');
  b();
}

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

  c();
}

function c() {
  console.log('c');
}

a();

위 코드의 처리 결과는 어떻게 될까?

a
c
b

a, b, c가 아닌 위와 같은 결과가 나오는지 한 번 알아보자.

함수 a가 호출되면 함수 a는 콜스택에 쌓인다. 그리고 함수 a는 함수 b를 호출하므로 함수 b도 콜스택에 쌓인다.
그리고 함수 b 안의 setTimeout이 호출되는데 setTimeout의 콜백함수는 바로 실행되지 않고 지정 대기 시간만큼 기다린 후 테스크 큐로 이동한다.
함수 c가 호출되어 실행된 후 콜스택이 비워지면, 테스크 큐에 있던 setTimeout의 콜백함수가 이벤트 루프에 의해 콜스택으로 이동되어 실행된다.

정리

AJAX, setTimeout등 비동기 작업이 콜스택에 쌓인 후 실행되면 WebAPI는 바로 종료하여 테스크 큐에 콜백함수를 넣어준다.
그리고 이벤트 루프는 콜스택에 쌓여 있는 테스크가 없을 떄 테스크 큐에 있던 콜백 함수를 콜스택으로 이동시킨다.
콜스택에 쌓은 콜백함수가 실행되고 콜스택은 다시 비워진다.