[JavaScript] 클로저(Closure)

클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 scope를 기억하여 자신이 선언됐을 때의 환경(scope) 밖에서 호출되어도 그 환경(scope)에 접근할 수 있는 함수를 말한다. 

이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수라고 말할 수 있다.

일반적으로 외부 함수의 실행이 끝나면 외부 함수가 소멸되어 내부 함수가 외부 함수의 변수에 접근할 수 없다.

하지만 외부 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 구조를 클로저라고 한다. 

즉, 자신의 고유 스코프를 가진 상태로 소멸하지 않고 외부 함수에 의해 호출되는 함수를 만드는 것이 바로 클로저이다.

let outerFunc = () => {

let x = 10;

let innerFunc = function () {

console.log(x);

};

return innerFunc;

};

/*

* 함수 outerFunc를 호출하면 내부 함수 innerFunc가 반환된다.

* 그리고 함수 outerFunc의 실행 컨텍스트는 소멸한다.

* 함수는 return하면 생을 마감한다.

*/

let inner = outerFunc();

inner(); // 10

클로저를 남발하게되면 가비지컬렉션 대상이 되어야할 객체들이 메모리상에 남아있게 되므로 클로저를 남발하면 오버플로우가 발생할 수도 있다.

+예시

const add = a => b => a + b;

console.log(add(10)); // b => a + b

const add10 = add(10);

console.log(add10(10)); //20

console.log(add10(40)); //20

함수를 반환하는 고차함수이다. 

add함수에 값 10을 대입하면 b함수를 반환한다.

반환한 함수값을 담고있는 add10에 인자값을 각각 10, 40 을 주면 20과 50을 반환한다.

add 함수는 분명 b => a + b를 반환했는데 위처럼 결과가 출력된다.

그이유는 클로저 때문이다. 

add함수의 결과값으로 반환된 b함수는 선언됐을때의 a값을 기억하고있다가 다른곳에서 b값을 인자로 받아 계산된 결과값을 출력한다.