Writing life code

(사내에 배표할 자료를 만들기 전에 사전 정리 겸 끄적여본다. ECMAScript closures 라고 하는게 더 나을지도 모르겠다.)

<script>
function counterFactory( start ) {
 function counter() {
  return start++;
 }
 return counter;
}

var c1 = counterFactory( 1 );
var c2 = counterFactory( 10 );

alert( c1() ); // 1이 출력됨
alert( c1() ); // 2가 출력됨

alert( c2() ); // 10이 출력됨
alert( c2() ); // 11이 출력됨
</script>

위의 스크립트는 closures를 사용한 예제이다.
위 소스에서 'anonymous inner function'인 counter가 바로 closures이다.

보다시피 c1과 c2의 counter()는 처음에 받은 start값을 유지하고 있다. 각 start는 해당 counter()가 유효한 동안 계속 살아있으며 해당 counter()가 무효화 될 때 같이 무효화된다. 이것이 counter()와 같은 함수를 Closures라고 부르는 이유이다.

JavaScript에서 Closures를 사용할 때 염두해 두어야 할 것은 모든 function은 단순한 스택이 아니라 function object라는 것이다. 특히 inner function은 사용할 때마다 새로운 function object를 생성하는 경우가 많으므로 적용시에 주의해야 한다. 가장 흔하게 나타나는 잘못된 형태가 Closures에서 순환 참조를 하는 것이다.

IE의 경우 DOM object와의 상호 참조가 일어날 경우, 페이지 네비게이션이 일어나도 브라우저가 종료되지 않으면 메모리 반환이 안되는 문제가 생길 수 있으니 주의해야 한다. COM의 reference counting과 관계있는 문제이지만 자세한 설명은 이 포스팅에서는 생략한다. (이건 IE의 삽질이라기 보다는 순환 참조가 일어나도록 작성된 스크립트 코드에 일차 책임이 있다.)


JavaScript Closures에 대해 보다 자세한 자료는 아래 링크를 참고하기 바람.
- http://jibbering.com/faq/faq_notes/closures.html
- http://blogs.msdn.com/ericlippert/archive/2003/09/17/53028.aspx