자바스크립트 클로저 closure

다음 예제를 살펴보자.

<script>

function test(name) {

var output = 'Hello ' + name + ' ... !';

}

alert(output);

</script>

코드를 실행하면,

Uncaught ReferenceError: output is not defined

웹페이지에 오류가 발생하여 경고창을 출력하지 않는다.

함수 안에 있는 변수는 지역 변수이므로 함수 외부에서 사용할 수 없다.

지역 변수는 함수가 실행될 때 생성되고 함수가 종료될 때 사라진다.

하지만, 클로저를 사용하면 이 규칙을 위반할 수 있다.

다음 코드를 살펴보자.

<script>

function test(name) {

var output = 'Hello ' + name + ' .. !';

return function () {

alert(output);

};

}

test('JavaScript')();

</script>

위에 코드를 실행해보면,

변수 output은 지역 변수이므로 함수가 종료될 때 사라져야 하지만

변수 output의 내용을 경고창으로 출력한다.

클로저의 정의는 워낙 다양한데

지역 변수를 남겨두는 현상을 클로저라고 부르기도 하고,

함수 test () 내부의 변수들이 살아있는 것이므로 test() 함수로 생성된 공간을 클로저라고 부르기도 한다.

또한, 리턴된 함수 자체를 클로저라고 부르기도 하며, 살아남은 지역 변수 output을 클로저라고 부르기도 한다.

위에 코드에서

지역 변수 output을 남겨둔다고 외부에서 마음대로 사용할 수 있는 것은 아니다.

반드시 리턴된 클로저 함수를 사용해야 지역 변수 output을 사용할 수 있다.

클로저 함수로 인해 남은 지역 변수는 각각의 클로저 함수의 고유한 변수이다.

다음 코드도 살펴보자.

<script>

function test(name) {

var output = 'Hello ' + name + ' .. !';

return function () {

alert(output);

};

}

var test_1 = test('Web');

var test_2 = test('JavaScript');

test_1();

test_2();

</script>

함수 test_1()과 test_2()를 호출하면,

각 함수가 고유한 지역 변수 output이 있다는 것을 알 수 있다.

클로저 함수를 처음 접하면 어디에 사용하는지 감이 잘 잡히지 않는다.

클로저와 관련된 것은 직접 여러 가지 프로그램을 접하면서 이해하고 느껴야 한다.

나중에 캡슐화 부분에서 다시 한번 클로저와 관련된 공부를 해보자.

참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어