클로저(Closure)

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 

 

    function init() {
      var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
      function displayName() { // displayName() 은 내부 함수이며, 클로저다.
        alert(name); // 부모 함수에서 선언된 변수를 사용한다.
      }
      displayName();
    }
    init();

displayName()은 자신만의 지역 변수가 없다. 그런데 함수 내부에서 외부 함수에 변수에 접근할 수 있기 때문에 displayName() 역시 부모 함수 init()에서 선언된 변수 name에 접근할 수 있다. 이는 어휘적 범위 지정(Lexical scoping)의 예이다. 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다. 중첩된 함수는 외부 scope에서 선언한 변수에도 접근 가능하다.

    function makeFunc() {
      var name = "Mozilla";
      function displayName() {
        alert(name);
      }
      return displayName;
    }

    var myFunc = makeFunc();
    //myFunc변수에 displayName을 리턴함
    //유효범위의 어휘적 환경을 유지
    myFunc();
    //리턴된 displayName 함수를 실행(name 변수에 접근)

myFunc() 실행이 끝나고 displayName함수가 리턴되고 나면 name 변수에 더이상 접근할 수 없게 될것으로 생각하는 것이 일반적이다. myFunc는 makeFunc이 실행 될 때 생성된 displayName함수의 인스턴스에 대한 참조다. displayName의 인스턴스는 변수 name이 있는 어휘적 환경에 대한 참조를 유지한다. 이런 이유로 myFunc가 호출 될 때 변수 name은 사용할 수 있는 상태로 남게 되어 alert가 Mozilla를 출력 가능한 것이다.

 

 

    function makeAdder(x) {
      var y = 1;
      return function(z) {
        y = 100;
        return x + y + z;
      };
    }

    var add5 = makeAdder(5);
    var add10 = makeAdder(10);
    //클로저에 x와 y의 환경이 저장됨

    console.log(add5(2));  // 107 (x:5 + y:100 + z:2)
    console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
    //함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산

add5와 add10은 둘 다 클로저이다. 이들은 같은 함수를 공유하지만 서로 다른 어휘적 환겨응ㄹ 저장한다. add5에서 x=5이지만 add10에서 x=10이다. 이는 클로저가 리턴된 후에도 외부함수의 변수들에 접근 가능하다는 것을 의미한다.

 

 

 

참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures