클로저(Closure)

클로저(Closure)는 내부함수가 외부함수의 맥락(contex)에 접근할 수 있는 것을 가르킨다. 클로저는 JS를 이용한 고난이도 테크닉을 구사하는데 필수적인 개념으로 활용된다.

 

먼저 내부함수와 외부함수의 개념을 간단히 집고 클로저를 알아보자.

JS는 함수 안에서 또 다른 함수를 선언할 수 있다. 아래의 예제를 보자.

 

 

<내부함수와 외부함수>

▲ 결과는 경고창에 JavaScript가 출력될 것이다. 위의 예제에서 함수 outter의 내부에는 함수 inner가 정의 되어 있따. 함수 inner를 여기서 '내부 함수'라고 한다. 함수 outter는 함수 inner의 입장에서 '외부 함수'가 되는 것이다.

 

 

그렇다면 예제를 아래와 같이  바꾸면 어떻게 될까?

 

 ▲ 변수 title을 함수 inner에서 함수 outter의 변수로 빼내었다. 이 과정을 통해 변수 title은 함수 outter의 지역변수가 되었다. 하지만 결과는 동일하게 출력된다. why? 이유는 바로 내부함수는 외부함수의 지역변수에 접근할 수 있기 때문이다.

 함수 inner가 실행될 때 변수 title이 inner함수에 지역변수가 있는지 먼저 찾을 것이다. 하지만 없으므로 자신의 바로 외부에 변수title을 찾게 될 것이고, 그것이 바로 함수 outter의 지역변수인 title이 되는 것이다.

 

즉,  var title은 함수 outter입장에서는 지역변수이지만, 함수 inner입장에서는 전역변수가 되는 것이다.

 

결과적으로 알아야 할 것은 내부함수는 외부함수의 지역변수에 접근할 수 있다는 것이다.

 

 

<클로저>

 

클로저는 내부함수와 밀접한 관계를 가지고 있는 주제이다. 내부함수는 외부함수의 지역변수에 접근할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저라고 한다.

 

▲ 위에서 살펴본 예제를 조금 변형한 것이다. 결과는 JavaScript라는 경고창이 출력될 것이다.

 

예제를 조금 뜯어보자. 밑에서 2번째 줄에서 함수 outter를 실행시키고 그 결과를 변수 inner에 담았다. 함수outter는 실행이 끝났기 때문에 이 함수의 지역변수인 title는 소멸되는 것이 자연스럽다. 하지만 마지막 줄에서 함수 inner를 실행했을 때 JavaScript가 출력된 것은 외부함수의 지역변수 title이 소멸되지 않았다는 것을 의미한다. 

이처럼 클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.

 

 

조금 더 복잡한 예제를 보자. 아래 예제는 클로저를 이용해서 영화의 제목을 저장하고 있는 객체를 정의하고 있다.

 

▲ 결과값으로 각각 Iron man과 Marvel이 경고창에 출력될 것이다. 그렇다면 다음과 같이 한 단계 코드를 더 추가해보면 결과는 어떻게 될까?

 

 

▲ 23행과 24행의 결과값은 각각 Iron man과 Marvel이다. 이후 26행에서 set_title을 통해서 변수 title의 값을 '철의 남자'로 바꾸었고 결과적으로 28행과 29행의 값은 각각 '철의 남자'와 Marvel이다. 

뭔가 '???' 하지 않은가? 분명 26행에서 title의 값을 '철의 남자'로 바꾸었는데 29행의 결과값은 변함이 없다.

이것이 바로 'Private variable'이다.

 

우리가 20행과 21행에서 iron_guy와 marvel에 각각 객체를 만들었고, 그 시점에 각각의 변수에 각자의 객체가 생성이 된 것이다. 때문에 26행에서 iron_guy의 title을 바꾸었더라도 marvel 객체의 지역변수에는 아무런 영향이 없는 것이다.

 

이러한 기능은 프로그램이 커질수록 여러사람의 손이 타게되고 그럴때마다 동일한 변수의 이름이 다른 값으로 지정되어서 프로그램이 무너지는 것을 방지할 수 있는 방법이다.

 

 

 

<클로저의 응용>

 

다음은 클로저와 관련해서 자주 언급되는 예제이다.

▲ 결과값으로 어떤것이 출력될 것이라고 기대하는가?

실제 결과값은

5가 다섯번 중복해서 출력되었다는 것이다.

 

우리가 원하는 01234의 결과를 얻기 위해서는 다음과 같이 코드를 바꿔주어야 한다.

 

결과값은 ▼