자바스크립트 클로저

자바스크립트의 클로저를 한번에 설명하기는 어렵습니다. 

간단한 코드를 통해 클로저가 어떤 성격을 가지고 있는지 확인해보겠습니다. 

var outer = function() {
    var a = 1;
    var inner = function() {
        return ++a;
    }
    return inner();
};
 
var outer2 = outer();
console.log(outer2);
console.log(outer2);

(2, 2 출력)

10번 11번 라인의 outer2 함수 호출은 독립적으로 호출되면서 2, 2가 출력이 됩니다.

이 코드에서는 outer의 실행 컨텍스트가 종료되기 전에 inner의 실행 컨텍스트가 종료 되면서 이후 inner 함수를 호출할 수 없게 됩니다. 

그렇다면 outer 함수의 실행 컨텍스트 종료 후 inner 함수를 호출하게 만들면 어떻게 될까요?

var outer = function() {
    var a = 1;
    var inner = function() {
        return ++a;
    }
    return inner;
};
 
var outer2 = outer();
console.log(outer2());
console.log(outer2());

(2, 3 출력)

이 코드에서는 outer 함수가 inner함수 자체를 리턴합니다. 9번 라인에서 outer2 변수에 inner 함수를 할당하면서 outer의 실행 컨텍스트는 종료 되었습니다. 이런 상황에서 10번과 11번 라인에서 outer2 함수를 호출하면 신기하게도 에러가 발생하지 않고 2와 3이 출력됩니다.

이는 자바스크립트 가비지 컬렉터의 동작 방식 때문인데, 가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있으면, 그 값을 수집 대상에 포함시키지 않습니다. 따라서 outer의 실행 컨텍스트가 종료 되었음에도 해당 컨텍스트의 변수 a를 참조하는 변수가 존재하기 때문에 변수 a는 가비지 컬렉터의 수집 대상에서 제외가 되고, outer2 호출에서 해당 변수에 접근할 수 있게 된 것입니다. 이것이 클로저의 동작 원리입니다.

클로저는 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달 할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상을 말합니다.

-- 출처 : 코어 자바스크립트(http://www.yes24.com/Product/Goods/78586788), https://kosaf04pyh.tistory.com/251