How to Use JavaScript Design Patterns

JavaScript design patterns provide proven solutions to common problems in software development. Understanding and applying these patterns will allow you to write better, more efficient JavaScript code.

Introduction to JavaScript Design Patterns

The concepts contained in JavaScript design patterns serve to guide you on how to beat common issues you will face as a JavaScript developer.

You should understand the underlying abstractions behind the patterns, so you can apply them to your particular problem. You should also be able to identify when any of said patterns can be useful to your code.

The Module Pattern

The Module pattern, which provides encapsulation, is part of JavaScript’s module system. It provides a way to secure private data and behavior within a module while exposing a public API. It allows you to create self-contained module objects with private and public access levels.

This is a bit like how you can use access modifiers on a class in a language like Java or C++.

In JavaScript, you can implement the Module pattern using closures.

By using a closure to enclose private members (functions, variables, data), you create a scope where these members are accessible but not directly exposed to the outside world. This helps to achieve encapsulation, keeping the internal details hidden from external code.

Additionally, returning a public API from the closure allows private access to certain functions or properties that you want to expose as part of the module’s interface.

This will give you control over what parts of the module are accessible to other parts of the code base. That maintains a clear boundary between public and private functionality.

Here is an example:

 const ShoppingCartModule = (function () {
  
  let cartItems = [];
  
  function calculateTotalItems() {
    return cartItems.reduce((total, item) => total + item.quantity, 0);
  }
  
  return {
    addItem(item) {
      cartItems.push(item);
    },
    getTotalItems() {
      return calculateTotalItems();
    },
    clearCart() {
      cartItems = [];
    }
  };
})();

ShoppingCartModule.addItem({ name: 'Product 1', quantity: 2 });
ShoppingCartModule.addItem({ name: 'Product 2', quantity: 1 });
console.log(ShoppingCartModule.getTotalItems()); 
ShoppingCartModule.clearCart();
console.log(ShoppingCartModule.getTotalItems()); 
 

In this example, the ShoppingCartModule represents a module created using the module pattern. The code execution goes like this:

1. The IIFE wraps the entire code block, creating a function that is immediately executed upon declaration. This establishes a private scope for the module’s members.
2. cartItems is a private array. It is not directly accessible from outside the module.
3. calculateTotalItems() is a private method that calculates the total number of items in the cart. It uses the reduce() method to iterate over the cartItems array and sum up the quantities of all items.
4. The module returns its public API as an object literal, exposing three public methods: addItem(), getTotalItems(), and clearCart().
5. Outside the module, you can access the module’s public methods to interact with the shopping cart functionality.

This example demonstrates how the module pattern allows you to encapsulate private data (cartItems) and behavior (calculateTotalItems) within the module while providing a public interface (addItem, getTotalItems, and clearCart) to interact with the module.

The Observer Pattern

The Observer pattern establishes a one-to-many dependency between objects. When the state of one object changes, it notifies all its dependents, and they update automatically. This pattern is particularly useful for managing event-driven interactions or decoupling components in a system.

In JavaScript, you can implement the Observer pattern using the built-in addEventListener, dispatchEvent methods, or any event handling mechanisms. By subscribing observers to events or subjects, you can notify and update them when specific events occur.

For example, you can use the Observer pattern to implement a simple notification system:

 
function NotificationSystem() {
  
  this.subscribers = [];
  
  this.subscribe = function (subscriber) {
    this.subscribers.push(subscriber);
  };
  
  this.unsubscribe = function (subscriber) {
    const index = this.subscribers.indexOf(subscriber);
    if (index !== -1) {
      this.subscribers.splice(index, 1);
    }
  };
  
  this.notify = function (message) {
    this.subscribers.forEach(function (subscriber) {
      subscriber.receiveNotification(message);
    });
  };
}

function Subscriber(name) {
  
  this.receiveNotification = function (message) {
    console.log(name + ' received notification: ' + message);
  };
}

const notificationSystem = new NotificationSystem();

const subscriber1 = new Subscriber('Subscriber 1');
const subscriber2 = new Subscriber('Subscriber 2');

notificationSystem.subscribe(subscriber1);
notificationSystem.subscribe(subscriber2);

notificationSystem.notify('New notification!');
 

The goal here is to allow multiple subscribers to receive notifications when a specific event occurs.

The NotificationSystem function represents the system that sends notifications, and the Subscriber function represents the recipients of the notifications.

The NotificationSystem has an array called subscribers to store the subscribers who want to receive notifications. The subscribe method allows subscribers to register by adding themselves to the subscribers array. The unsubscribe method would remove subscribers from the array.

The notify method in NotificationSystem iterates through the subscribers array and calls the receiveNotification method on each subscriber, allowing them to handle the notifications.

Instances of the Subscriber function represent subscribers. Each subscriber has a receiveNotification method that determines how they handle the received notifications. In this example, the method logs the received message to the console.

To use the observer pattern, create an instance of NotificationSystem. You can then create instances of Subscriber and add them to the notification system using the subscribe method.

Sending out a notification will trigger the receiveNotification method for each subscriber, and log the message for each subscriber.

The Observer pattern enables loose coupling between the notification system and subscribers, allowing for flexibility. The pattern promotes the separation of concerns which will make maintenance in event-driven systems easier.

Using Advanced JavaScript Patterns

Here are some general tips for effectively using advanced JavaScript patterns:

• Consider performance implications: Advanced patterns may introduce additional complexity, which can impact performance. Be mindful of the performance implications and optimize where necessary.
• Avoid anti-patterns: Understand the patterns thoroughly and avoid falling into anti-patterns or misusing them. Use patterns where they make sense and align with your application’s requirements.
• Follow coding conventions: Consistently follow coding conventions to maintain readability and consistency across your code base. Use meaningful variable and function names and provide clear documentation for your patterns.

Be Careful When Applying These Patterns

The Module pattern allows for encapsulation and promotes data privacy, code organization, and the creation of self-contained modules.

On the other hand, the Observer pattern facilitates communication between components by establishing a subject-subscriber relationship.

You should be aware of potential pitfalls and common mistakes when implementing advanced JavaScript patterns. Avoid overusing patterns where simpler solutions exist or creating overly complex code. Regularly review and refactor your code to ensure it remains maintainable.