실행 컨텍스트와 스코프: 자바스크립트의 핵심 개념 완전 정복

자바스크립트에서 실행 컨텍스트(Execution Context) 와 스코프(Scope) 는 코드가 실행되는 방식을 결정하는 중요한 개념입니다. 이를 제대로 이해하면 코드의 동작 원리를 보다 명확하게 파악할 수 있으며, 디버깅과 최적화를 보다 효과적으로 수행할 수 있습니다.

이번 포스트에서는 실행 컨텍스트와 스코프의 개념을 심층적으로 분석하고, 실용적인 예제와 함께 이를 명확히 설명하겠습니다.

---

🔹 실행 컨텍스트(Execution Context)란?

실행 컨텍스트의 개념

실행 컨텍스트는 자바스크립트 코드가 실행될 때 생성되는 환경을 의미합니다. 즉, 실행 컨텍스트는 변수, 함수, this 바인딩 등을 관리하며 코드가 실행되는 동안 이를 추적하는 역할을 합니다.

자바스크립트 엔진은 실행 컨텍스트를 기반으로 코드의 흐름을 제어하고, 이를 통해 변수와 함수의 접근을 관리합니다. 실행 컨텍스트는 크게 전역 실행 컨텍스트(Global Execution Context) 와 함수 실행 컨텍스트(Function Execution Context) 로 나뉩니다.

---

🔹 실행 컨텍스트의 구성 요소

실행 컨텍스트는 다음과 같은 세 가지 요소로 구성됩니다.

1️⃣ 변수 객체(Variable Object, VO)

변수 객체는 실행 컨텍스트 내부에서 선언된 모든 변수, 함수, 매개변수(arguments) 등을 저장하는 객체입니다.
호이스팅(hoisting) 과정에서 변수와 함수가 이 객체에 먼저 등록됩니다.

2️⃣ 스코프 체인(Scope Chain)

스코프 체인은 현재 실행 중인 코드에서 변수를 찾기 위한 연결 구조입니다.
변수를 찾을 때 현재 실행 컨텍스트의 변수 객체에서 먼저 검색하고, 없을 경우 상위 스코프로 올라가면서 변수를 찾습니다.

3️⃣ this 바인딩(this value)

this 키워드가 어떤 객체를 참조할지를 결정합니다.

• 전역 컨텍스트에서는 window(브라우저 환경) 또는 global(Node.js 환경)을 참조
• 함수 내부에서는 호출 방식에 따라 this 값이 달라짐

---

🔹 실행 컨텍스트 생성 과정

자바스크립트에서 실행 컨텍스트는 세 단계 과정을 거쳐 생성됩니다.

📌 1. 생성 단계 (Creation Phase)

• 실행될 코드의 변수 및 함수 선언이 메모리에 등록됩니다.
• this 바인딩이 설정됩니다.
• 변수는 undefined로 초기화, 함수는 메모리에 저장됩니다.

📌 2. 초기화 단계 (Initialization Phase)

• var 선언 변수는 undefined로 초기화됩니다.
• let과 const는 TDZ(Temporal Dead Zone) 에 놓이며 초기화되지 않습니다.

📌 3. 실행 단계 (Execution Phase)

• 코드가 실행되면서 변수에 값이 할당됩니다.
• 함수가 실행되면서 새로운 실행 컨텍스트가 생성될 수도 있습니다.

---

🔹 실행 컨텍스트 예제

다음 예제를 통해 실행 컨텍스트의 동작 방식을 살펴보겠습니다.

function outerFunction() {
    let outerVar = "바깥 변수";

    function innerFunction() {
        let innerVar = "안쪽 변수";
        console.log(outerVar); // "바깥 변수"
    }

    innerFunction();
}

outerFunction();

✅ 실행 과정 분석

1. outerFunction()이 호출되면서 새로운 실행 컨텍스트가 생성됩니다.
2. outerVar 변수가 outerFunction의 변수 객체(VO)에 등록됩니다.
3. innerFunction()이 호출되면서 또 다른 실행 컨텍스트가 생성됩니다.
4. innerFunction() 내부에서는 현재 컨텍스트에서 변수를 먼저 찾고, 없으면 상위 스코프(outerFunction)를 탐색하여 outerVar를 찾습니다.

➡️ 이 과정이 바로 스코프 체인의 동작 방식입니다.

---

🔹 스코프(Scope)란?

스코프란 특정 코드에서 변수나 함수에 접근할 수 있는 범위를 정의하는 개념입니다.
자바스크립트에서는 다음과 같은 주요 스코프 유형이 존재합니다.

---

📌 1. 전역 스코프(Global Scope)

• 코드 어디에서든 접근할 수 있는 범위입니다.
• 전역에서 선언된 변수는 프로그램이 종료될 때까지 메모리에 유지됩니다.

let globalVar = "전역 변수";

function printGlobalVar() {
    console.log(globalVar); // "전역 변수"
}

printGlobalVar();
console.log(globalVar); // "전역 변수"

---

📌 2. 지역 스코프(Local Scope)

• 특정 함수 내부에서 선언된 변수는 해당 함수 내부에서만 접근 가능합니다.
• 함수 실행이 종료되면 지역 변수는 메모리에서 해제됩니다.

function testScope() {
    let localVar = "지역 변수";
    console.log(localVar); // "지역 변수"
}

testScope();
console.log(localVar); // ReferenceError: localVar is not defined

---

📌 3. 블록 스코프(Block Scope)

• ES6 이후, let과 const를 사용하면 블록 {} 내부에서도 변수를 제한할 수 있습니다.
• var는 블록 스코프를 가지지 않고 함수 단위로만 제한됩니다.

if (true) {
    let blockVar = "블록 변수";
    console.log(blockVar); // 정상 출력
}

console.log(blockVar); // ReferenceError: blockVar is not defined

---

📌 4. 스코프 체인(Scope Chain)

자바스크립트는 스코프 체인을 이용하여 변수를 검색합니다.
즉, 변수를 찾을 때 현재 실행 컨텍스트 → 부모 컨텍스트 → 전역 컨텍스트 순으로 탐색합니다.

let globalVar = "전역 변수";

function outer() {
    let outerVar = "외부 함수 변수";

    function inner() {
        let innerVar = "내부 함수 변수";
        console.log(innerVar); // "내부 함수 변수"
        console.log(outerVar); // "외부 함수 변수"
        console.log(globalVar); // "전역 변수"
    }

    inner();
}

outer();

➡️ inner() 내부에서 outerVar를 찾으면, 현재 컨텍스트에 없기 때문에 부모 컨텍스트(outer)에서 찾습니다.
➡️ globalVar 역시 같은 방식으로 전역 컨텍스트까지 거슬러 올라가면서 탐색됩니다.

---

🔹 실행 컨텍스트와 스코프를 이해해야 하는 이유

자바스크립트의 실행 원리를 이해하면 효율적이고 오류가 적은 코드를 작성할 수 있습니다.
이를 제대로 익히면 다음과 같은 장점이 있습니다.

1. 변수와 함수의 접근 방식을 명확히 이해하여 버그를 줄일 수 있다.
2. 호이스팅(hoisting), 클로저(closure), 비동기(async/await) 처리 등의 개념을 쉽게 습득할 수 있다.
3. 메모리 관리 및 성능 최적화를 효과적으로 수행할 수 있다.