요약

전역적으로 사용할 수 있는 유일한 인스턴스를 생성하는 패턴.

설명

싱글톤 패턴은 특정 인스턴스가 오직 하나만 존재하도록 보장하는 소프트웨어 설계 패턴이다. 전역 변수를 사용하지 않고도 해당 객체를 전역적으로 접근 할 수 있게 되며 공유 자원에 대한 동시 접근을 제어할 수 있다.

보통 싱글톤 패턴에 대해 설명할 떄 클래스를 기반으로 설명하는데 자바스크립트를 사용하는 이상 굳이 클래스를 쓰지 않아도 된다. 이는 자바스크립트가 프로토타입 기반의 언어이기 때문에, 자바스크립트와 일반적인 함수와 객체, 클로저를 사용해서 구현이 가능하다.

class 문법을 이용한 싱글톤

// singleton.js
let instance;

export default class Singleton {
  constructor(data = 'Initial data') {
    if(instance) {
      return instance;
    }
    this.data = data;
    instance = this;
  }
  
  getData() {
    return this.data;
  }
  
  setData(data) {
    this.data = data;
  }
}

singleton 클래스를 만들어 만약 instance가 있는 경우에는 return instance를 통해 새로운 클래스가 생성되지 않도록 막고 있다.
data를 받지 않을 시 기본 데이터로 'Initial data'를 주고 있다.
기본적인 getData, setData 함수를 통해 singleton 클래스 안에서 값을 가져오고, 업데이트 하는 기능을 제공한다.

사용 예시:

import Singleton from './Singleton.js'

// Singleton 클래스의 인스턴스를 생성한다.
let singleton = new Singleton('First data')

// 데이터를 가져온다
console.log(singleton.getData())

/ 데이터를 업데이트합니다.
singleton.setData('Updated data');
console.log(singleton.getData());  // "Updated data"

// 또 다른 인스턴스를 생성하려고 시도합니다.
let anotherSingleton = new Singleton('Another data');

// 하지만 싱글톤 패턴에 따라, 이전에 생성된 인스턴스가 반환됩니다.
console.log(anotherSingleton === singleton);  // true
console.log(anotherSingleton.getData());  // "Updated data"

Singleton 클래스를 import해와서 singleto이라는 변수에 저장한다. 저장 함과 동시에 'First data'라는 스트링을 전달해 singleton의 constructor를 통해 this 바인딩을 통해 data = 'First data'가 된다.

이후 setData 함수를 통해 'Updated data'라는 값을 갖게 되고
anotherSingleton 이라는 변수에 Singleton을 새로운 값으로 호출해도 이미 instance가 존재하기에 원래의 instance를 그대로 반환하게 된다.

그래서 콘솔에 찍히는 값이 주석 값이 되는것이다.