실행 컨텍스트 (Execution Context)

자바스크립트 개발자라면 반드시 이해해야 할 핵심 개념 중 하나가 바로 '실행 컨텍스트(Execution Context)' 입니다.

이 글에서는 실행 컨텍스트의 개념부터 세부 구성 요소까지 상세히 살펴보겠습니다.

 

1. 실행 컨텍스트란?

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 추상화한 개념입니다.

기본적으로 소스코드를 평가하여 실행 컨텍스트를 생성하는데요.

코드의 실행 순서와 스코프를 관리하며, 변수, 객체, 함수 등의 식별자 결정을 담당합니다.

쉽게 말해서 소스코드를 실행하는데 필요한 환경을 제공하고 실행결과를 관리하는 영역입니다.

 

스코프와 코드실행 순서를 관리하는 매커니즘으로 모든 코드는 실행컨텍스트를 통해 실행되고 관리됩니다.

실행컨텍스트의 렉시컬 환경이 스코프를 관리하며

실행컨텍스트의 스택이 실행순서를 결정합니다.

소스코드 평가 : 실행컨텍스트 생성 후에 스코프를 등록함

소스코드 실행 : 런타임 시작 => 선언문을 제외하고 소스코드 순차 실행 => 변수나 함수의 참조를 실행컨텍스트가 관리하는 스코프에서 검색해서 가져옴.

 

실행컨텍스트의 순서로는

1. 전역코드 평가 실행

2. 함수 코드 평가

3, 함수코드 실행 (런타임)

 

실행 컨텍스트는 크게 세 가지 유형으로 나눌 수 있습니다:

• 글로벌 실행 컨텍스트: 전역 범위에서 생성되는 컨텍스트
• 함수 실행 컨텍스트: 함수가 호출될 때마다 생성되는 컨텍스트
• Eval 실행 컨텍스트: eval() 함수 내에서 생성되는 컨텍스트

다음은 실행 컨텍스트의 생성 과정을 보여주는 간단한 다이어그램입니다.

실행 컨텍스트의 생성 과정

 

2. VariableEnvironment

VariableEnvironment는 실행 컨텍스트 생성 시점의 스냅샷으로,

변수 선언(var)과 함수 선언문의 정보를 저장합니다.

LexicalEnvironment와 구조적으로 동일하지만, 최초 실행 시의 상태를 유지합니다.

예시 코드를 보여드리겠습니다.

예시 코드:

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

function example() {
    console.log(y); // undefined
    var y = 20;
    console.log(y); // 20
}

example();

 

위 코드에서 VariableEnvironment는 x와 example 함수를 포함하고 있으며,

example 함수 내부의 VariableEnvironment는 y를 포함합니다.

 

3. LexicalEnvironment

LexicalEnvironment는 현재 실행 중인 코드의 렉시컬 환경을 나타냅니다.

변수와 함수 선언 외에도 블록 레벨 스코프(let, const)의 선언도 포함합니다.

코드 실행 중 값이 변경될 수 있습니다.

예시코드 :

let x = 10;
let y = 20;

function outer() {
    let x = 30;
    
    function inner() {
        let y = 40;
        console.log(x, y);
    }
    
    inner();
}

outer(); // 출력: 30 40

 

LexicalEnvironment의 변화를 그림으로 나타내면 다음과 같습니다

LexicalEnvironment의 변화

 

위 그림은 각 함수 호출에 따른 LexicalEnvironment의 계층 구조를 보여줍니다.

각 환경은 자신만의 변수를 가지고 있으며, 외부 환경에 대한 참조를 통해 스코프 체인을 형성합니다.

 

3-1. environmentRecord와 호이스팅(hoisting)

environmentRecord는 현재 컨텍스트 내의 식별자들을 기록합니다. 호이스팅은 이 과정에서 발생하는 현상으로, 선언문들이 코드의 최상단으로 끌어올려지는 것처럼 동작합니다.

호이스팅의 예:

console.log(hoistedVar); // undefined
console.log(hoistedFunc); // [Function: hoistedFunc]
// console.log(notHoisted); // ReferenceError

var hoistedVar = "I'm hoisted!";
function hoistedFunc() { return "I'm hoisted too!"; }
let notHoisted = "I'm not hoisted";

console.log(hoistedVar); // "I'm hoisted!"

 

3-2. 스코프, 스코프 체인, outerEnvironmentReference

스코프는 변수와 함수의 접근성과 생존 기간을 제어합니다.

스코프 체인은 중첩된 스코프를 연결하는 구조입니다.

outerEnvironmentReference는 외부 렉시컬 환경에 대한 참조로, 스코프 체인을 구현하는 메커니즘입니다.

스코프 체인의 예시코드:

let globalVar = "I'm global";

function outerFunc() {
    let outerVar = "I'm from outer";
    
    function innerFunc() {
        let innerVar = "I'm inner";
        console.log(globalVar); // "I'm global"
        console.log(outerVar);  // "I'm from outer"
        console.log(innerVar);  // "I'm inner"
    }
    
    innerFunc();
}

outerFunc();

 

스코프 체인을 시각화한 다이어그램

 

4. this

this는 현재 실행 컨텍스트의 this 값을 나타냅니다. 함수 호출 방식에 따라 동적으로 결정됩니다.

this의 다양한 바인딩 예시 :

// 전역 컨텍스트
console.log(this); // window (브라우저) 또는 global (Node.js)

// 객체 메서드
const obj = {
    method: function() {
        console.log(this);
    }
};
obj.method(); // obj

// 생성자 함수
function Constructor() {
    console.log(this);
}
new Constructor(); // Constructor {}

// 명시적 바인딩
function explicitBind() {
    console.log(this);
}
explicitBind.call({name: "explicit"}); // {name: "explicit"}
explicitBind.apply({name: "explicit"}); // {name: "explicit"}

// 화살표 함수
const arrowFunc = () => {
    console.log(this);
};
arrowFunc(); // 상위 스코프의 this (대개 window 또는 global)

 

실행 컨텍스트는 자바스크립트 엔진이 코드를 실행하는 데 필요한 모든 정보를 담고 있는 환경입니다.

VariableEnvironment와 LexicalEnvironment를 통해 변수와 함수의 스코프를 관리하고,

this 바인딩을 통해 현재 컨텍스트의 this 값을 결정합니다.