자바스크립트 (JavaScript) - 30 : 함수 스코핑(functional scoping)과 클로저

3) 클로저

 

로컬 변수를 다른 함수가 참조하면, 그 로컬 변수는 이후에도 활용될 가능성이 있으므로

 

로컬 변수가 존재하는 함수가 종료되어도 로컬 변수를 제거하지 않는다. 이를 클로저라고 한다.

 

<script>         function test() {         var localNum = 10;         return function(){                 document.write(localNum);         };         }                 var func = test();         func(); </script>

10

 

위의 예제는 클로저의 예이다. 분명 localNum은 test()의 로컬 변수인데,

 

test() 함수가 종료한 후 실행된 func() 함수의 결과로 localNum의 값인 10이 출력됨을 볼 수 있다.

 

다른 각도에서 이 클로저를 바라보자.

 

test( ) 함수가 종료된 후에, localNum에 접근할 수 있는 방법은 단 하나이다. func( ) 함수이다.

 

즉 클로저를 활용하면 값들을 캡슐화할 수 있다.

 

   다음은 같은 함수의 클로저가 활성화된 변수들이 별개로 저장되는 것을 볼 수 있는 예제이다.

 

<script>         function test(msg) {         var message = 'Hello ' + msg + '<br/>';         return function(){                 document.write(message);         };         }                 var resultFunc1 = test('Liam');         var resultFunc2 = test('Han');         resultFunc1();         resultFunc2(); </script>

Hello Liam Hello Han