[Javascript] 클로저(Closure)

클로저 (Closure) 는 함수형 프로그래밍 언어에서 사용되는 중요한 특성으로, JS 뿐만 아니라 하스켈이나 스칼라 등의 언어에도 등장한다. MDN 이 정의하는 클로저는 다음과 같다.

 

클로저는 함수와 함수가 선언된 어휘적(렉시컬) 환경(Lexical environment)의 조합이다.

 

렉시컬 환경에 대한 논의는 이전 글에서 간략히 했으나, 클로저에 대한 이해를 돕기 위해서 깊이 알아야 하는 개념이므로 렉시컬 환경의 개념부터 알아보자. 

 

 

✨  렉시컬 환경과 [[Environment]]

 

📌 렉시컬 환경

 

렉시컬 환경은 렉시컬 스코프를 가지고 있다. 렉시컬 스코프는 함수의 스코프와 함수가 정의된 위치에 따라 결정되는 상위 스코프이다. JS 는 렉시컬 환경을 따르기 때문에, 함수의 호출 위치가 아닌 정의한 위치에 의해 상위 객체를 참조한다. 

 

렉시컬 환경은 "외부 렉시컬 환경에 대한 참조 (Outer Lexical Environment Reference)" 에 참조값을 저장함으로써 상위 렉시컬 환경과 연결되는데, 이 때 저장되는 참조값이 바로 상위 스코프이다. 

 

 

📌  함수 객체의 [[Environment]]

 

모든 함수는 [[Environment]]라 불리는 숨김 프로퍼티를 갖는데, 여기에 함수가 만들어진 곳의 렉시컬 환경에 대한 참조가 저장된다. 함수는 함수의 내부 슬롯인 [[Environment]] 을 이용하여 자신이 정의된 환경을 기억한다. 함수 정의가 평가되어 함수 객체를 생성하는 시점은 함수가 정의된 환경 (상위 스코프) 의 코드가 평가되고 있는 시점이므로, 상위 실행 컨텍스트가 참조값으로 저장된다. 

 

예시 : 함수 호출 위치와 상위 스코프는 관계 없다.

const x = 1;

function foo() {
    const x = 10;
    bar();
}

function bar() {
    console.log(x);
}

foo(); // 1
bar(); // 1

 

 

✨  클로저 

앞서 클로저는 "함수와 함수가 선언된 어휘적(렉시컬) 환경(Lexical environment)의 조합" 이라고 얘기했었다. 이를 달리 말하면, 클로저는 외부 함수보다 더 오래 유지되어, 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있는 중첩 함수이다.

 

다음 예시를 통해 구체적인 내용을 알아보겠다. 

 

const x = 1;

function outer() {
    const x = 10;
    const inner = () => x;
    return inner;
}

const innerFunc = outer();
innerFunc(); // 10

 

위 예제에서 외부 함수는 outer, 중첩 함수는 inner 이다. outer 의 생명 주기가 종료하는 순간은 outer 함수의 실행이 종료된 순간이다. (콜 스택에서 이미 제거됨) 이때, outer 내부에 선언되었던 식별자 x 와 값인 10 역시 생명 주기가 마감되어, 해당 변수에 접근할 수 있는 방법은 없을 것다. 하지만 이를 가능하게 해 주는 것이 클로저이다. 

 

inner 함수는 정의된 순간 상위 스코프를 [[Environment]] 프로퍼티에 저장하였으며, inner 함수가 존재하는 한 이 값은 유지된다. 비록 outer 함수는 종료되어 콜 스택에서 빠져나갔어도, inner 함수가 이를 참조하고 있기 때문에 가비지 컬렉션의 대상이 되지 않으며, 메모리 공간에서 해제되지 않았다. 이처럼 중첩 함수의 렉시컬 환경이 참조하는 상위 함수의 렉시컬 환경보다 더 오래 살아남아도, 바인딩이 되어 있기 때문에 계속 값을 검색해 올 수 있는 것이다. 

 

위의 inner 함수는 클로저라고 할 수 있지만, 아래와 같이 상위 스코프를 참조하지 않는 inner 함수는 클로저라고 할 수 없다.

 

function outer() {
    const x = 1;
    
    function inner() {
    	const z = 2; 
        return z;
    }
    return inner;
}

outer();

 

또한, 외부 함수보다 생애주기가 짧은 중첩 함수 역시 클로저의 본질에 어긋나므로, 클로저라고 부르지 않는 것이 일반적이다.

 

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

outer();

 

💡 클로저는 주로 정보를 안전하게 변경하거나 유지하고자 할 때 사용된다. 이는 정보를 은닉하는 OOP 의 요소인 "캡슐화" 와도 연관성이 높다. 

 

 

✨  요약

- 렉시컬 환경은 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록한다.

- 렉시컬 스코프는 함수의 스코프와 함수가 정의된 위치에 따라 결정되는 상위 스코프이다.

- 모든 함수는 프로퍼티인 [[Environment]] 을 이용하여 자신이 정의된 환경과 렉시컬 스코프를 기억한다. 

- 클로저는 함수와 함수의 렉시컬 환경의 조합이다. 간단히 말하면 클로저는 상위 스코프를 참조하는 함수이다. 

 

 

✨  참고자료

• 모던 자바스크립트 Deep Dive (위키북스) 
• 변수 유효범위와 클로저