[JS] Closure

1. Closure란?

• 클로저는 함수와 함수가 선언된 어휘적 환경(Lexical environment)의 조합이다. 즉, 객체 간의 유효범위를 이용해 private한 환경을 만드는 것이다.
• 클로저를 이해하려면 JavaScript가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.
• JavaScript는 함수 안에 선언된 변수는 지역변수로 취급되어 외부에서 접근이 불가능하다. 코드로 보자

const a = 1;
function f() {
    const b = 2;
}
console.log(a);
console.log(f.b);
console.log(b);

/**************결과값**************
1
undefined
console.log(b);
            ^
ReferenceError: b is not defined
********************************/

이러한 접근 제한을 의도적으로 이용하는 것이 클로저다.

 

2. Closure 응용

const counter = (() => {
  let count = 0;
  function handler(input) {
    count += input;
  }
  return {
    plus: () => {
      handler(1);
    },
    minus: () => {
      handler(-1);
    },
    result: () => {
      return count;
    },
  };
})();


console.log(counter.count);
console.log("result1 : "+counter.result());
counter.plus();
console.log("result2 : "+counter.result());
counter.minus();
counter.minus();
console.log("result3 : "+counter.result());

/***********************결과값***********************
undefined // counter.count 출력값
result1 : 0
result2 : 1
result3 : -1
**************************************************/

함수 내부에서 선언된 count와 handler()는 외부에서 접근이 불가능한 private한 어휘적 환경를 갖고, 결과 값으로 반환되는 plus(), minus(), result()는 외부에서 접근 가능한 public한 어휘적 환경을 갖는다.
외부에서 count 변수에 접근하기 위해선 counter.plus(), counter.minus(), count.result()를 사용해야만 한다.
이런 식으로 클로저를 활용해 public한 객체로 private한 객체를 다루는 것을 '모듈 패턴'이라 한다.

 

위의 Counter 함수를 생성자로 두 개의 객체를 생성해보자.

function counter () {
  let count = 0;
  function handler(input) {
    count += input;
  }
  return {
    plus: () => {
      handler(1);
    },
    minus: () => {
      handler(-1);
    },
    result: () => {
      return count;
    },
  };
};

const c1 = new counter();
const c2 = new counter();
console.log(c1.result()); // 0
console.log(c2.result()); // 0
c1.plus();
c1.plus();
c2.minus();
c2.minus();
console.log(c1.result()); // 3
console.log(c2.result()); // -3

/***********************결과값***********************
0
0
3
-3
**************************************************/

같은 생성자로 두 개의 객체를 만들었지만 이 경우에도 마찬가지로 private한 환경은 지켜지고, 각 객체 c1, c2는 인스턴스 객체로 서로 다른 count를 바라본다.