[Javascript] 디자인 패턴 - 싱글톤 패턴

 

회사에서 수습기간 동안은 JS에 대한 기본 역량을 향상시키라고 해서 당분간은 스터디 위주의 글을 올릴 예정이다.

react 공부만 하다보니 바닐라 js에 대한 기억이 모두 증발하는(?) 상황이 발생해서 기초부터 다시 공부하고 있다.

내가 속한 팀은 기존에 개발되어 있는 에디터를 유지 보수하고 더 나은 제품으로 개발하는 팀이기도 해서 에디터를 공부 삼아 개발했는데 이번 스프린트 미션이 싱글톤 패턴 적용이라 공부하게 됐다 .

 

싱글톤 패턴이란?

싱글톤 패턴은 전체 시스템에서 클래스의 인스턴스를 하나만 존재하도록 하는 패턴이다.

보통 객체를 만들 때, 하나의 생성자로 여러개의 서로 다른 객체를 만들 수 있는데,

싱글톤에서는 단 하나의 객체만 존재하는 것이 보장된다.

 

가장 간단한 싱글톤 예제는 아래와 같이 객체 리터럴을 이용하는 것이다.

const first = {a:1, b:2};
const second = {a:1, b:2};

 

동일한 키와 값을 똑같이 선언했더라도 참조하는 주소 값이 다르기 때문에,

fisrt와 second는 각각 유일하게 존재하는 서로 다른 객체이다.

 

객체 리터럴로 사용하지 않고 비공개된 프로퍼티나 함수를 정의하고 싶다면

클로저를 이용하고, IIFE로 비공개 변수를 가질 수 있도록 만든다.

 

const singleTone = (function(){
    var instance;

    function init(){ // 싱글톤 객체를 리턴할 비공개 함수
        return {
        publicMethod : function(){
            return 'public method';
        },
        publicProps : 'public variable',
    };
}
    return{
        getInstance : function(){
            if(instance){
                return instance; // 있으면 그냥 반환
            }
            instance = init(); 
            return instance; // 없으면 객체 생성 후 반환
        }
    }
})();

const fisrt = singleTone.getInstance();
const second = singleTone.getInstance();

console.log(fisrt === second) // true;

 

싱글톤 예제