클로저 모듈 패턴, 클래스, 인스턴스

클로저 모듈 패던

설명하기전 메서드 호출을 먼저 알아야 한다
단순 객체를 사용한 예제
이 경우 똑같은 기능을 하는 카운터가 여러 개가 필요하다면,
같은 코드를 그대로 복사/붙여넣기 해야 하므로, 재사용성이 떨어진다

let counter1 = {
  value: 0,
  increase: function() {
    this.value++ // 메서드 호출을 할 경우, this는 counter1을 가리킵니다
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2

주의사항 : 메서드 호출시 화살표 함수는 사용 불가능하다

클로저를 이용해 매번 새로운 객체 생성하기
이 경우 클로저 모듈 패턴을 이용하여 카운터를 여러개 만들 수 있다

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

let counter1 = makeCounter() // 변수 카운트1 생성
counter1.increase()
counter1.getValue() // 1

let counter2 = makeCounter() // 변수 카운트2 생성
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2

클래스

class는 객체를 생성하기 위한 템플릿, 즉 데이터와 이를 조작하는 코드를 하나로 추상화 한다
class는 특별한 함수 이기 때문에 함수 표현식과 함수선언식처럼
class표현식과 class선억 두가지 방법을 제공

class선언

class a {
  b(height, width) {
    this.height = height;
    this.width = width;
  }
}

class표현

let a = class {
  b(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(a.name);

인스턴스

비슷한 성질을 가진 여러개의 객체를 만들어 내기 위해, 생성자 함수를 만들어 사용하는데 이렇게 생성된 객체를 인스턴스라 부를 수 있다
즉, x함수의 인스턴스는 y이다

class Polygon {
  constructor(name) {
    this.name = name;
  }
}

const poly1 = new Polygon('test');

new 키워드, 생성자함수

위 예제에서 사용된 new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다

new constructor[([arguments])]
// constructor -> 객체 인스턴스의 타입을 명시하는 함수
// 즉 constructor 생성자함수라고 할 수 있다.
// arguments -> constructor와 함께 호출될 값 목록

ES5, ES6 클래스 작성 문법

class로 만든 하나의 예제를 통해 작성방법이 다르다는점을 알아본다

// ES5
function xyz(a, b) {
  this.name = a;
  this.age = b;
}

// ES6
class Xyz { // 클래스명은 항상 대문자로 사용한다
  constructor(a, b) {
    this.name = a;
    this.age = b;
  }
}