[JavaScript] 클로저(Closure)

정의

함수와 그 함수가 정의된 렉시컬 환경의 조합이다.

렉시컬 환경?

렉시컬 환경의 의미는 어휘적 범위를 정해주는 렉시컬 스코프를 통해 지정된 사용 가능한 변수들을 포함한 환경을 의미한다. 즉 렉시컬 스코프 안에 있는 변수들을 접근할 수 있는 환경이다.

사용 예시

예시 1

일반적으로 클로져는 함수안의 함수 형태로 정의된다.

let obj = function(){
    let i = 0;
    return {
        setI(k){
            i = k;
        },
        getI(){
            return i;
        }
    } // 호출시 얻는 함수들이 외부 함수의 변수인 i에 대한 메모리를 가지고 있는다.
}

let x = obj();
x.setI(2);
console.log(x.getI()); // 2
x.setI(4);
console.log(x.getI()); // 4
console.log(x.getI) // 해당 method는 스코프에 클로져를 가지고 있다.

예시 2

전역 변수에 접근하는 함수도 클로저의 범위안에 들어갈 수 있다.

var passed = 3; // 함수 안에서 접근 가능 by lexical scoping 
var addTo = function(){
    var inner = 2; // 밖에서 접근 불가
    return passed + inner;
};
console.log(addTo()); // 5
var passed = 4;
console.dir(addTo);
console.log(addTo()); // 6
// 이것도 클로져다!!! 가장 간단한 클로저 구현체
// addTo를 실행하기 위해서 내부의 변수로는 결과를 얻을 수 없다.
// 따라서, 해당 변수를 찾을 때까지 더 바깥쪽 scope를 확인한다.
// 위에서 addTo의 클로져에서 passed의 값은 4이다.

예시 3

가장 일반적으로 클로져에 대한 설명을 할 때 사용하는 예시이다.

var addTo = function(passed){
    var add = function(inner){
        return passed + inner;
    };

    return add;
};

console.dir(addTo(3));
// 일반적인 형태의 클로져
// 0: Closure (addTo)
//    passed: 3

var addThree = new addTo(3);
var addFour = new addTo(4);

console.dir(addThree);
// 0: Closure (addTo)
//    passed: 3
console.dir(addFour);
// 0: Closure (addTo)
//    passed: 4

console.log(addThree(1)); // 4
console.log(addFour(1)); // 5

결론

• 바깥에서 선언된 변수를 사용하는 모든 함수는 클로저다.
• 클로져는 단지 데이터를 보관하고 있는 함수에 불과하다.
• 설명을 하면서 예시를 들어야할 때, 굳이 어렵게 생각하지 말고 가장 간단한 형태와 간단한 정의를 생각하자.

참고

• Javascript Closure tutorial (Closures Explained) - 한글자막