JavaScript 실행 컨텍스트와 콜 스택

📘 실행 컨텍스트와 콜 스택

자바스크립트의 동작 방식은 실행 컨텍스트와 콜 스택을 중심으로 이루어집니다.
이 개념들을 제대로 이해하면 호이스팅, 비동기 처리, 클로저, this와 같은 핵심 개념들도 자연스럽게 이해할 수 있습니다.

1️⃣ 실행 컨텍스트란?

자바스크립트 코드가 실행되기 위해 필요한 환경 정보를 담고 있는 객체를 의미합니다.
실행 컨텍스트는 다음과 같은 정보를 담습니다:

• Variable Environment: 변수와 함수 선언 등 식별자 정보를 저장
• Lexical Environment: 스코프와 클로저의 핵심 개념
• this Binding: 현재 컨텍스트에서의 this 값

💡 실행 컨텍스트는 3단계로 구성됩니다:

1. Creation Phase (생성 단계): 변수와 함수 선언이 메모리에 할당됨 (호이스팅 발생)
2. Execution Phase (실행 단계): 코드가 한 줄씩 실행되면서 변수에 값이 할당됨
3. Destruction (소멸): 함수 실행이 끝나면 스택에서 제거됨

2️⃣ 콜 스택(Call Stack)이란?

자바스크립트는 싱글 스레드 언어로 한 번에 한 줄씩만 실행할 수 있습니다.
실행할 함수가 생기면 콜 스택(Stack 자료구조)에 쌓이고, 실행이 끝나면 제거됩니다.

📌 예제 코드로 이해하기

function first() {
  console.log("첫 번째 함수 실행");
  second();
}

function second() {
  console.log("두 번째 함수 실행");
  third();
}

function third() {
  console.log("세 번째 함수 실행");
}

first();

위 코드를 실행하면 콜 스택은 다음과 같이 변화합니다:

1. first() → 콜 스택에 push
2. second() → push
3. third() → push
4. third() 실행 종료 → pop
5. second() 실행 종료 → pop
6. first() 실행 종료 → pop

이처럼 자바스크립트는 함수 호출이 중첩될수록 콜 스택이 깊어지고, 마지막에 호출된 함수가 먼저 실행되고 끝난 후 이전 함수가 이어집니다. (LIFO 구조)

3️⃣ 콜 스택 오류: Stack Overflow

function recursive() {
  recursive();
}
recursive();

위 함수는 종료 조건 없이 자기 자신을 계속 호출하기 때문에 콜 스택이 무한히 쌓이며 에러가 발생합니다.
콘솔에는 Uncaught RangeError: Maximum call stack size exceeded 에러가 출력됩니다.

🧠 요약

• 실행 컨텍스트는 코드 실행에 필요한 환경(변수, 스코프 등)을 저장하는 공간입니다.
• 콜 스택은 함수 호출을 관리하는 자료구조입니다.
• 콜 스택이 깊어질수록 함수 실행 순서를 명확히 이해할 수 있습니다.