본문 바로가기
디자인패턴GoF/생성패턴

자바스크립트로 이해해보는 싱글톤패턴 (SingleTone Pattern) In 생성패턴

by 봉이로그 2023. 11. 27.

 

백엔드 개발을 접해본사람이라면, 무조건 들어봤을 디자인패턴이다.

다른 디자인패턴과 마찬가지로, 실제로 상당히 많은곳에서 사용이 되어지고 있는패턴이다.

내가 공부하면서 제일 처음 공부했던 패턴이기도 하다.

 

싱글톤패턴은 하나의 클래스 인스턴스만 존재하도록 보장한다.

인스턴스를 한번만 생성하고, 똑같은 인스턴스를 만들지 않고 기존의 인스턴스를 재활용하는 패턴이다. 

객체 생성을 위한 비용을 줄이고, 메모리를 절약해줄수 있다.

 

방법1: static(정적) 키워드를 활용

interface Database {
  db: "oracle" | "mysql" | "postgre";
  isConnect: boolean;
}

const dbConnection = (db: Database['db']): Database => {
  console.log("db connected success");
  return {
    db,
    isConnect: true,
  };
};

class SingleTone {
  private static instance = {} ;

  constructor() {}

  static getInstance(db: Database['db']) {
    if (!this.instance[db]) {
      this.instance[db] = dbConnection(db);
    }
    return this.instance[db];
  }

  findAll() {
    return new Array({ length: 10 }).map((_, idx) => ({ userId: idx }));
  }
}

const instance1 = SingleTone.getInstance('mysql');
const instance2 = SingleTone.getInstance('mysql');

console.log("Same instance? " + (instance1 === instance2)); // Same instance? true

 

싱글톤패턴을 활용하는 방법중 하나는 static 변수와 static 메서드를 활용하는 방법이다.

ES6부터 클래스가 추가되면서, static 키워드도 추가가 되었다.

 

변수와 메서드에 static 키워드를 사용하게 될시에, 클래스 레벨에서 변수 및 메서드에 접근하고 생성하여 인스턴스를 공유할수있게 된다.

 

이 점을 활용하여 instance를 공유하는 싱글톤패턴을 만들수 있다.

 

new 키워드를 사용하여 클래스를 생성하지 않고, getInstance 메서드를 통해서 instance를 생성하고 재활용하는것이다.

 

 

방법2: 클로저를 활용


let Singleton = (() => {
  let instance = {};

  const dbConnection = (database : Database['db']): Database => {
    console.log("db connected success");
    return {
      db: database,
      isConnect: true,
    };
  };

  const getInstance = (database: Database['db']): Database => {
    if (!instance[database]) {
      instance[database] = dbConnection(database);
    }
    return instance[database];
  };

  return {
    getInstance,
  };
})();

function run() {
  let instance1 = Singleton.getInstance('mysql');
  let instance2 = Singleton.getInstance('oracle');
  let instance3 = Singleton.getInstance('mysql');

  console.log("Same instance? " + (instance1 === instance2)); // Same instance? = false
  console.log("instance1 vs instance3 Same instance? " + (instance1 === instance3)); // instance1 vs instance3 Same instance? true
}

클로저를 활용한 방법의 순서는 아래와 같다.

 

1. instance 변수를 가지고 있는 익명의 즉시실행 함수(IIFE; Immediately Invoked Function Expression)를 생성하고 getInstance변수에 할당한다.

 

2. 즉시 실행 함수의 구성은 클로저 함수로 작성한다. 

  - 외부함수에서 instance를 초기화하는 함수 코드를 작성한다.

  - instance를 return하는 getInstance 함수를 내부함수로 작성하고 return 해준다.

  - getInstance 함수는 instance가 이미 생성되었다면, instance를 return하고, 생성되어있지 않다면 instance를 생성한다.


3. 클로저 즉시실행함수를 할당한 SingleTone 변수의 return 받은 내부함수(getInstance)를 통해 인스턴스를 생성 및 재활용한다.

 

 

레퍼런스

https://www.dofactory.com/javascript/design-patterns/singleton

 

JavaScript Singleton Design Pattern

JavaScript Singleton Design Pattern The Singleton Pattern limits the number of instances of a particular object to just one. This single instance is called the singleton. Using Singleton Singletons are useful in situations where system-wide actions need to

www.dofactory.com