patkua@work

The intersection of technology and leadership

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);

5 Comments

  1. jitender chand

    May 31, 2016 at 4:57 am

    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.

  2. Hi Jitender,

    Thanks for your comment. If you’d like to read more about the Builder pattern, its usage is well document in the book, Design Patterns (Gang of Four)

  3. 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

    June 12, 2016 at 1:46 pm

    _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. 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

© 2017 patkua@work

Theme by Anders NorenUp ↑