자바스크립트 - 팩토리 패턴 사용하기

자바스크립트에서 팩토리패턴 사용하는 방법에 대해서 설명해드리려고 해요

팩토리 패턴은 디자인 패턴 중에 하나입니다.

 

디자인패턴이란?

옛날부터 개발자들이 포로그램을 만들 때, 생겼던 문제점들을 해결하기 위해 만들어낸 전형적인 패턴입니다.

그중 팩토리 패턴은 생성 패턴 중 하나입니다.

 

팩토리 패턴이란?

부모 클래스에서 자식 객체를 생성하는데, 그 객체의 유형을 다양하게 할 수 있는 패턴입니다.

 

이렇게 이야기하면 잘 이해가 안 가시죠?

실제 소스로 한번 볼까요?

 

예시 1

class Superman {
  name;
  constructor() {
    this.name = "Superman";
  }
}

class Batman {
  name;
  constructor() {
    this.name = "Batman";
  }
}

class Pororo {
  name;
  constructor() {
    this.name = "Pororo";
  }
}

class Person {
  name;

  constructor(name) {
    let person;
    if (name === "superman") {
      person = new Superman();
    } else if (name === "batman") {
      person = new Batman();
    } else if (name === "pororo") {
      person = new Pororo();
    }
    this.name = person.name;
  }

  sayHello() {
    console.log("Hello, " + this.name);
  }
}

const hero = new Person("superman");
hero.sayHello(); // Hello, Superman

Superman, Batman, proro 세 개의 객체가 있고,

Person 객체에서 name을 받아서 이름에 맞는 객체를 선언하고 있습니다.

 

이렇게 되면 객체 생성 부분하고 Person 클래스의 로직 부분하고 함께 있게 됩니다.

 

현재 생성자 안에 객체를 생성하는 부분이 있는데 

이 부분을 따로 빼서 구현해 보도록 하겠습니다.

예시 2

class Superman {
  name;
  constructor() {
    this.name = "Superman";
  }
}

class Batman {
  name;
  constructor() {
    this.name = "Batman";
  }
}

class Pororo {
  name;
  constructor() {
    this.name = "Pororo";
  }
}

class PersonFactory {
  static getInstance(name) {
    const heroMap = {
      superman: Superman,
      batman: Batman,
      pororo: Pororo
    };
    return heroMap[name];
  }
}

class Person {
  name;

  constructor(name) {
    let hero = PersonFactory.getInstance(name);
    this.name = hero.name;
  }

  sayHello() {
    console.log("Hello, " + this.name);
  }
}

const hero = new Person("superman");
hero.sayHello(); // Hello, Superman

Person 함수에서 Superman, Batman, Pororo 객체를 선언하는 부분을 제외하고

PersonFactory를 만들었습니다.

이제 객체를 선언하는 부분은 PersonFactory로 모두 이동하였습니다.

 

Person에서 해당 클래스의 로직만 구현하면 되고

객체를 선언하는 부분은 PersonFactory로 분리시켰습니다.

 

각 클래스마다 기능과 객체 생성 부분을 구분할 수 있게 됩니다.

 

지금까지 자바스크립트 Class를 이용한 팩토리 패턴이었습니다.