실행 컨텍스트 자바스크립트가 코드를 실행하는 단위

코드를 읽다 보면 “변수는 왜 여기서 보이지?”, “this는 왜 바뀌지?”, “호이스팅은 도대체 어디서 일어나는 거지?” 같은 질문이 계속 나온다.
이걸 한 번에 묶어서 설명해주는 게 실행 컨텍스트(Execution Context) 라고 봤다.

실행 컨텍스트의 종류

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

자바스크립트 코드가 로드되면 가장 먼저 생성된다.
전역 객체(브라우저의 window, Node.js의 global)와 연결된다.
프로그램이 종료될 때까지 단 하나만 존재한다.

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

함수가 호출될 때마다 생성된다.
호출될 때마다 새로운 컨텍스트가 쌓이므로, 같은 함수를 여러 번 호출하면 컨텍스트도 여러 개 생긴다.

eval 실행 컨텍스트 (거의 안 씀)

eval()로 실행되는 코드에 대한 컨텍스트다.
보안/성능 이슈 때문에 실무에서는 지양한다.

실행 컨텍스트에 담기는 정보

실행 컨텍스트는 “현재 코드가 어떤 규칙으로 실행돼야 하는지”를 담고 있다. 크게 아래 3개로 정리했다.

1) Variable Environment (변수 환경)

var로 선언된 변수
함수 선언문(대부분의 경우)

보통 “호이스팅으로 먼저 잡히는 애들”이 이쪽에 잡힌다고 이해하면 편했다.

2) Lexical Environment (렉시컬 환경)

스코프(식별자의 유효 범위)를 관리한다.
내부 구성은 보통 아래 두 개로 설명된다.
환경 레코드(Environment Record)
현재 스코프에 있는 식별자(변수/함수 등)를 기록한다.
let, const, 함수 표현식 같은 것들이 여기서 관리된다고 많이 설명한다.
외부 렉시컬 환경 참조(Outer Lexical Environment Reference)
바깥 스코프를 가리키는 참조다.
이 연결이 이어지면서 스코프 체인이 만들어진다.

스코프 체인은 “현재 스코프에 없으면 바깥으로 올라가며 식별자를 찾는 경로”라고 보면 된다.

3) this 바인딩(this binding)

현재 실행 컨텍스트에서 this가 뭘 가리킬지 결정된다.
그래서 this 규칙(일반 함수 호출/메서드 호출/new/bind 등)이 결국 “어떤 실행 컨텍스트에서 어떻게 바인딩되냐”로 연결된다.

콜 스택(Call Stack)과 실행 컨텍스트

함수가 호출될 때마다 실행 컨텍스트가 만들어지고, 그 컨텍스트들이 콜 스택에 쌓인다.

스택의 맨 위(top)가 “지금 실행 중인 컨텍스트”다.
함수가 끝나면 해당 컨텍스트는 스택에서 빠진다.

예제로 흐름 따라가기

예제 이미지

JavaScript

var x = "xxx";
 
function foo() {
  var y = "yyy";
 
  function bar() {
    var z = "zzz";
    console.log(x + y + z);
  }
 
  bar();
}
 
foo();

1) 전역 코드가 로드됨 → 전역 실행 컨텍스트 생성

전역 환경에는 대략 이런 식으로 잡힌다.

전역 환경 레코드에 x, foo가 등록된다.
콜 스택: [Global]

2) `foo()` 호출 → foo 실행 컨텍스트 생성

foo의 환경 레코드에 y, bar가 등록된다.
foo의 외부 렉시컬 환경 참조는 전역 렉시컬 환경을 가리킨다.
콜 스택: [Global, foo] (맨 위는 foo)

3) `bar()` 호출 → bar 실행 컨텍스트 생성

bar의 환경 레코드에 z가 등록된다.
bar의 외부 렉시컬 환경 참조는 foo 렉시컬 환경을 가리킨다.
콜 스택: [Global, foo, bar]

4) `console.log(x + y + z)`에서 식별자 탐색(스코프 체인)

z는 bar 스코프에서 찾는다.
y는 bar에 없으니 바깥(foo)으로 올라가서 찾는다.
x는 foo에도 없으니 전역으로 올라가서 찾는다.

그래서 최종적으로 "xxxyyyzzz"가 찍힌다.

5) 함수 종료에 따라 컨텍스트가 스택에서 빠짐

bar 종료 → 콜 스택: [Global, foo]
foo 종료 → 콜 스택: [Global]
프로그램 종료 → 전역 컨텍스트 종료

내가 정리한 핵심

“호이스팅/스코프/this”는 따로 노는 개념이 아니라, 실행 컨텍스트 안에서 같이 움직인다.
스코프 체인은 외부 렉시컬 환경 참조로 연결된다.
함수 호출이 많아질수록 컨텍스트가 쌓이고, 그게 콜 스택으로 보인다.