실행 컨텍스트란?

JavaScript를 공부하다 보면 반드시 만나게 되는 개념이 바로 "실행 컨텍스트(Execution Context)" 이다.
사실 이 개념을 제대로 이해하면 변수의 유효 범위, 함수 호출 방식, this의 동작 원리까지 한 번에 정리된다!

---

실행 컨텍스트란?

자바스크립트 코드가 실행되는 환경(Context) 을 의미한다.

JavaScript 엔진은 코드를 실행할 때, 해당 코드가 어떤 환경에서 실행되는지를 추적하기 위해 실행 컨텍스트를 생성하고 관리한다.
즉, 변수, 함수, 객체 등 코드 실행에 필요한 모든 정보를 담고 있는 일종의 실행 정보 묶음이다.

---

실행 컨텍스트의 종류

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

• 자바스크립트가 실행될 때 가장 먼저 생성되는 컨텍스트
• 전역 코드(최상위 스코프)에서 선언된 변수, 함수 등을 포함함
• 페이지가 종료될 때까지 유지됨

📌 전역 컨텍스트는 오직 1개만 존재한다. ( 싱글 스레드이기 때문에 )

예제

var x = 10;

function greet() {
  console.log("Hello, World!");
}

greet(); // "Hello, World!"

위 코드가 실행되면 전역 실행 컨텍스트가 생성이 된다!

• x 변수
• greet() 함수

이 둘을 전역 공간에 등록하고, 실행한다.

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

• 함수가 호출될 때마다 생성되는 컨텍스트
• 함수 내부에서 선언된 변수, 매개변수, 내부 함수 등을 관리
• 함수 실행이 종료되면 해당 컨텍스트도 제거된다.

예제

function add(a,b) {
	let sum = a + b;
  	return sum;
}

let result = add(3,5);
console.log(result);

이때 add(3,5)가 호출되면 함수 전용 실행 컨텍스트가 생성되고,

• a = 3, b = 5, sum = 8 같은 정보가 해당 컨텍스트에 저장된다.

---

실행 컨텍스트의 구성 요소

실행 컨텍스트는 크게 아래 3가지 구성 요소로 이루어져 있다.

1. 변수 객체 (Variable Object)

현재 실행 중인 컨텍스트에서 선언된 변수, 함수, 매개변수 등을 저장하는 공간

• 전역 컨텍스트에서는 전역 객체(window or global)
• 함수 컨텍스트에서는 활성 객체(Activation Object)가 변수 객체 역할

예제

function example(x) {
	let y = 10;
  	function inner() {
    	return x + y;
    }
  return inner();
}

example(5); // x=5, y=10 -> 15

이 함수 컨텍스트의 변수 객체에는 아래 항목들이 저장된다.

• x: 5
• y: 10
• inner: function

2. 스코프 체인 (Scope Chain)

현재 실행중인 컨텍스트에서 외부 렉시컬 환경과 연결된 참조 정보

• 변수를 찾을 때 현재 컨텍스트 -> 부모 컨텍스트 -> ... -> 전역까지 위로 탐색

예제

let a = 1;

function outer() {
	let b = 2;
  
  	function inner() {
    	let c = 3;
      	console.log(a,b,c);
    }
  
  inner();
}

outer(); //1,2,3

이때 inner() 함수는 c -> b -> a 순서로 스코프 체인을 따라 변수를 참조한다.

3. this 바인딩

컨텍스트에 따라 this가 가리키는 대상이 달라진다.

컨텍스트	this가 참조하는 대상
전역 컨텍스트	전역 객체 (window or global )
일반 함수 호출	전역 객체 (strict mode 에서는 undefined)
메서드 호출	해당 객체
생성자 함수	새로 생성되는 인스턴스

예제

console.log(this) // window ( 전역 컨텍스트 )

function show() {
	console.log(this); // window (비엄격 모드일 때)
}
show();

const obj = {
	method: function() {
    	console.log(this) // obj
    }
};
obj.method();

this는 함수가 어떻게 호출되는지에 따라 동적으로 결정된다.

---

🧠 실행 컨텍스트 흐름 정리

1. 전역 코드가 실행되면 전역 실행 컨텍스트 생성
2. 함수가 호출되면 함수 실행 컨텍스트가 스택에 쌓임
3. 함수 실행 종료 시 해당 컨텍스트가 스택에서 제거(Pop)

Call Stack 예시

function a() {
	b();
}

function b() {
	console.log("Hello");
}
a();

1. a() -> b() -> console.log() 순으로 컨텍스트가 쌓인다.
2. console.log() -> b() -> a() 순으로 컨텍스트가 제거된다.

---

실행 컨텍스트는 JavaScript 엔진 내부 동작을 이해하는 데 핵심이 되는 개념이다 !
조금 어렵게 느껴지긴 하지만 변수 참조, 함수 실행 흐름, this 바인딩 등을 이해할 때 정말 중요한 기반이 되기 때문에 공부를 해야한다!!