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

6 Comments

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

  2. Patrick

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

  6. Vasilii Pozdeev

    I have more complex task – I have to use ‘builder’ without ‘new’ keyword.
    I found solution – in every chaining method return not this, but Object.assign({}, this). That is, new object will be returned each time

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2024 patkua@work

Theme by Anders NorenUp ↑