[javascript] 객체지향 - 클로저 모듈 패턴

클로저 모듈 패턴

아래 코드와 같이 클로저 모듈 패턴을 이용해서 코드 재사용성을 높일 수 있다.

function makeCounter() {
  let value = 0;
  return {
    increase: function() {
      value++;
    },
    decrease: function() {
      value--;
    },
    getValue: function() {
      return value;
    }
  }
}

let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1

let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2

💡 메서드 호출 방식을 이용할 때 화살표 함수를 쓰지 않는 이유
화살표 함수에는 this라는 변수 자체가 존재하지 않기 때문에 상위 환경의 this를 참조하게 된다. 아래 코드의 경우 b 메서드의 this는 자신을 호출한 obj가 아니라 함수 선언 시점의 상위 스코프인 전역객체를 가리키게 된다. 전역 객체 중 i라는 속성은 없으니 undefined 정의되지 않았다고 나온다.

var obj = { // does not create a new scope
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}

mdn 화살표 함수
화살표 함수와 this 바인딩