Examples Of Practical Javascript Object Oriented Design Patterns

JavaScript is a powerful and flexible programming language that allows developers to create sophisticated web applications with ease. One key concept that can help make your JavaScript code more organized and maintainable is object-oriented design patterns. In this article, we will explore some practical examples of JavaScript object-oriented design patterns that you can use to improve your code.

1. Constructor Pattern:
The constructor pattern is a fundamental design pattern in JavaScript that involves using a constructor function to create new objects. Here's an example:

function Car(make, model) {
  this.make = make;
  this.model = model;
}

const myCar = new Car('Toyota', 'Corolla');

In this example, we define a `Car` constructor function that takes `make` and `model` parameters and assigns them to the newly created `myCar` object.

2. Module Pattern:
The module pattern is another popular design pattern in JavaScript that allows you to create private and public encapsulation. Here's an example:

const Calculator = (function() {
  let total = 0;

  function add(num) {
    total += num;
  }

  function getTotal() {
    return total;
  }

  return {
    add,
    getTotal
  };
})();

Calculator.add(5);
console.log(Calculator.getTotal()); // Output: 5

In this example, we use an IIFE (Immediately Invoked Function Expression) to create a module that contains private variables (`total`) and public methods (`add` and `getTotal`).

3. Singleton Pattern:
The singleton pattern is used to restrict a class to only one instance and provide a global point of access to it. Here's an example:

const Settings = (function() {
  let instance;

  function createInstance() {
    const settings = {
      theme: 'light',
      fontSize: 14
    };
    return settings;
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

const settings1 = Settings.getInstance();
const settings2 = Settings.getInstance();

console.log(settings1 === settings2); // Output: true

In this example, the `Settings` module only allows one instance to be created and provides a way to access that instance globally.

By incorporating these practical JavaScript object-oriented design patterns into your code, you can enhance code organization, reusability, and maintainability. Experiment with these patterns in your projects and see how they can improve your coding practices. Remember, understanding and applying design patterns can elevate your programming skills to the next level. Happy coding!