closure

closure란?

간단히 말하자면 함수 내에 함수를 정의하고 사용하면 클로저라고 한다. 

MDN 에서는 다음과 같이 정의한다.

클로저는 독립적인 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 '기억한다'.

function outerFunc() {
    var x = 10;
    var innerFunc = function () { return x; };
}

var inner = outerFunc();
console.log(inner()); // 10

outerFunc()은 innerFunc을 반환하고 innerFunc 은 outerFunc 내부의 변수를 참조하고 있다. outerFunc이 실행이 되면서 함수가 풀어지게 되지만 innerFunc은 여전히 outerFunc 내부의 변수를 참조하고 그 값을 retunr 하고 있다. 이것이 MDN 에서 말하는 환경을 기억한다 라는 말의 의미 인것 같다. 

 

실행 컨텍스트의 관점에 설명하면, 내부함수가 유효한 상태에서 외부함수가 종료하여 외부함수의 실행 컨텍스트가 반환되어도, 외부함수 실행 컨텍스트 내의 활성 객체(Activation object)(변수, 함수 선언 등의 정보를 가지고 있다)는 내부함수에 의해 참조되는 한 유효하여 내부함수가 스코프 체인을 통해 참조할 수 있는 것을 의미한다.

즉 외부함수가 이미 반환되었어도 외부함수 내의 변수는 이를 필요로 하는 내부함수가 하나 이상 존재하는 경우 계속 유지된다. 이때 내부함수가 외부함수에 있는 변수의 복사본이 아니라 실제 변수에 접근한다는 것에 주의하여야 한다.

 

클로져의 활용

 

1.커링

함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법이다.

function adder(x){ 
	return function(y) { 
    	    return x+y; 
    } 
}

adder(2)(3); // 5

함수의 재활용이 가능하기 때문에 이러한 방법을 사용한다. 

 

let add100 = adder(100) add100(2) //102 add100(10) //110

let add5 = adder(5) add5(2) //7

외부 함수의 변수가 저장되어 마치 템플릿 함수와 같이 사용 가능하다.

function htmlMaker(tag) { 
    let startTag = "<" + tag + ">"; 
    let endTag = "</"+tag+">" 
    return function(content) { 
    	return startTag + content + endTag; 
    }
}

let divMaker = htmlMaker('div'); dicMaker('cose'); //<div>code</div>

 

2.클로저 모듈 패턴

변수를 스코프 안쪽에 가두어 함수 밖으로 노출 시키지 않는 방법

function makeCounter() { 
    let privateCounter = 0;
    return { 
        increment : function() { 
                        privateCounter++; 
                    }, 
        decrement: function() { 
                        privateCounter--; 
                   }, 
        getValue: function() { 
                        return privateCounter;
                  } 
    } 
}

let counter1 = makeCouter();

counter1.increment(); 
counter1.increment(); 
counter1.getValue(); // 2

변수를 가둬둠으로써 독립적인 변수가 되기때문에 함수를 재활용 할 수 있다.