[자바스크립트] 클로저(closure)

발췌 : 자바스크립트 핵심 가이드 (Douglas Crockford 저)

var add = function (a, b) {
    return a + b;
}

var myObject = function (  ) {
    var value = 0;

    return {
        increment: function (inc) {
            value += typeof inc === 'number' ? inc : 1;
        },
        getValue: function (  ) {
            return value;
        }
    }
}(  );

myObject.double = function (  ) {
    var that = this;

    var helper = function (  ) {
        that.value = add(that.value, that.value)
    };

    helper(  );
};

myObject.increment(  );
myObject.increment(2);
myObject.double(  );
console.log(myObject.getValue(  ));    // why result is 3? I want to 6!

myObject를 객체 리터럴로 초기화하는 대신에 위 코드처럼 객체 리터럴을 반환하는 함수를 호출하여 초기화합니다. 이렇게 하면 increment와 getValue를 통해 value라는 변수에 접근할 수 있지만 함수 유효범위 때문에 프로그램의 나머지 부분에서는 접근할 수 없습니다.

코드를 보면 myObject에 함수를 할당한 것이 아니라 함수를 호출한 결과를 할당하고 있습니다. 범위 마지막의 ()를 주목할 필요가 있습니다. 함수는 메소드 두 개를 가진 객체를 반환하며 이 두 메소드는 계속해서 value라는 변수에 접근할 수 있습니다.

이렇게, 함수가 자신이 생성된 함수, 즉 자신을 내포하는 함수의 문맥(context)에 접근할 수 있도록 하는 것을 클로저라고 합니다.