[JavaScript] 디자인패턴 #Singleton

싱글턴이란?

안녕하세요. 이번 시간에는 디자인패턴, 싱글턴에 대해 알아보겠습니다. 싱글턴은 말 그대로 하나뿐인 객체를 의미합니다. 자바스크립트에서는 객체 리터럴을 사용하면 싱글턴을 구현한 것입니다.

const obj = {
  name: 'singleton'
}

하지만 이 객체는 캡슐화되어있지 않기 때문에 결합도가 커지며 데이터를 보호하는데 문제가 생길 수도 있고 나중에 리팩토링할 때도 효율적이지 않습니다. 따라서 우리는 캡슐화하여 싱글턴을 구현해보겠습니다.

es5와 es6+에서 구현하는 방식이 다른데 하나씩 알아보죠.

es5

// 클로저 함수로 구현
const Singleton = (function () {
  let instance;

  function setInstance() {
    instance = {
      id: 1,
      text: "hello"
    };
  }

  return {
    getInstance() {
      if (!instance) {
        setInstance();
      }
      return instance;
    }
  };
})();

const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();

console.log("Singleton function", singleton1 === singleton2);

즉시 실행함수를 활용해서 instance와 setInstance함수를 캡슐화했습니다.

es6+

자바스크립트에 클래스가 도입된 후 싱글턴을 이런식으로도 구현할 수 있는데요. 이 예제도 마찬가지로 instance가 캡슐화되어있지 않죠.

let instance;
class Singleton {
  constructor() {
    if (instance) return instance;
    this.id = 1;
    this.text = "hello";
    instance = this;
  }
}

const singleton1 = new Singleton();
const singleton2 = new Singleton();

console.log("Singleton class", singleton1 === singleton2);

정적 필드 기능이 추가된 후로는 다음과 같이 구현합니다.

class Singleton {
	static instance
  constructor() {
    if (instance) return instance;
    this.id = 1;
    this.text = "hello";
    instance = this;
  }
}

const singleton1 = new Singleton();
const singleton2 = new Singleton();

console.log("Singleton class", singleton1 === singleton2);

싱글턴에 대한 고민

프로그램내에서 싱글턴의 활용방안에 대해서 고민을 해봤습니다. 일반적으로, 전역적으로 사용하는 상태를 관리하는 것에 싱글턴을 활용하면 좋을것 같다는 생각을 했습니다. 같은 데이터를 공유해야하기 때문이죠.

어떻게 보면 전역상태관리 툴인 redux와 mobx도 이 싱글턴을 활용한다고 생각할 수 있겠네요.