[JavaScript]실행컨텍스트

실행 컨텍스트 (Execution Context)

자바스크립트의 코드 실행 원리를 설명하는 핵심 개념.
변수 관리(스코프), 실행 순서 제어, this 바인딩을 모두 담당한다.

1. 소스코드 타입과 실행 컨텍스트 생성

자바스크립트 코드는 네 가지 타입에 따라 실행 컨텍스트를 다르게 생성한다.

전역 코드 → 전역 스코프 생성, 전역 실행 컨텍스트 등록
함수 코드 → 지역 스코프, 매개변수·지역 변수·arguments 관리
eval 코드 → strict 모드일 때 독자적 스코프 생성
모듈 코드 → 모듈 스코프 생성

// 전역 코드
let x = 1;

function foo(y) { // 함수 코드
  return x + y;
}

console.log(foo(2)); // 실행 컨텍스트 스택에 foo가 push/pop됨

2. 코드 실행 과정: 평가 → 실행

평가 단계
- 선언문(변수, 함수)을 먼저 처리
- 스코프에 식별자 등록
실행 단계
- 실제 코드 실행 (할당, 연산, 호출 등)

console.log(a); // undefined (호이스팅 결과)
var a = 10;

평가 단계에서 var a가 미리 등록되고 undefined로 초기화됨.
실행 단계에서 10이 할당됨.

3. 실행 컨텍스트 스택

실행 컨텍스트는 스택 구조(LIFO)로 관리된다.

function one() {
  two();
}
function two() {
  console.log("two 실행");
}

one();

실행 순서:

전역 실행 컨텍스트 push
one 호출 → one 실행 컨텍스트 push
two 호출 → two 실행 컨텍스트 push
two 종료 → pop
one 종료 → pop

4. 렉시컬 환경

실행 컨텍스트를 구성하는 핵심 자료구조.
식별자(변수, 함수)와 상위 스코프 참조를 기록한다.

환경 레코드: 현재 스코프의 변수/함수 선언 저장소
외부 렉시컬 환경 참조: 상위 스코프를 가리킴 (스코프 체인 형성)

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 저장
외부 참조 = outer의 환경 (b)
다시 외부 참조 = 전역 환경 (a)

5. this 바인딩

렉시컬 스코프와 달리, this는 함수 호출 방식에 따라 값이 결정된다.
(→ 클로저와 구분 포인트)

function foo() {
  console.log(this);
}

foo(); // 전역 객체 (strict 모드면 undefined)

const obj = { foo };
obj.foo(); // obj

6. 클로저로 가기 전 핵심

클로저를 이해하려면 다음 3가지를 연결해야 한다.

렉시컬 스코프: 함수는 선언 당시 스코프를 기억한다.
실행 컨텍스트 + 렉시컬 환경: 변수/스코프가 어디 저장되는지 알아야 한다.
스코프 체인: 함수가 상위 스코프에 접근하는 방식.

예상 질문

실행 컨텍스트가 관리하는 요소
- 렉시컬 환경: 스코프와 식별자 관리 (변수, 함수, 상위 스코프 참조)
- this 바인딩: 실행 방식에 따라 결정됨
- 실행 컨텍스트 스택: 코드 실행 순서 관리
평가 단계와 실행 단계의 차이
- 평가 단계: 변수·함수 선언문만 먼저 실행해서 스코프에 등록 (호이스팅 발생)
- 실행 단계: 실제 코드 실행 (값 할당, 연산, 함수 호출 등)
렉시컬 환경의 구성 요소
- 환경 레코드 (Environment Record)
  - 현재 스코프의 변수·함수 선언 기록
- 외부 렉시컬 환경 참조 (Outer Reference)
  - 상위 스코프를 가리킴 → 스코프 체인 형성
렉시컬 스코프와 this 바인딩의 차이

렉시컬 스코프: 함수가 선언된 위치에 따라 상위 스코프가 결정됨 (고정)
this 바인딩: 함수가 호출된 방식에 따라 달라짐 (동적)