Closure

사전적 정의

함수와 함수가 선언된 어휘적 환경의 조합이다.

다른 간단한 정의도 살펴보면

다른 함수 내부에 정의된 함수(innerFunction)가 있는 경우 외부 함수(outerFunction)가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 액세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있습니다.

예시를 통해 확인해보자.

function outerFunction(outerVariable) {
    // 내부 함수
    return function innerFunction(innervariable) {
        console.log('Outer Variable ' + outerVariable);
        console.log('Inner Variable ' + innervariable);
    };
}

const newFunction = outerFunction('outside');
newFunction('inside');
// Outer Variable outside
// Inner Variable inside

console.log(newFunction); // [function:innerFunction]
// newFunction('inside');

outerFunction은 InnerFunction을 return한다.

그럼 newFunction 이 선언된 순간부터 천천히 따라가면

1. outerFunction('outside')은 변수 “newFunction”에 할당되는 즉시 호출
2. 호출되면 outerFunction은 변수 “newFunction”을 outerFunction(outerVariable) 대신 innerFunction(innervariable)을 반환한다.

const newFunction = outerFunction('outside');
// -> 
const newFunction = function innerFunction(innervariable) {
    console.log('Outer Variable ' + outerVariable);
    console.log('Inner Variable ' + innervariable);
};

(왜 이렇게 되느냐? 함수가 함수를 return하기 때문이다.)

1. 그런 다음 변수를 newFunction('inside')으로 호출하여 innerFunction('inside')을 호출합니다.