[Javascript] 클로저(closure) 란?

기존 객체지향이나 절차적 프로그래밍을 해왔던 페이지 개발자라면 처음에는 이 개념이 어색할 것이다.

반면, 함수현 언어로 프로그래밍을 해 왔던 사람에게는 익숙한 개념이다.

 

간단히 설명하면 클로저란? 함수에 필요한 환경과 지역변수가 결함된 Function 인스턴스이다.

 

 - 클로저에서는 함수가 선언된 범위를 벗어난 이후에도 이들 변수를 참조할 수 있다.

 

<script> $(function() { var local = 1; window.setInterval(function() { $('#display').append('<div>At ' + new Date() + ' local=' + local + '</div>'); local++; }, 3000); }); </script>

 

이 예제에서 의문을 가질 수 있는 점은

 - 준비 핸들러의 실행이 끝나고 페이지를 로드하고나면 콜백이 3초마다 호출되는데, 이 때 local 값은  콜백 함수가 실행되는 동안 정의되지 않았다고 짐작할 것이다.

 - local이 선언된 블록은 준비 핸들러가 끝나면서 범위를 벗어났다고 생각하게 된다.

 

<결 론>

 - 함수의 선언으로 생성된 클로저는 local을 포함한다. 그러므로 함수의 생명주기 동안 변수가 해제되지 않고 범위에 있도록 유지되는 것이다.