[JS] 렉시컬 스코프(Lexical Scope)와 클로저(Closure)

렉시컬 스코프는 함수를 어디서 정의했는지에 따라 함수 내부에서 사용할 수 있는 변수의 범위가 결정된다는 의미입니다. 이 규칙에 따르면, 변수의 스코프는 함수가 정의된 위치에 의해 결정됩니다. 즉, 함수를 어디서 호출했는지가 아니라, 어디서 함수가 정의되었는지가 중요합니다.

 

렉시컬 스코프의 작동 방식

렉시컬 스코프는 함수가 선언된 위치에 따라 해당 함수가 접근할 수 있는 변수들이 결정됩니다. 함수가 실행될 때, 함수의 스코프 체인은 함수가 정의된 시점의 환경을 기반으로 생성됩니다.

 

예제

var globalVar = "I'm a global variable";

function outerFunction() {
    var outerVar = "I'm an outer variable";
    
    function innerFunction() {
        var innerVar = "I'm an inner variable";
        console.log(globalVar);  // I'm a global variable
        console.log(outerVar);   // I'm an outer variable
        console.log(innerVar);   // I'm an inner variable
    }
    
    innerFunction();
}

outerFunction();

 

위 예제에서 'innerFunction'은 'outerFunction' 내부에서 정의되었기 때문에, 'innerFunction'은 'outerFunction'의 변수인 'outerVar'에 접근할 수 있으며, 또한 전역 변수인 'globalVar'도 접근할 수 있습니다. 이는 렉시컬 스코프 덕분입니다.

 

렉시컬 스코프의 특징

• 함수 정의 위치 기반 : 함수가 정의된 위치에 따라 해당 함수의 스코프가 결정됩니다. 호출 위치와 상관없이 함수가 정의된 스코프를 참조합니다.
• 스코프 체인 : 함수가 중첩된 경우, 내부 함수는 외부 함수의 스코프에 접근할 수 있습니다. 이는 함수가 정의된 위치를 기준으로 스코프 체인이 형성되기 때문입니다. (변수에 접근할 때 참조되는 스코프들의 연결)
• 전역 스코프와 지역 스코프 : 전역 스코프는 어디서든 접근할 수 있지만, 지역 스코프는 해당 스코프 내에서만 접근할 수 있습니다. 렉시컬 스코프에서는 함수 내부에서 외부의 스코프에 있는 변수에 접근할 수 있습니다.

 

스코프 체인(Scope Chain)

자바스크립트에서 변수에 접근할 때 참조되는 스코프(범위)들의 연걸입니다. 이는 변수를 어디에서 찾아야 하는지를 결정하는 중요한 매커니즘입니다.

 

 

클로저(Closure)

클로저는 함수와 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합입니다. 클로저를 이해하려면 두 가지 요소를 고려해야 합니다.

1. 함수 : 자바스크립트에서 함수는 독립적인 실행 단위이며, 내부에 변수를 가질 수 있습니다.
2. 렉시컬 환경 : 함수가 정의될 때의 스코프 체인과 그에 따른 변수들을 포함하는 환경입니다.

클로저는 함수가 외부에서 호출될 때에도 그 함수가 정의된 스코프의 변수에 접근할 수 있는 매커니즘을 말합니다. 이는 함수가 선언된 시점에서의 렉시컬 스코프를 기억하고 있는 것을 의미합니다.

 

렉시컬 스코프와 클로저의 관계

클로저는 함수가 렉시컬 스코프를 따르는 언어에서 자연스럽게 발생합니다. 함수가 정의될 때 그 함수가 접근할 수 있는 변수들의 스코프 체인이 결정되며, 이 스코프 체인은 함수가 호출될 때까지 유지됩니다. 따라서 클로저는 함수가 정의된 위치에 따라 외부 변수에 접근할 수 있는 능력을 제공합니다.

 

클로저 예제

function createCounter() {
    var count = 0;
    
    function increment() {
        count++;
        console.log(count);
    }
    
    return increment;
}

var counter1 = createCounter();
counter1();  // 1
counter1();  // 2

var counter2 = createCounter();
counter2();  // 1 (새로운 클로저 인스턴스에 의해 독립적인 count 변수가 생성됨)

 

위 예제에서 createCounter 함수는 increment 함수를 반환합니다. 각각의 counter1과 counter2는 독립적인 클로저를 형성하며, 각각의 클로저는 자신만의 count 변수를 가지고 있습니다. 이는 클로저가 함수가 정의된 시점의 렉시컬 환경을 기억한다는 것을 보여줍니다.

결론

렉시컬 스코프는 변수의 접근 규칙을 정의하며, 클로저는 이러한 렉시컬 스코프를 기반으로 함수가 외부 변수에 접근할 수 있는 메커니즘을 제공합니다. 이 두 개념을 이해하면 자바스크립트의 변수 스코프와 함수 동작 메커니즘을 더 깊이 이해할 수 있습니다.