자바스크립트 - 클로저

자바스크립트 - 클로저

 

자바스크립트에서 클로저는 "함수와 그 함수가 선언됐을 때 렉시컬 환경과의 조합이다."

 

MDN docs의 예시를 보면서 저 말의 의미를 탐구해보자.

 

 

makeFunc()함수는 내부의 displayName()함수를 리턴하는 함수이고 이를 myFunc라는 변수가 리턴을 받게 된다. 

결국은 myFunc가 displayName함수를 갖게 되는데 이때 myFunc를 실행하면 makeFunc내부의 변수 name에 접근할 수 있게 된다. 

 

상식적으로는 함수가 종료된다면 그 함수의 변수에는 참조할 수 없는 것이 맞을텐데 이 구조에서는 함수가 종료되어도 어떠한 변수에 의해서 참조되고 있기 때문에 종료된 함수의 변수에도 참조할 수 있게 된다. 

 

즉 "외부함수가 종료되어도 참조만 된다면 그 함수 내부의 값들을 계속해서 접근할 수 있다는 것"이다. 이를 클로저라고 한다.  

 

다시 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합이라는 문장을 살펴보면 함수는 "내부함수"를 의미하고 "내부함수가 선언됐을 때의 렉시컬 환경"은 위의 예시에서 name과같은 변수에 접근할 수 있는 환경을 의미한다. 

 

하나 어휘를 짚고 가면 클로저에 의해 참조되는 외부함수의 변수를 자유변수라고 부른다. 위의 예시에서는 name이 자유변수이다. 

 

그럼 클로저는 왜 사용할까

개인적으로 클로저는 두 가지 이유에서 가장 큰 힘을 발휘한다고 생각한다.

 

 

1. 전역 변수 사용의 억제

아래 예시를 살펴보자.

단순히 sum에 num을 더하는 예제이다. 여기서 sum은 전역변수로 사용되고 있는데 이를 클로저를 통해서 없애보자.

 

 

클로저를 통해서 전역변수를 없앴다. 이는 매우 강력한 대안이다. 

변수의 값은 언제든지 변경이 될 수 있는데 이러한 가변 데이터를 최대한 지양하는 게 함수형 프로그래밍에서 안정적인 프로그래밍을 한다고 말할 수 있다. 이러한 측면에서 클로저는 강력한 기능이다. 

 

2. 정보의 은닉

 

위와 비슷한 맥락인데, 결국 자유변수는 살아있지만 이를 직접적으로 조작할 수는 없게 된다. 하지만 위의 예시에서 examAdd를 통하면 내부에 존재하는 함수를 이용할 수 있으니 이는 클래스 기반언어의 private한 부분과 유사하다고 볼 수 있다. 

 

클로저에서의 for문 (with var)

for문과 var타입을 같이 사용한다면 의도치않은 결과를 얻을 수 있다. 아래 예시를 살펴보자.

 

Input

 

output

0,1,2,3,4를 예상했지만 5만 나오는 걸 볼 수 있다.

이는 i가 전역변수이기 때문에 함수가 실행될 때 i가 5까지 간상태의 값을 return하게 되는 것이다. 

 

이를 해결하기 위한 대안으로는 ES6의 let키워드를 사용하거나 클로저를 사용하면 된다. 

let을 사용하면 var를 let으로만 고쳐줌으로써 문제를 해결할 수 있다. let이 지역변수이기 때문이다. 

 

필자가 잘못 이해한 걸수도 있겠지만 디테일한 내용을 좀 더 살펴보자. (아니라면 댓글 부탁합니다)

자바스크립트에서 함수는 선언될 때의 변수를 기억한다. 즉 i는 전역변수이기 때문에 0~4까지 지나친 값인 5가 담기게 된다. 하지만 let같은 경우에는 지역변수기 떄문에 함수가 선언될 때 0,1,2,3,4 각각 담기게 되는 것이다. 

 

다음은 클로저를 이용해서 해결하는 방법이다.

 

Input

output

 

Input을 살펴보면 익명함수를 통해서 함수를 바로 실행시키는 것을 볼 수 있다. 이를 통해서 함수를 리턴하게 되는데 이때 인자로 받게되는 id는 자유변수가 되기 때문에 이를 기억하게 되는 것이다. 

 

 

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

클로저 - JavaScript | MDN

https://poiemaweb.com/js-closure

Closure | PoiemaWeb