[JS] 클로저 (Closure)

클로저

MDN

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다

MDN은 위와 같이 클로저를 설명하고 있습니다. 

결국 자신이 선언된 환경이 아닌 곳에서 호출되었을 때 선언된 환경에 접근할 수 있는 함수를 말합니다. 정확히 함수를 말하는 것이 아닌 함수와 환경의 조합입니다. 하지만 그러한 함수 그 자체를 클로저로 부르기도 합니다.

 

위에서 설명하는 '환경' 에 대해 조금 더 쉽게 설명하는 문장이 아래와 같습니다.

생활코딩

클로저(closure)는 내부함수가 외부 함수의 맥락(context)에 접근할 수 있는 것

MDN에서는 클로저를 알기 전에 자바스크립트 변수 유효범위 지정(Lexical scoping)을 알아야한다고 합니다.

Lexical scoping

위와 예제에서 person함수를 실행 했을 때 My name is jinwoo라는 로그가 정상적으로 실행됩니다.

 

displayName함수에서 intro변수에 접근하여 정상적으로 실행됐습니다. 이로 내부 함수에서는 외부 함수의 값을 접근할 수 있다는 것을 알 수 있습니다.

클로저

위와 비슷한 예제이지만 조금 다릅니다. displayName이라는 함수를 반환하고 반환 받은 displayName을 외부에서 다시 호출합니다.

결과는 마찬가지로 정상적으로 로그가 실행됩니다.

여기서 person()이 실행된 후 displayName을 반환한 후 종료된 함수의 변수인 intro는 사려져야합니다. 하지만 왜displayNameFunc()를 통해 정상적으로 intro의 값이 로그에 찍히는 걸까요?

 

이게 클로저(closure)입니다. 외부 함수가 종료되어도 내부 함수는 자신이 선언된 환경, 외부 함수의 환경에 접근할 수 있습니다.

 

하지만 클로저는 각자의 환경을 기억하기에 클로저의 내부에서 사용되는 변수의 메모리를 GC(가비지 컬렉터)가 회수하지 않습니다.

위와 같이 클로저의 참조를 초기화해주어야합니다.