[디자인 패턴] Builder pattern (javascript)

자바스크립트에서 사용할 수 있는 빌더 패턴을 구현해보자. 위키에서 정의는 다음과 같다.

빌더 패턴(Builder pattern)이란 복합 객체의 생성 과정과 표현 방법을 분리하여 동일한 생성 절차에서 서로 다른 표현 결과를 만들 수 있게 하는 패턴이다.

inner class 를 이용한 빌더 패턴

내부에 빌더 클래스를 만들어 구현하는 방식이다.

샘플 코드

class User {
  constructor(build) {
    if (build) {
      this.id = build.id;
      this.name = build.name;
      this.age = build.age;
    }
  }

  static get Builder() {
    class Builder {

      setId(id) {
        this.id = id;
        return this;
      }

      setName(name) {
        this.name = name;
        return this;
      }

      setAge(age) {
        this.age = age;
        return this;
      }

      build() {
        return new User(this);
      }
    }

    return new Builder();
  }
}

테스트 코드

function testBuilderPattern() {

  const builder = User.Builder;
  const user1 = builder
                    .setId(1)
                    .setName('Alice')
                    .setAge(22)
                    .build();
  console.log('user1', user1);

  const builder2 = User.Builder;
  const user2 = builder2
                    .setId(2)
                    .setName('Bob')
                    .build();
  console.log('user2', user2);

}
testBuilderPattern();

콘솔 결과

상속을 이용한 빌더 패턴

먼저 슈퍼 클래스로 Builder 클래스를 정의한다. Builder 클래스를 상속 받는 하위 클래스들은
생성자에서 init() 함수를 호출해 필드의 setter 를 생성한다.

샘플 코드

class Builder {

  init() {
    Object.keys(this).forEach((key) => {
      const setterName =
        `set${key.substr(0, 1).toUpperCase()}${key.substr(1)}`;

      this[setterName] = (value) => {
        this[key] = value;
        return this;
      };
    });
  }

  build() {
    return this;
  }

}

class User extends Builder {
  constructor() {
    super();

    this.id = -1;
    this.name = null;
    this.age = 0;

    super.init();
  }
}

테스트 코드

function testBuilderPattern() {
  const user = new User()
    .setId(1)
    .setName('jason')
    .setAge(22).build();

  console.log(user);
}

testBuilderPattern();

콘솔 결과

상속을 이용한 방법은 클래스에 존재하는 멤버 변수들의 setter 함수(instance를 반환 하는)
들을 자동으로 만들어 주므로 위의 콘솔 출력과 같이 setter 함수들이 생성 된다.

Reference

• builder-pattern-using-javascript-and-es6-ec1539182e24