A builder pattern implementation in Javascript

We’re using the builder pattern on our javascript project, as it useful for starting off with a set of defaults, but is clear when we want to override particular values. Although there are a few places on the net that describe who uses the builder pattern in javascript, they don’t really provide an implementation.

Here’s one that works for us:

var Builder = function() {
  var a = "defaultA";
  var b = "defaultB";
  
  return {
      withA : function(anotherA) {
        a = anotherA;
        return this;
      },
      withB : function(anotherB) {
        b = anotherB; 
        return this;
      },
      build : function() {
        return "A is: " + a +", B is: " + b;
      }
  };
};

var builder = new Builder();

console.log(builder.build());

var first = builder.withA("a different value for A").withB("a different value for B").build();

var second = builder.withB("second different value for B").build();

var third = builder.withA("now A is different again").build();

console.log(first);
console.log(second);
console.log(third);

6 comments

  1. Pingback: Dew Drop – April 8, 2013 (#1,522) | Alvin Ashcraft's Morning Dew
  2. jitender chand

    Nice example of how to write builder pattern. But I not certainly clear that why we use and what can we achieve by using that. It will be more clear if you describe the problem statement then you fix it by using builder pattern. In this way people can understand it well.

  3. Hareendran

    this is a wrong example of builder pattern. builder should build immutable copy for each build() call .
    the current output is
    A is: defaultA, B is: defaultB
    A is: a different value for A, B is: a different value for B
    A is: a different value for A, B is: second different value for B
    A is: now A is different again, B is: second different value for B

    if builder pattern implementation had been correct the log should have read

    A is: defaultA, B is: defaultB
    A is: a different value for A, B is: a different value for B
    A is: defaultA, B is: second different value for B
    A is: now A is different again, B is: defaultB

    builder is carry forwarding the values from the earlier call, which shouldn’t be case.
    javascript mutates the reference directly

  4. Vasilii Pozdeev

    _Hareendran_,
    agree with you.

    Here is not correct example of Builder pattern.
    I’m trying to implement it right now, but can’t find solution =\

    Have you any ideas, how to do it?

  5. Hareendran

    It’s very simple use new Builder for each create

    console.log(new Builder().build());
    var first = new Builder().withA(“a different value for A”).withB(“a different value for B”).build();
    var second = new Builder().withB(“second different value for B”).build();
    var third = new Builder().withA(“now A is different again”).build();

    console.log(first);
    console.log(second);
    console.log(third);

    complete snippet
    ————————————-

    var Builder = function() {
    var a = “defaultA”;
    var b = “defaultB”;

    return {
    withA : function(anotherA) {
    a = anotherA;
    return this;
    },
    withB : function(anotherB) {
    b = anotherB;
    return this;
    },
    build : function() {
    return “A is: ” + a +”, B is: ” + b;
    }
    };
    };

    console.log(new Builder().build());

    var first = new Builder().withA(“a different value for A”).withB(“a different value for B”).build();

    var second = new Builder().withB(“second different value for B”).build();

    var third = new Builder().withA(“now A is different again”).build();

    console.log(first);
    console.log(second);
    console.log(third);

Leave a Reply