singleton 패턴

<aside> 💡 싱글턴 패턴(Singleton pattern)을 따르는 클래스는, 생성자가 여러 차례 호출되더라도 실제로 생성되는 객체는 하나이고 최초 생성 이후에 호출된 생성자는 최초의 생성자가 생성한 객체를 리턴한다. (출처: 위키피디아)

</aside>

let counter1 = {
  value: 0,
  increase: function() {
    this.value++
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue()

singleton 패턴 객체를 클로저 모듈 패턴을 이용해 재사용하기

counter1 외에도 다른 counter 객체를 사용하고 싶을 때, 똑같은 기능을 하는 객체를 일일히 코드로 작성하면 비효율적일 것이다. 따라서 클로저 모듈 패턴을 사용해 singleton 패턴 객체 counter를 재사용할 수 있게 해주는 함수를 만들자.

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

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

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

객체 지향 자바스크립트 (Object Oriented JavaScript)

객체 지향 프로그래밍이란?

객체 지향 프로그래밍은 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 여러 객체를 만드는 프로그래밍 패턴이다. 자바스크립트에서는 청사진을 **클래스(class)**라고 부르고, 청사진을 바탕으로 만들어진 객체는 **인스턴스(instance)**라고 부른다.

자바스크립트에서의 클래스

클래스는 함수로 만들 수 있다. 바로 위에 있는 makeCounter() 함수도 일종의 클래스라고 볼 수 있다.

그리고 이 함수를 클래스로 이용하는 방법은 조금 다른데, 그냥 실행하는 것이 아니라 new 키워드와 함께 실행해야 한다. new 키워드는 호출한 함수를 클래스로 하여 새로운 인스턴스를 만든다고 말하는 것이다.

function Counter() { ... }

let counter1 = new Counter(); // Counter 클래스로 counter1 인스턴스를 만든다
let counter2 = new Counter(); // Counter 클래스로 counter2 인스턴스를 만든다

<aside> 💡 일반 함수와 클래스 함수 구별하기
클래스는 일반 함수처럼 선언할 수 있기 때문에, 해당 함수가 클래스인지 함수인지 구별하기 어렵다. 자바스크립트로 클래스를 선언할 때는 암묵적인 룰이 있는데, 일반 함수는 동사+명사 형태로 만들고, 클래스 함수는 대문자로 시작하는 일반명사 형태로 만든다.

</aside>

지금까지는 일반 함수를 선언하는 것과 같은 방식으로 클래스를 만들었지만, ES6에서는 class 키워드를 사용해 클래스를 생성할 수 있다. class 내의 constructor 함수는 인스턴스가 생성될 때 실행되는 생성자(consturctor) 함수이다. (생성자 함수는 리턴을 하지 않는다)

// ES5 방식
function Car (brand, name, color) {...}
// ES6 방식
class Car {
  constructor(brand, name, color) {
    // constructor: 인스턴스가 만들어질 때 실행되는 함수
  }
}

클래스의 속성과 메서드

속성은 '클래스가 가지고 있는 값'이고, 메서드는 '클래스가 가지고 있는 함수'이다.