JavaScript, 클로저에 대해서 알아보자(한국어)

자바스크립트 클로저는 함수와 그 주변 상태(렉시컬 환경)에 대한 참조가 함께 묶여(enclosed) 있는 것입니다.

즉, 클로저는 내부 함수에서 외부 함수의 스코프에 접근할 수 있게 해줍니다. 자바스크립트에서는 함수가 생성될 때마다 클로저가 생성되며, 함수가 생성될 때 이뤄집니다.


클로저 예시 코드

클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있는 구조를 가지고 있습니다.

예시에서 outerFunction은 외부 변수 outerVariable을 받아들이고 내부에 정의된 innerFunction을 반환합니다. closureExample 변수에는 outerFunction을 호출한 결과로 반환된 innerFunction이 저장됩니다.

클로저는 outerFunction이 이미 실행을 마친 후에도 외부 변수 outerVariable에 접근할 수 있게 해줍니다. closureExample을 호출하면 외부 변수와 내부 변수가 출력됩니다.

이 코드에서 closureExample은 outerVariable에 접근할 수 있는 클로저입니다. 클로저는 외부 함수의 변수에 대한 참조를 유지하며, 이를 통해 내부 함수에서 해당 변수를 계속 사용할 수 있게 합니다.

closure example

function outerFunction(outerVariable) {
    // 외부 함수의 변수를 참조하는 내부 함수 정의
    function innerFunction(innerVariable) {
        console.log("외부 변수: " + outerVariable);
        console.log("내부 변수: " + innerVariable);
    }

    // 내부 함수 반환
    return innerFunction;
}

// outerFunction을 호출하여 클로저 생성
var closureExample = outerFunction("외부 변수 값");

// 클로저 호출
closureExample("내부 변수 값");


추가 설명

outerFunction이 호출되고 innerFunction이 반환될 때, outervariable은 클로저의 일부로 포함됩니다. outerFunction이 실행을 마쳤어도, innerFunction은 여전히 outervariable에 접근할 수 있습니다. 이는 클로저가 형성되어 외부 스코프에서 필요한 변수에 대한 참조를 보존하기 때문입니다. 클로저는 함수가 완료된 후에도 필요한 외부 변수에 계속 접근할 수 있게 해줍니다.

클로저(Closure)는 자바스크립트에서 기본적인 개념으로, 함수가 자신의 렉시컬 스코프(소스 코드에서 선언된 위치)에서 변수를 기억하고 접근할 수 있는 상황을 가리킵니다. 이는 외부 함수가 실행을 마친 후에도 그 함수의 변수에 접근할 수 있게 해줍니다. 클로저는 함수가 주변 상태에 계속적으로 접근할 수 있도록 해주어 "닫힌(closed)" 환경을 만들어냅니다.

렉시컬 환경(Lexical Environment)은 함수가 정의된 위치에 의해 결정되는 환경입니다. 함수가 정의될 때, 그 함수의 렉시컬 환경은 그 함수가 만들어진 곳의 변수들로 구성됩니다. 이 렉시컬 환경은 클로저가 외부 변수에 접근할 수 있게 하는 중요한 역할을 합니다.

스코프 체인(Scope Chain)은 함수가 변수를 찾을 때 사용하는 메커니즘입니다. 함수가 변수에 접근하려고 할 때, 자바스크립트는 현재 함수의 렉시컬 환경부터 시작하여 외부 함수의 렉시컬 환경까지 거슬러 올라가며 변수를 찾습니다. 이런 과정을 통해 클로저는 외부 변수에 접근할 수 있습니다.

scope

// Global Scope
const dataVar = "Kakao.GG";

function outerFunction() {
    // Parent Scope

    function innerFunction() {
        // Local Scope
        console.log(dataVar);
    }

    return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // Output: Kakao.gg