Javascript | 싱글톤(Singleton) 패턴 구현하기

이동욱·2024년 1월 2일
0

싱글톤 패턴이란?
클래스가 인스턴스를 최대 한번만 생성하는것을 보장하는 패턴
전역 변수를 사용하지 않고 클래스의 인스턴스를 하나만 생성해 그 인스턴스에 대한 전역적인 접근을 제공한다.

자바스크립트에서 싱글톤 패턴을 구현하는 방법으로 가장 첫번째는

1.객체 리터럴

const player = {
	isPlaying:false,
	play:()=> {
		isPlaying = true
	}
}

오디에서 조회해도 player의 값은 하나이기 때문에 객체로 간단하게 싱글톤 패턴을 구현할 수 있다.

이렇게 간단하게 구현 할 수 있지만 비공개 프로퍼티를 만들고 싶으면 다른 방법을 써야한다


2. IIFE(즉시 실행함수) + 클로저

const Player = (function () {
    // 비공개 프로퍼티 변수를 선언
    let instance;
    let isPlaying = false;

    // 인스턴스를 생성할 private 메서드 역할을 한다.
    function getPlayer() {
        return {
            start: function () {
                if (isPlaying === false) {
                    console.log("음악을 틀자!");
                    isPlaying = true;
                }
                else {
                    console.log("이미 재생중!?");
                }
            },
            stop: function () {
                console.log("음악을 끄자!");
                isPlaying = false;
            },
        };
    }

    // 인스턴스를 생성할 public method 역할
    return {
        get: function () {
            //   인스턴스를 생성한 이후에는 새로 생성하지 않고 이미 생성된 객체를 반환한다.
            if (instance === undefined) {
                instance = getPlayer();
            }
            return instance;
        },
    };
})();
const melon = Player.get();
const vibe = Player.get();
melon.start(); // 음악을 틀자!
vibe.start(); // 이미 재생중!?
console.log(melon === vibe); // true

iife를 사용해 코드가 한번만 실행시켜 instance가 한번만 생성되도록 보장할 수 있습니다.

또한, Player의 getPlayer 메서드는 instance가 존재하지 않을 경우 getPlayer를 통해 instance를 생성하고 반환하며, 이미 생성된 instance가 있다면 getPlayer를 호출하여 해당 instance를 반환합니다.

따라서, 예를 들어 melon에서 재생을 시작했더라도 vibe에서 재생을 시도하면 동일한 인스턴스에서 실행 중이기 때문에 isPlaying을 true로 판단하여 '이미 재생 중입니다'라는 로그가 출력됩니다

참조
https://www.zerocho.com/category/JavaScript/post/57541bef7dfff917002c4e86
https://velog.io/@ggong/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-%EC%8B%B1%EA%B8%80%ED%86%A4-%ED%8C%A8%ED%84%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

profile
프론트엔드

0개의 댓글