Deep Dive Into Design Patterns With JavaScript. The Builder Pattern

Deep Dive Into Design Patterns With JavaScript. The Builder Pattern

The builder design pattern allows for the creation of a complex object in a procedural manner. Imagine a scenario where you’re creating an application that allows the user to build their own house. Since you want your users to like your product, you provide them a tremendous amount of options. They can add pools, gardens, internet, walls, and even a roof (imagine that, a real roof!). There are several ways to approach this from a code perspective.

Builder Pattern

The builder pattern allows for the creation of a complex object in a procedural manner.

Imagine a scenario where you’re creating an application that allows the user to build their own house. Since you want your users to like your product, you provide them a tremendous amount of options. They can add pools, gardens, internet, walls, and even a roof (imagine that, a real roof!). There are several ways to approach this from a code perspective.

The first solution is by creating a monster constructor for the House class. This constructor can accept a massive list of parameters that define what properties a given House class has. This has an obvious drawback. As more options are added the constructor grows accordingly; very quickly creating an ugly constructor. Additionally, many times, some parameters will not be used thereby adding unnecessary complexity to the House class.

class House {  
  constructor(walls, pool, roof, garden, internet, ...) {...}
}

The second solution is using classical inheritance. You can create a base House class, and create sub-classes for every variation from there. You can probably tell right away that this approach won’t scale at all. The more options you add to the house (like a bathroom perhaps), the more sub-classes you’ll need to add.

gang-of-four javascript builder-pattern design-patterns programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Builder Pattern in Javascript — With a Simple Example

Many times, we may come across a scenario where we want to construct complex objects which involves computing multiple sequential operations. In such a scenario, a builder pattern can be used. In this article, we will go through a simple example as to how to implement builder pattern in Javascript.

JavaScript — Build your object a builder!

The builder pattern. When developing your app, sometimes you may encounter difficulties in constructing complex objects.

JavaScript Design Patterns - Observer Pattern

JavaScript Design Patterns - Observer Pattern. The Observer pattern is a design pattern that offers a subscription model in which objects (known as 'observers') can subscribe to an event (known as a 'subject') and get notified when the event occurs (or when the subject sends a signal). This pattern is the cornerstone of event driven programming.

JavaScript Design Patterns - Iterator Pattern

JavaScript Design Patterns - Iterator Pattern. The Iterator pattern is a pattern that allows you to effectively loop over a collection of objects. A common programming task is to traverse and manipulate a collection of objects. These collections may be stored as an array or perhaps something more complex, such as a tree or graph structure. In addition, you may need to access the items in the collection in a certain order, such as, front to back, back to front, depth first (as in tree searches), skip evenly numbered objects, etc.

JavaScript Design Patterns - Strategy Pattern

JavaScript Design Patterns - Strategy Pattern. The Strategy pattern is a behavioral design pattern that enables you to define a group (or family) of closely-related algorithms (known as strategies). The strategy pattern allows you to swap strategies in and out for each other as needed at runtime.