#15. 실행 컨텍스트란?

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 정의하는 개념이다.
함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되며,
실행 컨텍스트는 실행할 코드의 평가 및 실행에 필요한 정보를 담고 있다.

 

 

 

 

 

 

 

 

 

종류

전역 실행 컨텍스트(Global Execution Context)
- 코드가 실행될 때 가장 먼저 생성되는 컨텍스트.
- this는 브라우저 환경에서는 window, Node.js에서는 global을 가리킨다.

 

 

함수 실행 컨텍스트(Function Execution Context)
- 함수가 호출될 때마다 생성되며, 독립적인 실행 컨텍스트를 갖는다.
- 함수 내부의 변수, arguments 객체 등이 포함됨.

 

 

Eval 실행 컨텍스트(Eval Execution Context)
- eval() 함수가 실행될 때 생성되며, 일반적으로 사용하지 않는 것이 좋음.

 

 

 

 

 

 

 

 

 

 

구성 요소

Lexical Environment (어휘적 환경)

- 코드 실행에 필요한 식별자(변수, 함수)를 관리.
- Environment Record와 Outer Environment Reference로 구성됨.

- Environment Record
  > 현재 컨텍스트 내의 변수, 함수 선언을 저장.
- Outer Environment Reference
  > 스코프 체인 형성, 상위 컨텍스트 참조.

 

Variable Environment (변수 환경)
- var로 선언된 변수, 함수 선언을 관리.
- let, const는 Lexical Environment에 저장됨.

 

 

 

 

 

 

 

생성 과정

Creation Phase (생성 단계)
- 변수 및 함수 선언이 먼저 저장됨 (호이스팅 발생).
- var 변수는 undefined, let과 const는 초기화되지 않음(TDZ - Temporal Dead Zone).
- this 바인딩 결정.

 

Execution Phase (실행 단계)
- 코드 실행이 시작됨.
- 변수 값 할당 및 함수 호출 수행.

 

Garbage Collection (소멸 단계)
- 실행 컨텍스트가 더 이상 필요하지 않으면 메모리에서 제거됨.

 

 

 

 

 

 

흐름

function outer() {
  var a = 10;
  function inner() {
    let b = 20;
    console.log(a + b);
  }
  inner();
}
outer();

1. Global Execution Context 생성 → outer 함수 저장
2. outer() 호출 → outer Execution Context 생성
3. inner() 호출 → inner Execution Context 생성
4. inner 실행 후 종료 → inner Execution Context 제거
5. outer 실행 후 종료 → outer Execution Context 제거
6. 모든 코드 실행 완료 → Global Execution Context 유지

 

 

 

 

 

정리

 

실행 컨텍스트는 자바스크립트가 코드를 실행하는 환경을 정의하는 개념입니다.

실행 컨텍스트는 전역 실행 컨텍스트, 함수 실행 컨텍스트, 그리고 eval() 실행 컨텍스트로 나뉘며,
각 컨텍스트는 Lexical Environment와 Variable Environment로 구성됩니다.

실행 컨텍스트는 코드 실행 전 생성되며, 변수 호이스팅과 this 바인딩을 설정하는 역할을 합니다.
실행 과정은 생성 → 실행 → 소멸 단계로 진행됩니다.
예를 들어, 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되고, 실행이 끝나면 제거됩니다.

 

 

 

 

 

 

 

 

 

 

꼬리 질문

 

 

실행 컨텍스트와 콜 스택의 관계는?

 

- 실행 컨텍스트는 콜 스택(Call Stack)을 사용하여 관리됩니다.
- 즉, 콜 스택은 실행 컨텍스트를 저장하고 관리하는 자료구조이다.

 

콜 스택은 실행 컨텍스트를 저장하는 LIFO(Last In, First Out) 스택
- 함수가 호출되면 새로운 실행 컨텍스트가 콜 스택에 추가(push)되고, 실행이 종료되면 제거(pop)됩니다.

- 자바스크립트 엔진은 항상 콜 스택의 최상단(Top of Stack)에 있는 실행 컨텍스트를 실행

 

 

 

 

 

 

 

 

 

Lexical Environment와 Variable Environment의 차이는?

 

- 둘 다 변수와 함수를 저장하는 공간이지만, let과 const는 Lexical Environment에, var는 Variable Environment에 저장됩니다.
- Lexical Environment는 스코프 체인을 포함하여 상위 컨텍스트를 참조할 수 있습니다.

 

 

 

 

 

 

 

 

 

호이스팅과 실행 컨텍스트의 관계는?

 

- 실행 컨텍스트는 콜 스택을 통해 관리되며, 콜 스택은 실행 컨텍스트를 저장하는 LIFO(Last In, First Out) 방식의 자료구조입니다. 실행 컨텍스트가 생성되면 콜 스택에 push되고, 실행이 종료되면 pop됩니다.

 

- 실행 컨텍스트는 생성 단계에서 변수와 함수 선언을 메모리에 먼저 등록하는데, 이 과정에서 호이스팅이 발생합니다.

 

- var 변수는 undefined로 초기화되지만, let과 const는 초기화되지 않은 상태로 TDZ에 놓입니다.

- 함수 선언문은 실행 컨텍스트 생성 시 전체 함수가 메모리에 저장되므로, 선언 전에 호출할 수 있지만, 함수 표현식은 변수에 저장되므로 호이스팅되지 않습니다.

 

 

 

 

 

---

 

 

 

 

 

실행 컨텍스트는 함수가 실행되기 전에 먼저 생성된다.

1. 변수 및 함수 선언이 메모리에 등록된다.

var로 선언된 변수는 undefined로 초기화되며, 값 할당은 실행 단계에서 이루어진다.
let과 const는 선언되지만 초기화되지 않은 상태(TDZ, Temporal Dead Zone)에 놓인다.
함수 선언문은 실행 컨텍스트 생성 시 메모리에 전체 함수가 저장된다.

 

2. this 바인딩 결정

실행 컨텍스트 내부에서 this가 어떤 값을 가리킬지 설정된다.

 

 

실행 컨텍스트 생성 단계에서 발생하는 호이스팅

console.log(a);  // undefined
var a = 10;
console.log(a);  // 10

실행 컨텍스트 생성 단계에서 var a가 메모리에 등록되지만, 값은 undefined로 초기화되기 때문에 호이스팅이 발생한다.

this 바인딩 기준 정리

호출 방식	this 값
전역 실행 컨텍스트	브라우저: window / Node.js: module.exports
일반 함수 호출	window(브라우저) / global(Node.js)
객체의 메서드 호출	해당 객체
생성자 함수 호출 (new)	새로 생성된 객체
call, apply, bind 사용	명시적으로 지정한 객체
화살표 함수	상위 실행 컨텍스트의 this를 사용

 

 

 

위 코드는 내부적으로 이렇게 동작한다.

var a;  // 변수 선언이 먼저 메모리에 등록됨
console.log(a);  // undefined
a = 10;  // 값 할당
console.log(a);  // 10

 

 

함수 선언문도 호이스팅된다.

sayHello();  // "Hello, world!"

function sayHello() {
  console.log("Hello, world!");
}

위 코드에서 sayHello() 함수는 실행 컨텍스트 생성 단계에서 전체 함수가 메모리에 등록되기 때문에 실행 전에 호출해도 정상적으로 실행된다.

반면, 함수 표현식은 호이스팅되지 않는다.

sayHello();  // TypeError: sayHello is not a function

var sayHello = function() {
  console.log("Hello, world!");
};

위 코드는 내부적으로 다음과 같이 해석된다.

var sayHello;  // 변수 선언만 호이스팅됨 (값은 undefined)
sayHello();  // undefined() → TypeError 발생
sayHello = function() { console.log("Hello, world!"); };

이 차이는 실행 컨텍스트 생성 단계에서 함수 선언문과 함수 표현식이 메모리에 저장되는 방식이 다르기 때문이다.

 

 

 

 

 

콜 스택이 꽉 차면 어떻게 되나요?

 

- 콜 스택이 꽉 차면 스택 오버플로(Stack Overflow)가 발생하여 프로그램이 멈출 수 있다.

- 해결 방법으로 재귀 함수 호출 시 종료 조건을 반드시 추가해야 한다.

 

 

 

 

 

 

 

 

호이스팅이 발생하지 않는 변수 선언 방식은?

- let과 const는 선언은 호이스팅되지만 초기화되지 않은 상태(TDZ)에 놓이므로 참조할 수 없다.

 

 

 

 

 

 

 

 

 

함수 선언문과 함수 표현식의 차이는?

 

- 함수 선언문은 실행 컨텍스트 생성 시 메모리에 전체 함수가 저장되므로 선언 전 호출 가능.
- 함수 표현식은 변수에 저장되므로 호이스팅되지 않음.