클로저

 

클로저(closure)는 자바스크립트 교유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 

최근 자바 스트림을 공부하면서 자바에서 클로저를 어떻게 이용하는 지도 공부했다.  이처럼 클로저는 자바스크립트의 고유의 개념이 아니기 때문에 ECMAScript 사양에 등장하지 않는다. 

 

클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합이다. 

 

실행 컨텍스트를 공부하면서 함수 실행 컨텍스트의 렉시컬 환경이 구성되는 과정을 공부했다.  함수에 진입 시 평가를 위해 함수 렉시컬 환경을 생성하는데, 이 과정을 기억하고 있다면 이해가 어렵지 않을 것이다.

 

const x =1;

function outerF(){
	const x = 10;
    function innerF(){
    	console.log(x);
   	}
    
    innerF();
}

outerF();

 

outerF 함수 내부에 중첩함수 innerF가 정의되었다. 이때 innerF을 정의하는 실행 컨텍스트는 outerF이며 이 말은 innerF의 상위 스코프는 외부 함수인 outerF의 스코프이다. 

따라서 중첩 함수 innerF 내부에서 자신을 포함하고 있는 외부 함수 oterF의 x변수에 접근할 수 있다.

 

이는 자바스크립트가 렉시컬 스코프를 따르는 프로그래밍 언어이기 때문이다.

 

렉시컬 스코프(정적 스코프)란 자바스크립트 엔진이 함수를 어디서 호출했는지가 아니라 함수를 어디에서 정의했는지에 따라 상위 스코프를 결정하는 메커니즘이다. 

 

const x =1;

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

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

foo();
bar();

 

자바스크립트의 상위 스코프는 함수를 정의한 위치에서 정적으로 결정되고 변하지않는다. 

 

이는 위의 예제에서 전역 함수로 선언된 bar는 상위 스코프가 전역 컨텍스트의 렉시컬 환경이라는 이야기이며

foo 함수에서 호출되었다 하더라도 x라는 식별자를 찾기위해 본인 스코프 다음으로 전역 스코프를 참조한다. 

따라서 출력되는 x의 값은 전부 전역 변수 x의 값인 1을 출력한다.

 

다음과 같이 정리할 수 있다.

렉시컬 환경의  "외부 렉시컬 환경의 참조"에 저장할 참조값 즉 상위 스코프에 대한 참조는 

함수 정의가 평가되는 시점에 함수가 정의된 환경에 의해 결정된다. 이것이 렉시컬 스코프이다.

 

 

 

[[Environment]]

 

함수가 정의된 위치와 호출되는 위치는 다를 수 있다. 따라서 렉시컬 스코프가 가능하려면 호출되는 위치와 상관없이 상위 스코프를 기억해야 한다. 이를 위해서 함수는 자신의 내부 슬롯[[Environment]]에 상위 스코프의 참조를 저장한다.

 

말장난 같은데 천천히 다시 정리해보자. 

 

함수의 정의가 평가되어 함수 객체가 생성되는 시점은 상위의 환경을 가진 실행 컨텍스트가 실행되는 시점이다.

함수 객체는 함수 내부 코드가 실행되기 전에 생성된다. 이때 함수의 내부 슬롯인 [[Environment]]에 저장된 상위 스코프에 대한 참조값은 현재 실행 중인 실행 컨텍스트의 렉시컬 환경의 참조이다.

 

또한 자신이 호출되었을 때 생성될 함수 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장될 참조값이다.

 

아! 함수 객체가 생성되는 당시에 [[Environment]]에 상위 스코프에 대한 참조값이 지정되고,

실재 함수가 호출되어서 함수 렉시컬 환경을 구성할 때 Outer Lexical Environment Reference에 저장되는 값은

함수 내부 슬롯인 [[Environment]]에 저장된 값으로 할당되는 구나!

 

 

 

클로저와 렉시컬 환경

 

const x = 1;

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

 

나는 함수 표현식과 함수를 리턴하는 코드를 보게 되면 내심 졸게 된다. 왜냐하면 해당 환경을 컴퓨터는 기억하지만 내가 기억을 못 하기 때문이다.

 

outer 함수를 호출하면 중첩 한수인 inner를 반환하고 outer함수는 life cycle을 마감한다. 

 

outer 함수의 실행 컨텍스트는 실행컨텍스트 스택에서 제거되며 outer 함수의 지연 변수 x 또한 생명 주기를 마감한다. 

하지만 이 결과를 실행하면 outer의 x의 값이 정상적으로 출력된다. 

 

이는 함수의 실행이 종료되어 실행 컨텍스트에서 제거되었어도 outer 함수의 환경 레코드를 참조하는 inner가 존재하기 때문이다. 

 

이처럼 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료된 외부 함수의 변수를 참조할 수 있다 이는 상위 스코프를 기억하기 때문인데, 이러한 중첩 함수를 우리는 클로저라고 한다.

 

즉 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이라는 말이 이제는 이해가 갈 것이다.

inner함수와 outer의 렉시컬 환경의 조합으로 위 예제가 성립되었다.

 

위 예제의 코드 평가와 실행 순서를 보면서 다시 한번 이해해보자.

const x = 1;

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

• 전역 실행 컨텍스트 생성과정은 건너뛰고 전역 코드 실행 이후부터 다루겠다.
• outer(); 코드가 실행되어 outer 함수 코드 평가가 진행된다.
• outer 함수 실행 컨텍스트가 생성되고 렉시컬 환경이 생성된다.
• 이때 outer 함수 객체가 생성되면서 [[Environment]] 내부 슬롯에 저장된 전역 렉시컬 환경을 outer 함수 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 할당
• inner 함수 평가 ( 함수 표현식이기 때문에 런타임에 평가된다.)
• 중첩 함수 inner는 자신의 [[Enviroment]] 내부 슬롯에 현재 실행 중인 outer의 실행 컨텍스트의 렉시컬 환경을 저장한다.
• outer 코드 실행 후 return문을 만나 outer함수가 inner 함수를 반환하면서 생명 주기가 종료된다.
• 이때 실행 컨텍스트 스택에서 outer 실행 컨텍스트는 제거되지만 outer 함수의 렉시컬 환경까지 소멸하는 것은 아니다.
• 그 이유는 inner 함수의 내부 슬롯인 [[Enviroment]]에 의해 참조되고 있고 inner 함수는 전역 변수 innerFunc에 참조되고 있기 때문에 가비지 컬렉션의 대상이 되지 않는다.
• 이제 innerFunc을 호출하면 inner 함수의 코드 평가가 이루지고 컨택스트 스택에 푸시된다.
• 그럼 inner 함수는 외부 함수의 생명주기가 종료되든 말든 상관없이 자신이 정의된 위치에 의해 결정된 상위 스코프를 기억한다. 따라서 상위 스코프를 참조할 수 있기 때문에 상위 스코프의 식별자를 참조할 수 있고 식별자의 값을 변경할 수 있다. (자바에서는 이경우 암묵적 final이어서 값 변경은 못한다고 들었다.)

 

 

이론상 모든 함수는 클로저다. 다만 모든 함수를 우리는 클로저라고 칭하지 않는다. 

 

1. 외부 함수보다 중첩 함수의 생명주기가 더 짧은 경우.

2. 중첩 함수에서 상위 스코프의 식별자를 참조하지 않는 경우이다.

 

- 모던 브라우저는 최적화를 통해 클로저가 참조하고 있는 식별자만을 기억한다.

 

 

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

 

 

이렇게 클로저는 강력한 기능으로 필요하다면 적극적으로 활용해야 한다. 어떻게 유용하게 사용할 수 있을 까? 

 

to be continued

 

 

 

 

[PS] 

이처럼 이해가 잘되는 책이 있다니! Deep Dive를 읽고 있는데 마법처럼 분리된 지식이 하나로 모여진다. 

정말 같이 일하는 분들에게 추천해주고 싶은 책이다.