자바스크립트는 단일 스레드로 동작하는 언어이기 때문에 동시에 여러 가지 작업을 처리하기 위해 이벤트 루프(Event Loop)라는 메커니즘이 사용됩니다. 이벤트 루프는 자바스크립트의 비동기 처리를 가능케 하는 핵심 메커니즘입니다.

이벤트 루프란?

이벤트 루프는 호출 스택(Call Stack), 백그라운드(Browser APIs), 태스크 큐(Task Queue)로 구성되어 있습니다. 호출 스택은 실행 중인 함수의 정보를 저장하는 곳이고, 백그라운드는 타이머나 HTTP 요청과 같은 비동기 작업이 처리되는 곳입니다. 태스크 큐는 이러한 비동기 작업이 완료되면 콜백 함수가 저장되는 곳입니다.

동작 방식

1. 호출 스택
   
   • 코드의 실행 순서와 관련된 정보를 저장합니다.
   • 함수 실행 시 호출 스택에 해당 함수의 정보가 추가되고, 함수 종료 시에는 해당 정보가 제거됩니다.

function foo() {
  console.log('foo');
  bar();
}

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

foo();

1. 백그라운드와 태스크 큐
   
   • 비동기 작업은 백그라운드에서 처리되고, 작업이 완료되면 해당 작업의 콜백 함수가 태스크 큐에 추가됩니다.

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

1. 이벤트 루프
   
   • 호출 스택이 비어있을 때, 태스크 큐에서 콜백 함수를 호출 스택으로 이동시킵니다.
   • 이렇게 반복하여 비동기 작업의 콜백 함수를 실행하고, 호출 스택을 계속 확인하여 비동기 작업이 완료될 때까지 대기합니다.

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

결론

이벤트 루프를 통해 자바스크립트는 비동기 작업을 효과적으로 처리할 수 있으며, 이를 통해 웹 애플리케이션이 더욱 반응성을 높일 수 있습니다.

참고 문헌: MDN Web Docs