Implementing the Builder Pattern in JavaScript without Classes

Michael Krasnov
Jan 28 · 2 min read

Design patterns are a vital part of software development. They describe common problems and solutions to them. One such pattern is the builder pattern. As Wikipedia puts it, it is “a design pattern designed to provide a flexible solution to various object creation problems in object-oriented programming”. However, I am here to show you that it does not only apply to object-oriented languages and can be achieved in JavaScript without classes.

How does the builder pattern work?

The purpose of the builder pattern is to streamline the object creation process. It is different from the factory pattern: the builder pattern is useful when the creation process is complex and requires an arbitrary number of inputs. One famous example is the StringBuilder class in Java, that is used to build strings (duh):

Given the OOP nature of the builder pattern, you may think that to implement it you have to use classes. But I am here to prove you wrong: this pattern is perfectly valid for functional languages such as JavaScript, thanks to the prototypical delegation and this binding.

Implementing the builder pattern in JavaScript

To implement the builder pattern, we are going to use the constructor functions, the new keyword and this binding. Note that these features have nothing to do with classes, their behavior is not related to classes and they were introduced way before classes were. As a use-case for the builder pattern, imagine that you have to perform a lot of common HTTP requests to the same server with the same header and would like to simplify the API. Observe this code:

First, note the `ClientBuilder` function. It returns an object that holds all the building logic. It exposes functions forBaseUrl, withHeaders, usingFetch, usingAxios, and, build. You use these functions to specify the desired behaviour and then use build to get the complete client. The Client function is a constructor function, that accepts baseUrl, headers and executor, binds it via this and exposes functions post and get. You will then use these functions like this:

This wraps up our discussion about the builder pattern in JavaScript, hope you found it useful. Let me know what other design patterns you want me to cover!

JavaScript in Plain English

Michael Krasnov

Written by

Your next mentor, employee, employer, consultant or simply a friend. I write better text so you can write better code.

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

More from JavaScript in Plain English

7 really good reasons not to use TypeScript

More from JavaScript in Plain English

More from JavaScript in Plain English

5 Secret features of JSON.stringify()

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade