클로저와 실행 컨텍스트

우리는 5장에서 자바스크립트 기본 문법부터 함수, DOM 조작과 이벤트 처리까지 웹 개발의 필수 내용을 학습했습니다.

이제 기본 페이지에 동작을 붙일 수 있는 단계에 올라온 상태입니다.

다음 단계에서는 왜 이렇게 동작하는가를 이해해야 합니다.

코드가 어떻게 평가되고 실행되는지, 변수와 함수가 메모리에서 어떻게 관리되는지를 알면 디버깅 속도와 코드 품질이 확실히 달라집니다.

6장 자바스크립트 심화 I는 이 내부 원리를 다룹니다.

그 첫 주제가 많은 개발자가 어려워하는 클로저(Closure)와 실행 컨텍스트(Execution Context)입니다.

자바스크립트는 Lexical Scoping(어휘적 스코핑)을 기반으로 동작합니다.

함수를 어디서 선언했는지가 스코프를 결정한다는 뜻입니다.

이 특성과 실행 환경이 결합되면서 실행 컨텍스트와 클로저가 만들어지고, 이 메커니즘이 비동기 처리, 모듈 패턴, 데이터 은닉의 기반이 됩니다.

실행 컨텍스트: 코드가 실행되는 환경

우리가 작성한 자바스크립트 코드가 실행되기 위해서는 특정 환경이 필요합니다.

코드의 실행 상태를 설명하는 명세상의 모델을 실행 컨텍스트(Execution Context)라고 부릅니다.

실행 컨텍스트는 현재 실행 위치와 변수 탐색 환경 등을 설명하는 추상 모델입니다. 엔진이 반드시 이 모양의 메모리 객체를 만들어야 한다는 뜻은 아닙니다. 이 절의 스택 그림도 코드의 호출·복귀 순서를 추적하기 위한 모델입니다.

자바스크립트 코드가 실행되는 순간, 엔진은 이 실행 컨텍스트를 생성하고, 이를 통해 변수를 관리하고, 스코프 체인을 구성하며, this 값을 결정하는 등의 작업을 수행합니다.

실행 컨텍스트의 종류

아래 동기 classic script 예시에서는 전역 코드와 함수 호출의 컨텍스트를 구분합니다. 모듈 평가·eval·제너레이터 등에는 추가 규칙이 있으므로 이 두 항목을 모든 실행 형식의 전체 목록으로 외우지는 않습니다.

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

자바스크립트 엔진은 여러 개의 실행 컨텍스트를 동시에 관리하기 위해 스택(Stack) 자료구조를 사용합니다.

이를 실행 컨텍스트 스택 또는 호출 스택(Call Stack)이라고 부릅니다.

• 아래 동기 classic script 실행 중에는 가장 아래에 해당 전역 코드의 컨텍스트가 있습니다. 스크립트 평가가 끝난 뒤 스택이 비어 있어도 전역 바인딩은 남을 수 있습니다.
• 함수를 호출할 때마다 새로운 함수 실행 컨텍스트가 스택의 맨 위에 추가(push)됩니다.
• 함수의 실행이 완료되면 해당 함수 실행 컨텍스트는 스택에서 제거(pop)됩니다.
• 스택의 가장 위에 있는 컨텍스트가 현재 실행 중인 코드의 환경입니다.

function first() {
    console.log('첫 번째 함수 실행');
    second(); // second 함수 호출
    console.log('첫 번째 함수 종료');
}

function second() {
    console.log('두 번째 함수 실행');
    // third 함수는 호출되지 않음
    console.log('두 번째 함수 종료');
}

first(); // first 함수 호출
console.log('전역 코드 종료');

위 코드가 실행될 때 호출 스택의 변화

이러한 스택 구조 덕분에 자바스크립트는 함수 호출 순서를 기억하고, 올바른 실행 흐름을 유지할 수 있습니다.

실행 컨텍스트의 구성 요소 (세부 심화)

여기서는 실행 상태 중 변수 탐색과 관련된 환경 참조를 중심으로 봅니다. LexicalEnvironment와 VariableEnvironment는 환경 레코드를 가리킵니다. 아래의 “레코드 + 바깥 참조” 표현은 이름 탐색 관계를 풀어 쓴 것이며, 실행 컨텍스트 전체를 정확히 세 칸으로 나눈 물리적 구조는 아닙니다.

자바스크립트 엔진이 어떤 변수를 찾을 때, 먼저 현재 실행 컨텍스트의 Lexical Environment에 있는 Environment Record에서 해당 변수를 찾습니다.

만약 찾지 못하면, Outer Environment Reference가 가리키는 외부 Lexical Environment로 이동하여 다시 변수를 찾습니다.

이 과정이 전역 Lexical Environment에 도달할 때까지 반복됩니다.

이 연결된 체인이 바로 스코프 체인이며, 변수 검색의 기본 원리입니다.

let a = 10; // 전역 렉시컬 환경의 Environment Record에 저장

function outer() {
    let b = 20; // outer 함수의 렉시컬 환경의 Environment Record에 저장
    // outer 함수의 Outer Environment Reference는 전역 렉시컬 환경을 가리킴

    function inner() {
        let c = 30; // inner 함수의 렉시컬 환경의 Environment Record에 저장
        // inner 함수의 Outer Environment Reference는 outer 함수의 렉시컬 환경을 가리킴

        console.log(a + b + c); // 10 + 20 + 30 = 60
        // c는 현재 스코프에서 찾음
        // b는 Outer (outer 함수) 스코프에서 찾음
        // a는 Outer (전역) 스코프에서 찾음
    }
    inner();
}
outer();

이러한 스코프 체인 덕분에 중첩된 함수는 외부 함수의 변수에 접근할 수 있게 됩니다.

클로저: 함수와 렉시컬 환경의 조합

이제 실행 컨텍스트와 렉시컬 환경, 스코프 체인에 대한 이해를 바탕으로 클로저 (Closure)라는 중요한 개념을 살펴보겠습니다.

클로저는 함수가 선언될 때의 렉시컬 환경(Lexical Environment)을 기억하여, 함수가 외부에서 호출될 때도 그 렉시컬 환경에 접근할 수 있는 현상을 의미합니다.

또는 더 간단히 말해, 자신의 외부 함수가 실행 컨텍스트에서 사라진 이후에도 외부 함수의 변수에 접근할 수 있는 함수를 클로저라고도 부릅니다.

조금 복잡하게 들릴 수 있지만, 예시를 통해 이해하면 훨씬 명확해집니다.

function makeCounter() {
    let count = 0; // 이 변수는 makeCounter의 렉시컬 환경에 포함됩니다.

    return function() { // 이 익명 함수가 클로저입니다.
        count++; // 외부 함수(makeCounter)의 count 변수에 접근
        return count;
    };
}

const counter1 = makeCounter(); // makeCounter 호출, 새로운 count=0을 가진 클로저 반환
const counter2 = makeCounter(); // makeCounter 또 호출, 또 다른 count=0을 가진 클로저 반환

console.log(counter1()); // 결과: 1 (counter1만의 count 변수를 증가시킴)
console.log(counter1()); // 결과: 2
console.log(counter2()); // 결과: 1 (counter2만의 count 변수를 증가시킴)
console.log(counter1()); // 결과: 3

이처럼 클로저는 함수가 생성될 당시의 환경(스코프)을 포획(capture)하여, 나중에 함수가 실행될 때 그 환경에 접근할 수 있도록 해주는 강력한 메커니즘입니다.

클로저의 활용 사례

클로저는 자바스크립트에서 매우 다양하게 활용됩니다.

function createWallet(initialBalance) {
    let balance = initialBalance; // 외부에서 직접 접근 불가

    return {
        getBalance: function() {
            return balance;
        },
        deposit: function(amount) {
            balance += amount;
            console.log(`${amount}원 입금. 현재 잔액: ${balance}`);
        },
        withdraw: function(amount) {
            if (balance >= amount) {
                balance -= amount;
                console.log(`${amount}원 출금. 현재 잔액: ${balance}`);
            } else {
                console.log("잔액이 부족합니다.");
            }
        }
    };
}

const myWallet = createWallet(10000);
myWallet.deposit(5000);    // 5000원 입금. 현재 잔액: 15000
myWallet.withdraw(7000);   // 7000원 출금. 현재 잔액: 8000
console.log(myWallet.getBalance()); // 8000
// console.log(myWallet.balance); // undefined (balance 변수는 외부에서 직접 접근 불가)

function delayedMessage(message, delay) {
    setTimeout(function() {
        console.log(message); // 외부 함수의 message 변수에 접근
    }, delay);
}

delayedMessage("5초 뒤에 출력될 메시지", 5000);

function multiply(a) {
    return function(b) { // 이 내부 함수가 클로저
        return a * b; // 외부 함수의 a 변수에 접근
    };
}

const multiplyBy5 = multiply(5); // a에 5를 고정시킨 새로운 함수 생성
console.log(multiplyBy5(10)); // 결과: 50
console.log(multiplyBy5(20)); // 결과: 100

클로저는 자바스크립트의 비동기성, 함수형 프로그래밍 패러다임과 밀접하게 연결되어 있으며, 자바스크립트의 강력함을 이해하는 데 필수적인 개념입니다.

직접 추적: 같은 함수의 별칭과 새 클로저

새 콘솔에서 아래 코드의 네 출력값을 실행 전에 적어 보세요. a와 alias가 같은 함수를 가리키는지, b가 별도 호출로 만들어졌는지를 기준으로 count 표를 두 줄로 나누면 됩니다.

function makeCounterForPractice() {
    let count = 0;
    return () => ++count;
}
const a = makeCounterForPractice();
const alias = a;
const b = makeCounterForPractice();
console.log(a());
console.log(alias());
console.log(b());
console.log(a());

독립 연습

위 코드에서 const alias = a; 한 줄만 const alias = makeCounterForPractice();로 바꾸세요. 네 출력값과 유지되는 count의 개수를 예측하고 실행으로 확인하세요.

근거: ECMAScript 실행 컨텍스트와 환경 참조, MDN 클로저.

실행 컨텍스트·클로저 정리

이 절에서는 호출 스택과 렉시컬 환경이 실제 변수 탐색 과정에서 어떻게 연결되는지 복기합니다.

이번 장에서는 자바스크립트의 코드가 실제로 어떻게 실행되고 변수가 관리되는지에 대한 근본적인 원리인 실행 컨텍스트와 클로저에 대해 학습했습니다.

실행 컨텍스트는 코드가 실행되는 환경이며, 스택 구조로 관리되어 함수의 호출과 종료에 따라 생성되고 소멸됩니다.

특히 실행 컨텍스트 내부의 렉시컬 환경과 그 안의 Outer Environment Reference가 어떻게 스코프 체인을 형성하여 변수를 탐색하는지 이해하는 것이 중요했습니다.

그리고 이러한 스코프 체인의 특성과 함수의 렉시컬 환경 포획 능력 덕분에 클로저라는 강력한 개념이 탄생함을 배웠습니다.

클로저는 바깥 함수의 호출이 끝난 뒤에도 필요한 바깥 바인딩에 접근할 수 있게 해줍니다. 데이터 은닉, 상태 유지, 나중 콜백에서 이 관계를 활용합니다.

클로저와 실행 컨텍스트는 함수가 어떤 스코프를 기억하고 어떤 순서로 실행되는지 설명할 때 필요합니다.

예제를 실행하면서 각 변수가 어느 스코프에 있고 언제 접근 가능한지 확인해 보세요.

실행 컨텍스트 생성, 렉시컬 환경 연결, 클로저 보존은 호출 스택과 환경 참조를 함께 따라가며 이해할 수 있습니다.

디버깅할 때는 “지금 실행 중인 호출”, “이름을 찾는 정의 위치”, “같은 바인딩을 공유하는 함수”를 구분해 보세요. 호출이 끝났다는 사실만으로 변수가 사라졌다고 결론 내리지 않습니다.