JavaScript ES6+

Design Patterns

Common patterns for better code organization

Find videos you like?

Save to resource drawer for future reference!

Design Patterns: Proven Solutions

Design patterns are reusable solutions to common problems. They're not code you copy-paste, but approaches that help organize and structure your code!

Categories of Patterns

Creational - How objects are created
Structural - How objects relate to each other
Behavioral - How objects communicate

Module Pattern

Encapsulate private data and methods

Private + Public Interface

// IIFE creates private scope
const Calculator = (function() {
  // Private variables
  let result = 0;
  
  // Private function
  function log(operation, value) {
    console.log(`${operation}: ${value}`);
  }
  
  // Public API
  return {
    add(value) {
      result += value;
      log('Add', value);
      return this;
    },
    subtract(value) {
      result -= value;
      log('Subtract', value);
      return this;
    },
    getResult() {
      return result;
    },
    reset() {
      result = 0;
      return this;
    }
  };
})();

// Usage
Calculator.add(5).subtract(2).add(10);
console.log(Calculator.getResult()); // 13
// result is private - can't access directly
console.log(Calculator.result); // undefined

Module Pattern with ES6 Modules

Modern approach using closures (ES6 modules simulated)

javascript

code

DarkEditable

// Simulating module pattern with IIFE
const CounterModule = (() => {
  // Private variable
  let count = 0;
  
  // Public API (simulating exports)
  return {
    increment() {
      count++;
      console.log('Incremented:', count);
    },
    decrement() {
      count--;
      console.log('Decremented:', count);
    },
    getCount() {
      return count;
    }
  };
})();

// Using the module (simulating import)
CounterModule.increment();
CounterModule.increment();
console.log('Count:', CounterModule.getCount()); // 2
// count variable is private, not accessible
console.log('Private count accessible?', CounterModule.count); // undefined

// Revealing Module Pattern
const UserModule = (() => {
  // Private
  const users = [];
  
  function validateUser(user) {
    return user.name && user.email;
  }
  
  // Reveal selected functions
  return {
    addUser(user) {
      if (validateUser(user)) {
        users.push(user);
        console.log('User added:', user.name);
        return true;
      }
      console.log('Invalid user');
      return false;
    },
    getAllUsers() {
      return [...users]; // Return copy to prevent mutation
    },
    getUserCount() {
      return users.length;
    }
  };
})();

UserModule.addUser({ name: 'Alice', email: 'alice@example.com' });
UserModule.addUser({ name: 'Bob', email: 'bob@example.com' });
console.log('All users:', UserModule.getAllUsers());
console.log('User count:', UserModule.getUserCount());

// In actual ES6 modules:
// export function increment() { ... }
// import { increment } from './counter.js';

Console Output

Click "Run Code" to see output here...

Singleton Pattern

Only one instance exists

Single Shared Instance

class Database {
  constructor() {
    if (Database.instance) {
      return Database.instance;
    }
    
    this.connection = 'Connected to DB';
    Database.instance = this;
  }
  
  query(sql) {
    console.log(`Executing: ${sql}`);
  }
}

// Both get the same instance
const db1 = new Database();
const db2 = new Database();

console.log(db1 === db2); // true (same instance!)

// With ES6 modules (natural singleton)
// config.js
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

export default config;

// Any file importing config gets the same object

Factory Pattern

Create objects without specifying exact class

javascript

code

DarkEditable

// Factory Pattern
class Car {
  constructor(options) {
    this.doors = options.doors || 4;
    this.state = options.state || 'brand new';
    this.color = options.color || 'silver';
  }
}

class Truck {
  constructor(options) {
    this.wheels = options.wheels || 6;
    this.state = options.state || 'used';
    this.color = options.color || 'blue';
  }
}

class VehicleFactory {
  createVehicle(type, options) {
    switch (type) {
      case 'car':
        return new Car(options);
      case 'truck':
        return new Truck(options);
      default:
        throw new Error('Unknown vehicle type');
    }
  }
}

// Usage
const factory = new VehicleFactory();
const car = factory.createVehicle('car', { color: 'red' });
const truck = factory.createVehicle('truck', { wheels: 8 });

// Simple function factory
function createUser(type) {
  const users = {
    admin: { role: 'admin', permissions: ['read', 'write', 'delete'] },
    editor: { role: 'editor', permissions: ['read', 'write'] },
    viewer: { role: 'viewer', permissions: ['read'] }
  };
  
  return (name) => ({
    name,
    ...users[type]
  });
}

const createAdmin = createUser('admin');
const alice = createAdmin('Alice');
console.log(alice); 
// { name: 'Alice', role: 'admin', permissions: [...] }

Console Output

Click "Run Code" to see output here...

Observer Pattern (Pub/Sub)

Subscribe to events and get notified

Event-Driven Communication

class EventEmitter {
  constructor() {
    this.events = {};
  }
  
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }
  
  emit(event, data) {
    const callbacks = this.events[event];
    if (callbacks) {
      callbacks.forEach(callback => callback(data));
    }
  }
  
  off(event, callback) {
    if (!this.events[event]) return;
    this.events[event] = this.events[event].filter(
      cb => cb !== callback
    );
  }
}

// Usage
const emitter = new EventEmitter();

// Subscribe
emitter.on('userLogin', (user) => {
  console.log(`${user.name} logged in`);
});

emitter.on('userLogin', (user) => {
  console.log(`Logging event for ${user.email}`);
});

// Emit event
emitter.emit('userLogin', { name: 'Alice', email: 'alice@example.com' });
// Both callbacks execute!

More Design Patterns

Strategy, Decorator, and Command patterns

javascript

code

DarkEditable

// Strategy Pattern - Different algorithms
class Shipping {
  constructor(strategy) {
    this.strategy = strategy;
  }
  
  calculate(pkg) {
    return this.strategy.calculate(pkg);
  }
}

const strategies = {
  standard: {
    calculate: (pkg) => pkg.weight * 0.5
  },
  express: {
    calculate: (pkg) => pkg.weight * 1.5
  },
  overnight: {
    calculate: (pkg) => pkg.weight * 3.0
  }
};

const parcel = { weight: 10 };
const standard = new Shipping(strategies.standard);
const express = new Shipping(strategies.express);

console.log('Standard shipping:', standard.calculate(parcel));  // 5
console.log('Express shipping:', express.calculate(parcel));   // 15

// Decorator Pattern - Add functionality
class Coffee {
  cost() {
    return 5;
  }
}

function withMilk(coffee) {
  const cost = coffee.cost();
  coffee.cost = () => cost + 2;
  return coffee;
}

function withSugar(coffee) {
  const cost = coffee.cost();
  coffee.cost = () => cost + 1;
  return coffee;
}

let myCoffee = new Coffee();
myCoffee = withMilk(myCoffee);
myCoffee = withSugar(myCoffee);
console.log(myCoffee.cost()); // 8

// Command Pattern - Encapsulate actions
class Command {
  constructor(execute, undo) {
    this.execute = execute;
    this.undo = undo;
  }
}

class Calculator {
  constructor() {
    this.value = 0;
    this.history = [];
  }
  
  executeCommand(command) {
    this.history.push(command);
    command.execute();
  }
  
  undo() {
    const command = this.history.pop();
    if (command) {
      command.undo();
    }
  }
}

const calc = new Calculator();

const addCommand = new Command(
  () => { calc.value += 10; },
  () => { calc.value -= 10; }
);

calc.executeCommand(addCommand);
console.log(calc.value); // 10
calc.undo();
console.log(calc.value); // 0

Console Output

Click "Run Code" to see output here...

Real-World Example: State Management

Combining patterns for app state

javascript

code

DarkEditable

// State management with multiple patterns
class Store {
  // Singleton
  constructor() {
    if (Store.instance) {
      return Store.instance;
    }
    
    this.state = {};
    this.listeners = [];
    Store.instance = this;
  }
  
  // Observer pattern
  subscribe(callback) {
    this.listeners.push(callback);
    return () => {
      this.listeners = this.listeners.filter(cb => cb !== callback);
    };
  }
  
  notify() {
    this.listeners.forEach(callback => callback(this.state));
  }
  
  // Command pattern
  dispatch(action) {
    this.state = this.reducer(this.state, action);
    this.notify();
  }
  
  // Strategy pattern
  reducer(state, action) {
    switch (action.type) {
      case 'INCREMENT':
        return { ...state, count: (state.count || 0) + 1 };
      case 'DECREMENT':
        return { ...state, count: (state.count || 0) - 1 };
      default:
        return state;
    }
  }
  
  getState() {
    return this.state;
  }
}

// Usage (like Redux!)
const store = new Store();

// Subscribe to changes
const unsubscribe = store.subscribe((state) => {
  console.log('State updated:', state);
});

// Dispatch actions
store.dispatch({ type: 'INCREMENT' });
// State updated: { count: 1 }

store.dispatch({ type: 'INCREMENT' });
// State updated: { count: 2 }

store.dispatch({ type: 'DECREMENT' });
// State updated: { count: 1 }

// Same instance everywhere
const store2 = new Store();
console.log(store === store2); // true

// Unsubscribe when done
unsubscribe();

Console Output

Click "Run Code" to see output here...

Key Takeaways

📦

Module Pattern

Encapsulate private data
ES6 modules are natural singletons

🏭

Factory Pattern

Create objects dynamically
Hide complex creation logic

👁️

Observer Pattern

Event-driven communication
Pub/Sub, React, Vue use this

🎯

Singleton Pattern

One instance only
Config, state management

Pro Tip

Don't overuse patterns! Use them when they solve a real problem. Modern JavaScript (ES6+) and frameworks often provide better built-in solutions.

Previous Topic

Proxy & Reflect

Intercepting and customizing object operations.

Next Topic

Functional Programming

Pure functions, immutability, composition, and functional concepts.

Ask a Question

Have a question about Design Patterns? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript ES6+

Design Patterns

Common patterns for better code organization

Find videos you like?

Save to resource drawer for future reference!

Design Patterns: Proven Solutions

Design patterns are reusable solutions to common problems. They're not code you copy-paste, but approaches that help organize and structure your code!

Categories of Patterns

Creational - How objects are created
Structural - How objects relate to each other
Behavioral - How objects communicate

Module Pattern

Encapsulate private data and methods

Private + Public Interface

// IIFE creates private scope
const Calculator = (function() {
  // Private variables
  let result = 0;
  
  // Private function
  function log(operation, value) {
    console.log(`${operation}: ${value}`);
  }
  
  // Public API
  return {
    add(value) {
      result += value;
      log('Add', value);
      return this;
    },
    subtract(value) {
      result -= value;
      log('Subtract', value);
      return this;
    },
    getResult() {
      return result;
    },
    reset() {
      result = 0;
      return this;
    }
  };
})();

// Usage
Calculator.add(5).subtract(2).add(10);
console.log(Calculator.getResult()); // 13
// result is private - can't access directly
console.log(Calculator.result); // undefined

Module Pattern with ES6 Modules

Modern approach using closures (ES6 modules simulated)

javascript

code

DarkEditable

// In actual ES6 modules:
// export function increment() { ... }
// import { increment } from './counter.js';

Console Output

Click "Run Code" to see output here...

Singleton Pattern

Only one instance exists

Single Shared Instance

class Database {
  constructor() {
    if (Database.instance) {
      return Database.instance;
    }
    
    this.connection = 'Connected to DB';
    Database.instance = this;
  }
  
  query(sql) {
    console.log(`Executing: ${sql}`);
  }
}

// Both get the same instance
const db1 = new Database();
const db2 = new Database();

console.log(db1 === db2); // true (same instance!)

// With ES6 modules (natural singleton)
// config.js
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

export default config;

// Any file importing config gets the same object

Factory Pattern

Create objects without specifying exact class

javascript

code

DarkEditable

// Factory Pattern
class Car {
  constructor(options) {
    this.doors = options.doors || 4;
    this.state = options.state || 'brand new';
    this.color = options.color || 'silver';
  }
}

class Truck {
  constructor(options) {
    this.wheels = options.wheels || 6;
    this.state = options.state || 'used';
    this.color = options.color || 'blue';
  }
}

// Usage
const factory = new VehicleFactory();
const car = factory.createVehicle('car', { color: 'red' });
const truck = factory.createVehicle('truck', { wheels: 8 });

const createAdmin = createUser('admin');
const alice = createAdmin('Alice');
console.log(alice); 
// { name: 'Alice', role: 'admin', permissions: [...] }

Console Output

Click "Run Code" to see output here...

Observer Pattern (Pub/Sub)

Subscribe to events and get notified

Event-Driven Communication

class EventEmitter {
  constructor() {
    this.events = {};
  }
  
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }
  
  emit(event, data) {
    const callbacks = this.events[event];
    if (callbacks) {
      callbacks.forEach(callback => callback(data));
    }
  }
  
  off(event, callback) {
    if (!this.events[event]) return;
    this.events[event] = this.events[event].filter(
      cb => cb !== callback
    );
  }
}

// Usage
const emitter = new EventEmitter();

// Subscribe
emitter.on('userLogin', (user) => {
  console.log(`${user.name} logged in`);
});

emitter.on('userLogin', (user) => {
  console.log(`Logging event for ${user.email}`);
});

// Emit event
emitter.emit('userLogin', { name: 'Alice', email: 'alice@example.com' });
// Both callbacks execute!