이 글은 『자바스크립트 딥 다이브』를 공부하며 정리한 내용입니다.
실행 컨텍스트와 콜 스택
자바스크립트에서 함수를 호출하면 함수 코드가 평가되어 실행 컨텍스트가 생성된다.
이때 생성된 실행 컨텍스트는 콜 스택(Call Stack)에 푸시되고, 함수 코드가 실행된다.
함수 실행이 종료되면 해당 실행 컨텍스트는 콜 스택에서 팝되어 제거된다.
예를 들어 foo 함수 안에서 bar 함수를 호출한다고 하자.
foo가 실행되면 foo의 실행 컨텍스트가 콜 스택에 쌓이고, 그 안에서 bar가 호출되면 bar의 실행 컨텍스트가 추가로 푸시된다.
함수가 종료될 때마다 해당 실행 컨텍스트는 순서대로 팝되어 제거된다.
이처럼 함수의 실행 순서는 콜 스택을 통해 관리된다.
자바스크립트 엔진은 단 하나의 콜 스택을 가진다.
즉, 동시에 두 개 이상의 함수를 동시에 실행할 수 없다.
현재 실행 중인 실행 컨텍스트를 제외한 나머지 실행 컨텍스트는 실행 대기 중이며,
현재 함수가 종료되어 콜 스택에서 제거되면 그다음 실행 컨텍스트가 실행된다.
동기 & 비동기
자바스크립트 엔진은 한 번에 하나의 작업만 처리하는 싱글 스레드(single-thread) 방식으로 동작한다.
이때 현재 실행 중인 작업이 끝나야 다음 작업이 실행되는 방식을 동기 처리(synchronous)라고 한다.
반면, 현재 작업이 끝나지 않아도 특정 작업을 나중에 실행하도록 예약하는 방식을 비동기 처리(asynchronous)라고 한다.
대표적인 예로 setTimeout, setInterval, HTTP 요청, 이벤트 핸들러 등이 있다.
단, “자바스크립트가 싱글 스레드로 동작한다”는 말은 자바스크립트 엔진만의 특성이다.
브라우저나 Node.js 환경은 멀티 스레드 구조로 되어 있으며,
비동기 작업은 브라우저의 Web API나 Node.js의 백그라운드 스레드에서 처리된다.
이후 해당 작업의 결과는 이벤트 루프(Event Loop)를 통해 자바스크립트 엔진으로 전달된다.
이벤트 루프, 태스크 큐, 마이크로태스크 큐
자바스크립트 엔진은 크게 콜 스택(Call Stack)과 힙(Heap)으로 구성된다.
- 콜 스택(Call Stack) : 실행 컨텍스트가 쌓이는 스택 구조.
함수가 호출될 때 실행 컨텍스트가 푸시되고, 종료되면 팝된다. - 힙(Heap) : 객체가 저장되는 메모리 공간.
실행 컨텍스트 내부에서 참조되는 객체들이 이곳에 저장된다.
자바스크립트 엔진은 요청된 작업을 순서대로 실행할 뿐,
비동기 작업의 관리(타이머, 이벤트 감시 등)는 브라우저나 Node.js 환경이 담당한다.
이 환경은 비동기 처리를 위해 태스크 큐(Task Queue)와 이벤트 루프(Event Loop)를 제공한다.
태스크 큐(Task Queue)
비동기 함수의 콜백 함수나 이벤트 핸들러가 일시적으로 보관되는 큐다.
예를 들어 setTimeout의 콜백은 일정 시간이 지난 뒤 태스크 큐로 이동한다.
마이크로태스크 큐(Microtask Queue)
Promise.then, MutationObserver 등의 콜백이 저장되는 큐다.
마이크로태스크 큐의 우선순위는 일반 태스크 큐보다 높다.
즉, 이벤트 루프는 콜 스택이 비어 있을 때
먼저 마이크로태스크 큐의 작업을 전부 처리한 후 태스크 큐의 작업을 실행한다.
이벤트 루프(Event Loop)
이벤트 루프는 끊임없이 다음을 반복한다:
- 콜 스택이 비어 있는지 확인한다.
- 비어 있다면, 마이크로태스크 큐 → 태스크 큐 순으로 대기 중인 함수를 콜 스택으로 이동시킨다.
- 이동된 함수는 즉시 실행된다.
이 과정을 통해 자바스크립트는 싱글 스레드임에도 비동기적 동작을 구현할 수 있다.
정리
자바스크립트는 싱글 스레드 기반의 동기적 언어다.
하지만 이벤트 루프와 큐 시스템을 통해 비동기 처리를 효율적으로 수행한다.
Promise, setTimeout, 이벤트 리스너 등의 비동기 로직은
결국 태스크 큐와 마이크로태스크 큐의 실행 순서 차이에 의해 동작 타이밍이 결정된다.
