클로저 보강

 

클로저란?

const x = 1;

function outer() {
    const x = 10;
    const inner = function () {
        console.log(x);
    }
    return inner;
}

// outer 함수를 호출하면 중첩함수 inner 를 반환한다.
// 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트는 스택에서 팝되어 제거된다.
const innerFunc = outer();
innerFunc();

 

위 코드를 실행하면 콘솔에 10이 찍힌다.

이미 생명주기가 종료되어 실행 컨텍스트 스택에서 제거된 outer 함수의 지역변수 x 가 다시 부활이라도 한듯이 동작한다.

 

이처럼 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명주기가 종료한 외부 함수의 변수를 참조할 수 있다.

이러한 중첩 함수를 클로저 라고 부른다. 

 

자바스크립트의 모든 함수는 자신의 상위 스코프를 기억한다.

모든 함수가 기억하는 상위 스코프는 함수를 어디서 호출하든 상관없이 유지된다.

 

inner 함수는 자신이 평가될 때 자신의 정의된 위치에 의해 결정된 상위 스코프를

[[Environment]] 내부 슬롯에 저장한다. 이때 저장된 상위 스코프는 함수가 존재하는한 유지된다.

 

자바스크립트의 모든 함수는 상위 스코프를 기억하므로 이론적으로 모든 함수는 클로저다.

하지만 일반적으로 모든 함수를 클로저라고 하지는 않는다. 

 

1. 중첩함수가 상위 스코프의 식별자를 참조하지 않는 경우(대부분의 모던 브라우저는 최적화를 통해 상위 스코프를 기억하지 않는다)

2. 중첩함수가 스코프 내에서 호출되고 종료되는 경우(곧바로 소멸-생명주기가 짧은-하는 경우)

 

클로저에의해 참조되는 상위 스코프의 변수를 자유 변수free variable 라고 부른다.

클로저closure 란 "함수가 자유 변수에 대해 닫혀있다closed"라는 의미다.

즉 "자유 변수에 묶여있는 함수" 라고 할 수 있다.

 

클로저의 활용

클로저는 상태state를 안전하게 변경하고 유지하기 위해 사용된다.

다시말해 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉information hiding 하고,

특정 함수에게만 상태변경을 허용하기 위해 사용한다.