이현섭.md

클로저의 의미 및 원리 이해

외부 함수의 변수를 참조하는 내부 함수

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

    inner();
};

outer();

inner함수 내부에서는 a를 선언하지 않았기 때문에 environmentRecord 에서 값을 찾지 못하므로 outerEnvironmentReference에 지정된 상위 컨텍스트인 outer 의 LexicalEnvironment에 접근해서 a를 찾음.

outer 함수의 실행 컨텍스트가 종료되면 LexicalEnvironment에 저장된 식별자들 a, inner에 대한 참조를 지움.

=> 각 주소에 저장돼 있던 값들은 자신을 참조하는 변수가 하나도 없게 되므로 가비지 컬렉터의 수집 대상

var outer = function () {
    var a = 1;
    var inner = function () {
        return ++a;
    };

    return inner();
};

var outer2 = outer();
console.log(outer2); //2

이번에도 inner 함수 내부에서 외부변수인 a를 사용. 하지만, inner 함수를 실행한 결과를 리턴하므로 결과적으로 outer 함수의 실행 컨텍스트가 종료된 시점에는 a 변수를 참조하는 대상이 없어짐.

위의 두 예제는 outer 함수의 실행 컨텍스트가 종료되기 이전에 inner 함수의 실행 컨텍스트가 종료돼 있으며, 이후 별도로 inner 함수를 호출할 수 없다는 공통점.

그렇다면, outer 함수의 실행 컨텍스트가 종료된 후에도 inner 함수를 호출할 수 있게 만든다면 어떻게 될까?

var outer = function () {
    var a = 1;
    var inner = function () {
        return ++a;
    };

    return inner;
};

var outer2 = outer();
console.log(outer2()); // 2
console.log(outer2()); // 3

inner 함수의 실행 시점에는 outer 함수는 이미 실행이 종료된 상태인데 outer 함수ㅡ의 LexicalEnvironment에 접근. 가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값은 수집 대상에 포함시키지 않음. 외부 함수인 outer의 실행이 종료되더라도 내부함수인 inner함수는 언젠가 outer2를 실행함으로써 호출될 가능성이 열린 것.

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

1. 함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수. - 존 레식, 자바스크립트 닌자 비급

2. 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수. - 송형주 고현준, 인사이드 자바스크립트

3. 자신이 생성될 때의 스코프에서 알 수 있었던 변수들 중 언젠가 자신이 실행될 때 사용할 변수들만을 기억하여 유지시키는 함수 - 유인동, 함수형 자바스크립트 프로그래밍

출처 : 코어 자바스크립트