자바스크립트 클로저 활용 Closure private 변수, 메서드 흉내 내기

📌  Closure 활용 방법

 

대표적인 이점 중 하나가, private 변수나 메서드를 흉내낼 수 있다는 점이다.

 

// counter에 할당된 이 익명 함수는 정의되는 즉시 실행된다.
// 이 lexical environment는 privateCounter라는 변수와 changeBy라는 함수를 포함한다.
// 2개 다 private item이다. 익명 함수 외부에서 접근될 수 없는 아이들이다.
// 대신 익명 함수에서 반환된 3개의 public 함수를 통해서만 접근할 수 있다.

let counter = (function() {
  let privateCounter = 0;
  function changeBy(val) {
  	privateCounter += val;
  }
  return {
    // counter.increase, counter.decrease, counter.value 는 같은 lexical 환경을 공유한다.
    increase: function() {
      changeBy(1);
    },
    decrease: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };
})();

counter.increase();
counter.increase();
console.log(counter.value());  // logs 2

 

// 익명 함수를 별도의 변수 makeCounter에 저장하고, 이 변수를 이용해 여러개의 카운터를 만들 수 있다.
// 2개의 counter는 각자의 독립성을 지킨다.
// 하나의 클로저에서 변수값을 변경해도 다른 클로저의 값에는 영향을 주지 않는다.
// -> 이런 방식으로 클로저를 사용해 객체 지향 프로그래밍의 정보 은닉과 캡슐화 같은 이점을 얻을 수 있다.

let makeCounter = function() {
  let privateCounter = 0;
  function changeBy(val) {
  	privateCounter += val;
  }
  return {
    // counter.increase, counter.decrease, counter.value 는 같은 lexical 환경을 공유한다.
    increase: function() {
      changeBy(1);
    },
    decrease: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }
};

let counter1 = makeCounter();
let counter2 = makeCounter();

counter1.increase();
counter1.increase();
counter2.decrease();

console.log(counter1.value());  // 2
console.log(counter2.value());  // -1

 

 

📌  Closure 잘못된 활용 방법

 

MDN 클로저 성능 관련 고려 사항