[실행 컨텍스트] 자바스크립트는 이렇게 코드를 실행한다.

728x90

실행 컨텍스트(Execution Context)

JavaScript는 인터프리터 언어임에도 코드 실행 전 많은 준비 과정을 거칩니다. 그 핵심에는 실행 컨텍스트(Execution Context)가 있습니다. 이 글에서는 실행 컨텍스트가 무엇이고, 어떤 순서로 코드가 실행되는지, 그리고 호이스팅, 스코프, 클로저와 어떤 관계가 있는지를 명확하게 정리합니다.

 

---

1.  실행 컨텍스트란?

실행 컨텍스트는 코드가 실행되는 환경(Context)을 정의하는 추상적인 개념입니다. JavaScript는 코드를 실행하기 전에 다음과 같은 준비를 합니다.

• 어떤 변수들이 존재하는가?
• 어떤 함수들이 선언되어 있는가?
• 현재 어떤 객체(this)를 참조해야 하는가?

이 모든 것을 관리하는 단위가 실행 컨텍스트입니다.

 

---

2.  실행 컨텍스트의 3단계 처리 순서

JavaScript는 코드를 2단계로 처리합니다.

1. 생성 단계 (Creation Phase)
   • 변수, 함수 선언을 스코프에 등록
   • var → undefined, let/const → TDZ
   • function 선언 → 전체 함수 정의를 등록
2. 실행 단계 (Execution Phase)
   • 실제 코드 실행
   • 변수에 값 할당
   • 함수 호출 등 실행 로직 진행
3. (콜스택 제어 포함)
   • 실행 컨텍스트는 콜 스택(Call Stack)에 쌓였다가 사라짐

 

---

3.  실행 컨텍스트 구조

Execution Context {
  VariableEnvironment: {
    var, function 선언 저장
  },
  LexicalEnvironment: {
    let, const, 클로저 환경 포함
  },
  thisBinding: {
    this가 참조하는 객체
  }
}

• 참고 : ES5에서는 VariableEnvironment와 LexicalEnvironment가 구분되었으나, ES6 이후 통합적으로 관리

 

---

4.  실행 컨텍스트 흐름 예제

var a = 1;

function foo() {
  var b = 2;
  console.log(a + b);
}

foo();

처리 과정 :

1. 전역 실행 컨텍스트 생성
   • a → undefined
   • foo → 함수 전체가 등록됨
2. 전역 코드 실행
   • a = 1
   • foo() 호출
3. foo 실행 컨텍스트 생성
   • b → undefined
4. foo 코드 실행
   • b = 2
   • console.log(a + b) → 1 + 2 = 3
5. foo 컨텍스트 제거 (콜스택에서 pop)

 

---

5.  실행 컨텍스트 & 콜스택

JavaScript는 싱글 스레드 기반입니다. 따라서 함수가 호출될 때마다 실행 컨텍스트가 콜스택에 쌓였다가, 실행 후 제거됩니다.

function outer() {
  console.log("outer");
  inner();
}

function inner() {
  console.log("inner");
}

outer();

콜스택 흐름 :

1. 전역 컨텍스트 push
2. outer() 호출 → outer 컨텍스트 push
3. inner() 호출 → inner 컨텍스트 push
4. inner 실행 종료 → inner pop
5. outer 실행 종료 → outer pop
6. 전역 종료 → 전역 pop

 

---

6.  실행 컨텍스트와 관련된 개념들

개념	실행 컨텍스트와의 관계
호이스팅	생성 단계에서 변수/함수가 미리 등록됨
스코프	LexicalEnvironment에 의해 결정됨
클로저	실행 컨텍스트 종료 후에도 LexicalEnvironment가 유지됨
this 바인딩	각 컨텍스트 생성 시 this 결정됨

 

---

7.  마무리

• 실행 컨텍스트는 코드 실행을 위한 내부 환경입니다.
• 코드 실행 전 생성 단계입니다. → 변수/함수 등록 (호이스팅 발생)
• 실행 중엔 실제 코드 실행 단계입니다.
• 함수 호출 시마다 새로운 실행 컨텍스트가 생성되고, 콜스택에 쌓였다가 제거됩니다.
• 실행 컨텍스트는 호이스팅, 스코프, 클로저, this와 긴밀히 연결됩니다.

함께 보면 좋은 자료

블로그 글 :

[호이스팅] 변수 선언의 비밀

[스코프] 변수는 어디까지 살아있을까?

[호이스팅] 변수 선언의 비밀

 

---

반응형