🏗️ Day 35 — JavaScript Design Patterns

Hi Guys Welcome to Day 35 👷‍♂️ Today we’ll step into a crucial part of professional coding — Design Patterns. They’re not about syntax, but about how you think and structure your code. Every large JavaScript app — from Netflix to Amazon — uses design patterns to organize complex logic, avoid repetition, and make code easier to maintain.

🧠 1️⃣ What Are Design Patterns?

Design patterns are proven solutions to common programming problems. They act as blueprints for writing cleaner, more scalable, and more maintainable code. Think of them as templates — you don’t copy-paste them, you adapt them.

⚙️ 2️⃣ The Importance of Design Patterns

• They make code readable and predictable.
• They promote reusability and consistency.
• They make collaboration among developers easier.
• They prepare you for system design interviews.

🏗️ 3️⃣ The Module Pattern

Used to create private and public data or functions — ideal for encapsulation. Before ES6 modules, this was done using IIFEs (Immediately Invoked Function Expressions).

const CounterModule = (function(){
  let count = 0; // private variable

  function increment(){
    count++;
    console.log(count);
  }

  function reset(){
    count = 0;
    console.log("Reset:", count);
  }

  return { increment, reset };
})();

CounterModule.increment(); // 1
CounterModule.increment(); // 2
CounterModule.reset(); // Reset: 0

Here, count is private. Only increment and reset are exposed — classic encapsulation.

🏭 4️⃣ The Factory Pattern

The Factory pattern lets you create different objects without specifying the exact class or constructor each time.

function CarFactory(type) {
  switch(type) {
    case "sedan": return { type, wheels: 4, doors: 4 };
    case "sports": return { type, wheels: 4, doors: 2 };
    default: return { type: "generic", wheels: 4 };
  }
}

const car1 = CarFactory("sedan");
const car2 = CarFactory("sports");

console.log(car1, car2);

Factories abstract object creation — ideal when working with APIs, themes, or product generators.

🧩 5️⃣ The Singleton Pattern

Ensures only one instance of a class exists. Useful for global settings, loggers, or databases.

const AppConfig = (function(){
  let instance;

  function createInstance(){
    return { theme: "dark", version: "1.0.0" };
  }

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

const config1 = AppConfig.getInstance();
const config2 = AppConfig.getInstance();

console.log(config1 === config2); // true

🧱 6️⃣ The Observer Pattern

When one object changes, others should automatically update. Think notifications, live updates, or chat systems.

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(fn) { this.observers.push(fn); }
  unsubscribe(fn) { this.observers = this.observers.filter(obs => obs !== fn); }
  notify(data) { this.observers.forEach(fn => fn(data)); }
}

const subject = new Subject();
subject.subscribe(data => console.log("Observer 1:", data));
subject.subscribe(data => console.log("Observer 2:", data));

subject.notify("New blog post published!");

📦 7️⃣ Real-Life Usage

• Module Pattern → used in ES Modules, Node.js, React hooks.
• Factory Pattern → UI component creation in React.
• Singleton Pattern → app-wide states (Redux store).
• Observer Pattern → Event listeners, RxJS, and Pub/Sub systems.

🎯 Summary

Design patterns make your code predictable and extendable — key for scaling apps. Tomorrow, you’ll explore Web APIs — how JavaScript communicates with browsers to access features like speech, camera, and geolocation!

← Prev Next →