싱글톤 패턴(Singleton Pattern) 예시 - 자바스크립트(JavaScript ES5 /ES6)

자바스크립트로 구현한 디자인패턴 중 싱글톤 패턴을 번역하여 소개합니다. 

상황과 그에 대한 솔루션을 객체지향적인 디자인패턴과 다르게 자바스크립트스럽게(?) 구현된 예제입니다.

객체지향적으로 설계한 코드도 확인할 수 있습니다.  

자세한 내용은 아래 원문을 참고해주세요.

JavaScript-Design-Patterns/GoF/idiomatic/Creational/Singleton at master · Badacadabra/JavaScript-Design-Patterns

---

개요 (Synopsis)

나는 특별합니다. 나와 똑같은 DNA를 가진 사람은 세상에 아무도 없죠...

 

you are so unique..

 

---

문제 (Problem)

문제는 JavaScript에서 여러 방법으로 객체가 생성될 수 있다는 점입니다.

 

JavaScript에서 객체를 생성하는 방법들

 

1. 객체 리터럴 : 예를 들면... {}

2. "Object"의 정적 메서드 "create" : 예를 들면.. Object.create(Object.prototype)

3. 생성자 함수에 대한 "new" 연산자: 예를 들면 new Object()

 

여러 방법으로 객체를 생성하기 때문에 코드 내에서 동일한 다른 인스턴스가 없을 것이라고 확신할 수 없습니다!

 

 

---

해결방법 (Solution)

싱글톤 패턴으로 해결할 수 있습니다!

 

JavaScript의 특성 때문에 객체 리터럴은 이미 일종의 싱글톤이긴 합니다.

각각의 객체 리터럴은 고유하며 Object의 프로토타입에서 만들어집니다.

어느 정도로는, 객체 리터럴은 즉시 전달되는 익명 클래스의 인스턴스로 볼 수 있습니다.

그러나 객체 리터럴은 사실 Object의 인스턴스에 불과하고 주장할 수도 있습니다.

객체 리터럴이 순수한 싱글톤이 아닌 것은 분명하지만, 유연하게 생각하면 싱글톤으로 여길수도 있습니다.

singleton

---

ES5 버전 

Client  코드 (client.js)

'use strict';

var me = require('./API/me'),
	meAgain = require('./API/me');

// ==============================
// CLIENT CODE 
// ==============================

// 'me'와 'meAgain'이 동일한 객체를 참조하기 때문에 'OK'가 표시됩니다.
// 코드에는 하나의 인스턴스만 존재합니다. 이것이 싱글톤으로 기대하는 바입니다. :)

if (me === meAgain) {
	console.log("OK") // "OK" 출력
} else {
	console.log("KO");
}

 

API 코드 (me.js)

'use strict';

// ==============================
// SINGLETON: "ME"
// ==============================

module.exports = {
	firstName : "Baptiste",
    lastName: "Vannesson"
};

---

ES6 버전 

Client  코드 (client.js)

import me from './API/me';
import meAgain from './API/me';

// ==============================
// CLIENT CODE 
// ==============================

// 'me'와 'meAgain'이 동일한 객체를 참조하기 때문에 'OK'가 표시됩니다.
// 코드에는 하나의 인스턴스만 존재합니다. 이것이 싱글톤으로 기대하는 바입니다. :)

if (me === meAgain) {
	console.log("OK") // "OK" 출력
} else {
	console.log("KO");
}

 

API 코드 (me.js)

// ==============================
// SINGLETON: "ME"
// ==============================

export default {
	firstName: "Bastiste",
	lastName: "Vannesson"
};