클로저 - 1

클로저란?

클로저(closure)는 자바스크립트의 동작을 이해하는 데 꼭 알고 넘어가면 좋은 개념으로 다음과 같이 정의된다.

특정 함수가 참조하는 변수들이 선언된 렉시컬 스코프(Lexical scope)는 계속 유지되는데, 그 함수와 스코프를 묶어서 클로저라고 한다.

클로저의 특징

클로저가 나타나는 가장 기본적인 환경은 스코프 안에 스코프가 있을 때, 즉 function 안에 function이 선언되었을 때이다.

function() {
	var count = 0;
    var inner = function() {
    	return ++count;
    };
    return inner;
}
var increase = outer();

console.log(increase()); // === 1
console.log(increase()); // === 2

먼저, 2번 줄의 count 변수는 outer() 함수의 로컬 변수이다. 따라서 원칙적으로는 outer() 함수 내부에서만 접근할 수 있다. 이어서 3번 줄에서 outer() 함수 내부에 다시 함수를 하나 선언하여 inner 변수에 할당하였다. inner 변수에 할당한 함수는 4번 줄에서 outer() 함수의 로컬 변수인 count에 접근하여 1만큼 증가시키고 이 값을 반환한다. 그리고 6번 줄에서 outer() 함수의 반환값으로 inner 변수를 지정하면서 함수 정의를 마쳤다.

이제 8번 줄에서는 방금 정의한 outer() 함수를 호출하여 그 결과를 글로벌 영역에 있는 increase 변수에 할당하였다. 이때, increase 변수에 할당되는 값은 6번 줄에서 outer() 함수의 반환값으로 지정한 inner 변수이다. 따라서 이후에 10, 11번 줄처럼 increase 변수를 함수로 호출하면, 결과적으로 inner 함수가 호출되어 count 변수의 값을 1만큼 증가시킨다.

 

원래 count 변수는 outer() 함수의 로컬 변수이므로 일반적인 방법으로는 외부에서 접근할 수 없다. 마치 객체지향 언어에서 흔히 말하는 'private 변수'와 비슷하다. 그런데 count 변수에 접근하는 또 다른 함수 inner를 outer() 함수의 반환값으로 지정하고, 이를 글로벌 영역에 있는 increase 변수에 할당함으로써, outer() 함수 외부에서도 increase 변수를 통해 count 변수에 접근할 수 있게 되었다. 이런 상황이 클로저의 가장 기본적인 개념이다.