Writing working code is easy. Writing code that lasts for years, that other developers can understand, that can scale without collapsing, that is hard. Senior developers know something that juniors do not. They know software architecture matters more than syntax. They know design principles transform messy code into elegant solutions. They know javascript design patterns . Design patterns are reusable solutions to common programming problems. They are not code libraries. They are templates. Blueprints. Best practices baked into templates. This essential javascript design patterns guide will teach you the patterns every senior developer must know. You will learn creational patterns like Singleton and Factory. Structural patterns like Decorator. Behavioral patterns like Observer and Pub/Sub. The history of javascript started in 1995 when Brendan Eich created the language. Patterns emerged as applications grew complex. javascript ES6 features made some patterns easier. asynchronous javascript explained patterns help with modern async code. Let me start with why patterns matter.
Why Design Patterns Matter for Senior Developers
Junior developers solve the immediate problem. Senior developers solve the problem and design for future problems. Code maintainability separates seniors from juniors. Maintainable code is easy to read, easy to modify, and easy to debug. Scalability means code handles growth. More features, more users, more developers. Refactoring is changing code structure without changing behavior. Patterns guide refactoring. Code organization patterns keep files and modules structured. Architectural patterns shape entire applications. The javascript design patterns in this guide are battle tested. They have been used for decades in millions of applications. Learning them makes you a better developer. It gives you a shared vocabulary with other seniors. You say “Singleton” and they understand exactly what you mean. For javascript beginner guide readers moving to intermediate, patterns are the next step.
Singleton Pattern One and Only One
The Singleton pattern ensures a class has only one instance. It provides a global access point to that instance. This is useful for things that should be unique. A configuration manager. A database connection pool. A logging service. Creating multiple instances would cause problems. Here is a Singleton in JavaScript:
class DatabaseConnection {
constructor() {
if (DatabaseConnection.instance) {
return DatabaseConnection.instance;
}
this.connection = this.createConnection();
DatabaseConnection.instance = this;
}
createConnection() {
console.log("Creating new database connection");
return { connected: true, timestamp: new Date() };
}
query(sql) {
console.log(Executing: ${sql});
return [];
}
}
const db1 = new DatabaseConnection();
const db2 = new DatabaseConnection();
console.log(db1 === db2); // true
The constructor checks if an instance already exists. If yes, it returns that instance. If no, it creates one. The Singleton pattern is controversial. Some call it an anti pattern because it introduces global state. Global state makes testing difficult. Use Singleton sparingly. In modern JavaScript, modules are singletons by default. When you import a module, you get the same instance everywhere. The javascript design patterns community still values Singleton for specific cases.
Module Pattern Encapsulation and Privacy
Before ES6 modules, JavaScript had no built in module system. The Module pattern gave us encapsulation and privacy. It uses closures to create private variables and methods. Only what you return is public.
const UserModule = (function() {
// Private variables
let users = [];
let nextId = 1;
// Private functions
function validateUser(user) {
return user.name && user.name.length > 0;
}
// Public API
return {
addUser: function(name) {
if (!name) return false;
const user = { id: nextId++, name: name };
users.push(user);
return user;
},
getUsers: function() {
return [...users]; // Return a copy
},
getUserCount: function() {
return users.length;
}
};
})();
UserModule.addUser("Alice");
UserModule.addUser("Bob");
console.log(UserModule.getUsers()); // [{id:1,name:"Alice"}, {id:2,name:"Bob"}]
console.log(UserModule.users); // undefined (private)
The Module pattern creates a closure. Variables inside cannot be accessed from outside. This is true encapsulation. Modern JavaScript uses ES6 modules instead. But the concept is the same. The javascript design patterns community values the Module pattern for teaching encapsulation principles.
Observer Pattern and Pub/Sub
The Observer pattern defines a one to many dependency. When one object changes state, all its dependents are notified automatically. This is the foundation of reactive programming. The Pub/Sub (Publish Subscribe) pattern is a variation. Here is a simple Observer implementation:
class EventEmitter {
constructor() {
this.events = {};
}
subscribe(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}
this.events[eventName].push(callback);
return () => this.unsubscribe(eventName, callback);
}
unsubscribe(eventName, callback) {
if (this.events[eventName]) {
this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
}
}
emit(eventName, data) {
if (this.events[eventName]) {
this.events[eventName].forEach(callback => callback(data));
}
}
}
const emitter = new EventEmitter();
const unsubscribe = emitter.subscribe("userLoggedIn", (user) => {
console.log(User ${user.name} just logged in);
});
emitter.emit("userLoggedIn", { name: "Alice" });
unsubscribe(); // Stop listening
The Observer pattern decouples senders from receivers. The emitter does not know which components are listening. Components can subscribe and unsubscribe dynamically. This is how React Context, Vue’s event bus, and Node.js EventEmitter work. The Pub/Sub pattern adds a message broker between publishers and subscribers. For javascript design patterns , Observer and Pub/Sub are essential for building loosely coupled systems.
Factory Pattern Creating Objects Without Classes
The Factory pattern creates objects without specifying the exact class. A factory function returns different objects based on input. This is especially useful for creational patterns where object creation is complex.
class Car {
constructor(model, price) {
this.type = "car";
this.model = model;
this.price = price;
}
}
class Bike {
constructor(model, price) {
this.type = "bike";
this.model = model;
this.price = price;
}
}
class Truck {
constructor(model, price) {
this.type = "truck";
this.model = model;
this.price = price;
}
}
function vehicleFactory(type, model, price) {
switch (type) {
case "car": return new Car(model, price);
case "bike": return new Bike(model, price);
case "truck": return new Truck(model, price);
default: throw new Error("Unknown vehicle type");
}
}
const myCar = vehicleFactory("car", "Tesla Model 3", 45000);
const myBike = vehicleFactory("bike", "Yamaha R1", 17000);
The Factory pattern centralizes creation logic. If creation becomes more complex, you change one place. The calling code only knows the factory. In modern JavaScript, factory functions are everywhere. React’s createElement is a factory. Vue’s createApp is a factory. For javascript design patterns , Factory reduces duplication and improves flexibility.
Prototype Pattern Cloning Objects
The Prototype pattern creates new objects by cloning existing ones. This is useful when creating an object is expensive. JavaScript has native prototype support. Every object has a prototype. Here is the Prototype pattern:
const carPrototype = {
type: "car",
start: function() {
console.log(${this.model} is starting);
},
clone: function() {
return Object.create(this);
}
};
const tesla = Object.create(carPrototype);
tesla.model = "Tesla Model 3";
tesla.price = 45000;
const bmw = Object.create(carPrototype);
bmw.model = "BMW M3";
bmw.price = 70000;
tesla.start(); // "Tesla Model 3 is starting"
bmw.start(); // "BMW M3 is starting"
const clonedCar = tesla.clone();
clonedCar.model = "Cloned Tesla";
The Prototype pattern leverages JavaScript’s prototypal inheritance. Object.create() creates a new object with the specified prototype. The clone method creates copies without calling constructors. For javascript design patterns , Prototype is powerful when object creation is expensive or when you need many similar objects.
Decorator Pattern Wrapping and Extending
The Decorator pattern attaches new behaviors to objects by wrapping them. It is a structural pattern. Decorators provide a flexible alternative to subclassing. You can add features without changing the original object.
class Coffee {
cost() { return 5; }
description() { return "Plain coffee"; }
}
class MilkDecorator {
constructor(coffee) {
this.coffee = coffee;
}
cost() {
return this.coffee.cost() + 1.5;
}
description() {
return this.coffee.description() + ", milk";
}
}
class SugarDecorator {
constructor(coffee) {
this.coffee = coffee;
}
cost() {
return this.coffee.cost() + 0.5;
}
description() {
return this.coffee.description() + ", sugar";
}
}
let myCoffee = new Coffee();
myCoffee = new MilkDecorator(myCoffee);
myCoffee = new SugarDecorator(myCoffee);
console.log(myCoffee.cost()); // 7
console.log(myCoffee.description()); // "Plain coffee, milk, sugar"
In JavaScript, higher order functions often implement the Decorator pattern. Higher order components in React decorate components with additional behavior. For javascript design patterns , Decorator keeps classes focused on single responsibilities.
MVC Pattern Model View Controller
The MVC (Model-View-Controller) pattern separates application concerns. Model manages data and business logic. View handles UI and presentation. Controller processes user input and updates the model. This architectural pattern is the foundation of many frameworks.
// Model
class TodoModel {
constructor() {
this.todos = [];
this.listeners = [];
}
addTodo(text) {
this.todos.push({ id: Date.now(), text, completed: false });
this.notify();
}
toggleTodo(id) {
const todo = this.todos.find(t => t.id === id);
if (todo) todo.completed = !todo.completed;
this.notify();
}
subscribe(listener) {
this.listeners.push(listener);
}
notify() {
this.listeners.forEach(listener => listener(this.todos));
}
}
// View
class TodoView {
constructor(controller) {
this.controller = controller;
this.app = document.getElementById("app");
}
render(todos) {
`this.app.innerHTML = “
<input id="todoInput" type="text">
<button id="addBtn">Add Todo</button>
`<ul>${todos.map(todo => “
<li data-id="${todo.id}" style="text-decoration:${todo.completed ? 'line-through' : 'none'}">
${todo.text} <button class="toggleBtn">Toggle</button></li>
“).join(“”)}</ul>`
;
document.getElementById("addBtn").onclick = () => {
const input = document.getElementById("todoInput");
this.controller.addTodo(input.value);
input.value = "";
};
document.querySelectorAll(".toggleBtn").forEach(btn => {
btn.onclick = (e) => {
const li = e.target.parentElement;
const id = parseInt(li.dataset.id);
this.controller.toggleTodo(id);
};
});
}
}
// Controller
class TodoController {
constructor(model, view) {
this.model = model;
this.view = view;
this.model.subscribe((todos) => this.view.render(todos));
}
addTodo(text) {
if (text.trim()) this.model.addTodo(text);
}
toggleTodo(id) {
this.model.toggleTodo(id);
}
}
const model = new TodoModel();
const view = new TodoView();
const controller = new TodoController(model, view);
MVC separates concerns. Models know nothing about views. Views know nothing about models. Controllers bridge them. This code organization pattern makes large applications maintainable. Modern frameworks like Angular, React (with Redux), and Vue (with Vuex) use variations of MVC.
Frequently Asked Questions (FAQs)
Q: What are javascript design patterns and why are they important?
Design patterns are reusable solutions to common programming problems. They improve code maintainability, scalability, and team communication.
Q: What is the difference between the Module pattern and ES6 modules?
The Module pattern uses closures for privacy. ES6 modules use file based privacy with explicit import/export. ES6 modules are now preferred.
Q: When should I use the Singleton pattern?
Use Singleton when you need exactly one instance of a class, like a configuration manager or database connection pool.
Q: What is the difference between Observer and Pub/Sub?
Observer directly notifies subscribers. Pub/Sub uses a central broker between publishers and subscribers, offering looser coupling.
Q: Which design pattern is most used in modern JavaScript frameworks?
The Observer pattern (for reactivity), Factory pattern (for component creation), and Module pattern (for code organization) are extremely common.
Conclusion
You have mastered the most important javascript design patterns for senior developers. The Singleton pattern ensures single instances. The Module pattern provides encapsulation. The Observer pattern and Pub/Sub enable reactive updates. The Factory pattern centralizes object creation. The Prototype pattern clones objects efficiently. The Decorator pattern adds behavior through wrapping. The MVC (Model-View-Controller) pattern separates concerns for large applications. These structural patterns , behavioral patterns , and creational patterns are your toolkit for professional development. The history of javascript and Brendan Eich gave us the language. The community gave us these patterns. javascript ES6 features made some patterns easier. asynchronous javascript explained patterns handle async flows. The future of software engineering demands scalability and code maintainability . Design patterns deliver both. Go write code that lasts. Your future self and your teammates will thank you.
