자바스크립트 콜 스택(Call Stack)과 실행 컨텍스트(Execution Context) 이해하기

이 글은 자바스크립트 개발자라면 알아야 할 33가지 개념(33 JavaScript Concepts) 중 콜 스택을 정리한 글입니다.

자바스크립트 개발자라면 알아야 할 33가지 개념

콜 스택(Call Stack)

자바스크립트에서 콜 스택은 자바스크립트 엔진이 함수의 호출과 실행 순서를 추적하기 위해 사용하는 스택 자료구조(LIFO: Last In, First Out)입니다.
자바스크립트는 싱글 스레드 언어로, 한 번에 하나의 작업(함수 실행)만 처리할 수 있습니다. 따라서 동시에 여러 함수를 실행할 수 없고, 콜 스택을 통해 순차적으로 하나씩 실행됩니다.
콜 스택은 코드 실행 중에 생성된 모든 실행 컨텍스트를 저장하는 역할을 합니다.

콜 스택(Call Stack)의 동작 방식

[출처] JavaScript Visualized: Event Loop, Web APIs, (Micro)task Queue

자바스크립트 코드 실행이 시작되면, 자바스크립트 엔진은 가장 먼저 전역 실행 컨텍스트를 생성하고 콜 스택에 추가(Push)합니다. 이후 함수가 호출될 때마다 해당 함수에 대한 새로운 실행 컨텍스트가 생성되어 콜 스택의 최상단에 추가(Push)됩니다. 콜 스택의 최상단에 위치한 실행 컨텍스트가 현재 실행 중인 함수입니다.
함수의 실행이 완료되면, 해당 실행 컨텍스트는 콜 스택에서 제거(Pop)됩니다. 함수가 다른 함수를 호출하면 새로운 실행 컨텍스트가 다시 스택의 최상단에 쌓이게 되며, 이 과정을 반복합니다.
모든 함수의 실행이 종료되면 콜 스택은 비워지고, 프로그램의 실행도 종료됩니다.

콜 스택(Call Stack) 예제 코드

function greet(name) {
  console.log(`Hello, ${name}`);
}

function welcome() {
  greet("John");
}

welcome();

콜 스택(Call Stack) 상태

1. 전역 실행 컨텍스트 생성: 자바스크립트 코드 실행이 시작되면, 자바스크립트 엔진은 가장 먼저 전역 실행 컨텍스트를 생성하고 콜 스택에 추가(Push)합니다.
2. welcome() 함수 호출: welcome() 함수가 호출되어 실행 컨텍스트가 콜 스택에 추가(Push)됩니다.
3. greet("John") 함수 호출: welcome 함수 내부에서 greet("John") 함수가 호출되어 실행 컨텍스트가 콜 스택에 추가(Push)됩니다.
4. console.log("Hello, John") 함수 호출: greet 함수 내부에서 console.log("Hello, John") 함수가 호출되어 실행 컨텍스트가 콜 스택에 추가(Push)되고, 출력이 완료된 후 실행 컨텍스트가 콜 스택에서 제거(Pop)됩니다.
5. greet("John") 함수 종료: greet 함수가 종료되어 실행 컨텍스트가 콜 스택에서 제거(Pop)됩니다.
6. welcome 함수 종료: welcome 함수가 종료되어 실행 컨텍스트가 콜 스택에서 제거(Pop)됩니다.
7. 전역 컨텍스트 종료 및 콜 스택 비움: 모든 함수 실행이 완료되면 전역 실행 컨텍스트도 콜 스택에서 제거되고, 콜 스택이 완전히 비워집니다.

실행 컨텍스트(Execution Context)

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경(상태)을 의미하며, 변수, 함수 선언, this, 스코프 체인 등 실행에 필요한 모든 정보를 담고 있습니다. 실행 컨텍스트는 자바스크립트 엔진이 코드 실행을 관리하는 기본 단위입니다.

실행 컨텍스트 유형

자바스크립트에는 다음 세 가지 유형의 실행 컨텍스트가 있습니다.

전역 실행 컨텍스트(Global Execution Context)

전역 실행 컨텍스트는 자바스크립트 프로그램이 실행될 때 가장 먼저 생성되는 기본 실행 컨텍스트입니다. 함수 외부에 코드, 즉 전역 범위에 존재하는 모든 코드가 이 컨텍스트에서 실행됩니다.
전역 실행 컨텍스트는 두 가지 작업을 수행합니다.

• 전역 객체 생성: 브라우저 환경에서는 전역 객체(window)를 생성하고, Node.js 환경에서는 전역 객체(global)를 생성합니다.
• this 바인딩: 전역 실행 컨텍스트 내에서 전역 객체를 가리킵니다.

프로그램에는 전역 실행 컨텍스트가 오직 하나만 존재합니다. 전역 실행 컨텍스트는 콜 스택에 가장 먼저 추가(Push)되며, 프로그램이 종료될 때까지 유효합니다.

함수 실행 컨텍스트(Functional Execution Context)

함수 실행 컨텍스트는 함수가 호출될 때마다 해당 함수에 대한 새로운 실행 컨텍스트가 생성됩니다. 각 함수 호출마다 독립적인 실행 컨텍스트가 생성되어 콜 스택에 추가(Push)되며, 함수 실행이 끝나면 제거(Pop)됩니다.

Eval 함수 실행 컨텍스트(Eval Function Execution Context)

eval() 함수 내부에서 실행되는 코드는 별도의 실행 컨텍스트를 생성합니다. 하지만 eval() 함수는 보안 취약점, 디버깅 어려움, 성능 저하 등의 문제로 인해 일반적으로 사용이 권장되지 않습니다.

스택 오버플로우(Stack Overflow)

자바스크립트의 콜 스택은 크기에 제한이 있습니다. 따라서 함수 호출이 끝없이 이어지는 무한 재귀와 같은 상황에서는 콜 스택이 가득 차게 되어 스택 오버플로우(Stack Overflow) 오류가 발생합니다.

function recursive() {
  recursive(); // 자기 자신을 계속 호출
}

recursive(); // Uncaught RangeError: Maximum call stack size exceeded

위 코드를 실행하면 콜 스택이 계속 쌓이다가 한계를 넘어서고, Uncaught RangeError: Maximum call stack size exceeded 오류가 발생합니다.

스택 오버플로우 오류

💡 콜 스택의 최대 크기는 브라우저나 자바스크립트 엔진에 따라 다릅니다.

요약

• 콜 스택은 함수의 호출과 실행 순서를 추적하기 위해 사용하는 스택 자료구조(LIFO: Last In, First Out)입니다.
• 자바스크립트는 싱글 스레드 언어로, 한 번에 하나의 작업(함수 실행)만 처리할 수 있습니다.
• 함수가 호출되면 실행 컨텍스트가 생성되어 콜 스택에 추가(Push)되고, 실행이 끝나면 제거(Pop)됩니다.
• 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경(상태)을 의미하며, 세 가지 유형(전역 실행 컨텍스트, 함수 실행 컨텍스트, Eval 함수 실행 컨텍스트)이 있습니다.
• 무한 재귀 호출 등으로 콜 스택이 가득 차게 되면 스택 오버플로우(Stack Overflow) 오류가 발생합니다.

참고

Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more
The JavaScript Call Stack - What It Is and Why It's Necessary
Understanding Execution Context and Execution Stack in Javascript
JavaScript Visualized: Event Loop, Web APIs, (Micro)task Queue

👉 다음 글 보기

자바스크립트 원시 타입 완전 정리 - 7가지 Primitive Types 한눈에 보기