개발자라면 알아야할 7가지 디자인 패턴

최예준·2023년 12월 21일

JavaScript 디자인패턴 싱글톤 팩토리

공부

목록 보기

8/19

보기 좋은 코드를 만들기 위한 첫걸음

바로바로 디자인 패턴

1. 싱글톤 패턴

[생성자패턴]

싱글톤 패턴은 객체의 인스턴스가 오직 1개만 생성되는 패턴이다.
전역적으로 하나의 인스턴스만 유지되어야 할 때 유용하며,
여러 곳에서 동일한 리소스에 접근해야하는 경우에 사용됩니다.


// utils 이라는 싱글톤 생성.... 
const utils = (function () {
  // instance 라는 싱글톤 인스턴스를 저장하는 변수 선언 
  let instance;
  
  // 싱글톤의 인스턴스를 생성하는 함수 
  function initialize() {
    return {
      sum: function (a, b) {
        return a + b;
      }
    };
  }
 
  return {
    // instance 가 존재하는지 확인 
    getInstance: function () {
      if (!instance) {
        // 인스턴스를 초기화 하여 할당함. 
        instance = initialize();
      }
      return instance;
    }
  };
})();

let sum = utils.getInstance().sum(3, 5); // 8

위 코드에서는 utils 라는 싱글톤을 생성해서, 내부 변수들이 외부에서는 접근되지 않고,
utils.getInstance() 메를 통해서만 접근할 수 있습니다.

또한 instance 가 없는 경우에만 인스턴스를 초기화 하여 할당하기 때문에 인스턴스가 하나만 생성되는 것을 보장합니다.

2. 팩토리 패턴

팩토리 패턴은 마치 공장과 같이,
생성을 처리하는 부분과 사용하는 부분을 분리하여 구현하는 패턴입니다.

const Vehicle = function() {};

const Car = function() {
  this.say = function() {
    console.log(‘I am a car’);
  }
};

const Truck = function() {
  this.say = function() {
    console.log(‘I am a truck’);
  }
};

const Bike = function() {
  this.say = function() {
    console.log(‘I am a bike’);
  }
};

const VehicleFactory = function() {
  this.createVehicle = (vehicleType) => {
    let vehicle;
    switch (vehicleType) {
      case ‘car’:
        vehicle = new Car();
        break;
      case ‘truck’:
        vehicle = new Truck();
        break;
      case ‘bike’:
        vehicle = new Bike();
        break;
      default:
        vehicle = new Vehicle();
    }
 
    return vehicle;
  }
};

const vehicleFactory = new VehicleFactory();

let car = vehicleFactory.createVehicle(‘car’);
let truck = vehicleFactory.createVehicle(‘truck’);
let bike = vehicleFactory.createVehicle(‘bike’);

car.say(); // I am a car
truck.say(); // I am a truck
bike.say(); // I am a bike

위 코드를 살펴보면, Car, Truck 등 차량 타입이 정의되어 있고 say 라는 메서드로 출력 할 수 있습니다.

[팩토리 클래스]

createVehicle 는 vehicleType 을 받아 해당 타입에 맞는 객체를 생성하고 반환합니다.
더 다양한 차량이 필요하다면 case를 추가하면 됩니다.

사용 클래스

VehicleFactory 의 인스턴스를 new 하여 생성한 뒤에
let car = vehicleFactory.createVehicle(‘car’); 와 같이
car 변수에 vehicleFactory.createVehicle 을 호출하며 car 타입을 보내줍니다.

해당 변수를 사용할 때에는 선언해둔 car 사용하려는 함수인 say(); 를 호출합니다.

이렇게 코드를 작성하면,
새로운 객체 를 추가하거나 수정할때 팩토리 부분의 코드만 수정하면 되며, (유연성)
사용자는 그저 팩토리를 통해 필요한 객체만을 얻을 수 있으며 (추상화)
생성에 관련된 코드가 한곳에 모여있어 관리하기가 용이합니다. (관리용이성)

3. 모듈 패턴

해당 패턴은 캡슐화를 통해서 소스를 "모듈화" 시키는 것입니다.
공개 와 비공개 구성요소를 구분하는 것으로, 일부 데이터와 메서드는 외부에서 접근 할 수 있도록 공개하고, 나머지는 내부에서만 사용되도록 비공개 됩니다

const bookModule = (function(){
  	// private 
	let title = 'javaScript';
  	let price = 15;
  
  // public
  return {
  	printTitle : function (){
    	console.log(title);
    }
  }
})();