자바스크립트로 구현한 싱글톤 패턴 (Singleton Patterns)

싱글톤 패턴(Singleton Pattern)?

싱글톤 패턴(Singleton Patterns)은 디자인 패턴을 공부하려고 할 때 가장 먼저 접하게 되는 패턴 중 하나입니다. 싱글톤 패턴은 이름에서 알 수 있듯이 애플리케이션에서 단 한번만 인스턴스화할 수 있는 객체입니다. 프로그램에서 동일한 커넥션 객체를 생성한다던지 단 하나만 존재해야되는 객체를 생성할 때 유용하게 사용할 수 있는 패턴입니다. 싱글톤 패턴이라는 단어나 사용법을 모르더라도 무의식적으로 비슷한 개념을 사용한 적이 분명히 있을 것입니다.
혹시 코드 중에 $를 보신 적 있으신가요? 여러분이 jQuery를 사용하고 계시다면, 이미 싱글톤 패턴을 사용해본 적이 있으신 겁니다. 여러분의 어떤 클래스에서든 $를 활용해서 DOM을 조작하고 이벤트도 다루셨을 거예요. 또다른 예시로는 아래와 같은 코드를 보신적 있나요?

const singleton = {
  name: 'hello',
  greeting: function() {
    return this.name;
  }
}

자바스크립트에서 객체 리터럴을 사용해본 적이 있으실텐데요. 객체 리터럴로 객체를 생성하는 방식 또한 싱글톤입니다. (자바스크립트에서 객체 리터럴로 생성한 객체는 다른 객체와 같을 수 없다. 객체 내부의 내용이 같더라도 참조하는 객체가 다르기 때문)

그래서 이 패턴을 어디다가 사용할 수 있는데?

우리의 프로젝트에 아래와 같은 기능들이 존재하고 있다고 가정해봅시다.

function login() {
  ...
}
function logout() {
  ...
}
function addCart() {
  ...
}

이 기능들은 몇 가지 문제를 가지고 있습니다.

1. 전역 네임스페이스를 오염시키고 있다. (명시적으로 부모 객체를 지정하지 않으면 전역객체인 window 객체에 연결된다)
2. 함수가 덮어쓰여질 가능성이 있습니다. 프로젝트 또 다른 부분에서 addCart 함수를 정의한다면 우리가 초기에 작성한 addCart 함수가 overwritten되어 정상적으로 동작하지 않을 수 있습니다.

해당 코드를 묶어줄 수 있는 객체를 하나 만들도록 합시다.

const NAMESPACE = {};
NAMESPACE.login = function() {
  ...
}
NAMESPACE.logout = function() {
  ...
}

NAMESPACE.addCart = function() {
  ...
}

다른 부분에서 NAMESPACE 이름을 가진 객체를 생성하려고 하지 않는이상 NAMESPACE 내부에 있는 함수들은 안전하게 사용될 수 있습니다. (또한, 다른 곳에서 NAMESPACE 이름을 사용하려고 할 때 const로 변수를 선언했기 때문에 에러가 발생한다.)

자바스크립트에서 싱글톤 적용하기

위에서 설명한 방식은 간단하게 싱글톤에 대해서 알려드리기 위해 작성한 것이고, 이제 자바스크립트에서 싱글톤 패턴을 사용할 때 어떻게 사용하는지 적용해보도록 하겠습니다.

const mySingleton = (function() {
  let instance;

  function init() {
    // Singleton

    // Private methods and variables
    function privateMethod() {
      console.log("I am private");
    }

    let privateVariable = "Im also private";

    return {
      publicMethod: function() {
        console.log("publicMethod");
      },
      publicProperty: "publiccccc"
    };
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = init();
      }

      return instance;
    }
  };
})();

let singleA = mySingleton.getInstance();  
let singleB = mySingleton.getInstance();  
console.log( singleA === singleB ); // true

훨씬 더 깔끔해진 코드에서는 싱글톤 객체의 private 메소드와 public 메소드를 모두 정의할 수 있게 해줍니다. 얻을 수 있는 이점으로는 전역 네임스페이스를 깔끔하게 유지하고, private한 정보들은 은닉할 수 있습니다.