Design Patterns

Common design patterns in frontend development

Design Patterns Interview Questions

Master common design patterns used in JavaScript and React development.

1. Singleton Pattern

class Singleton {
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    Singleton.instance = this;
    this.data = [];
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true

2. Observer Pattern

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(cb => cb(data));
    }
  }
}

const emitter = new EventEmitter();
emitter.on('login', user => console.log(user));
emitter.emit('login', { id: 1, name: 'John' });

3. Factory Pattern

class UserFactory {
  createUser(type) {
    switch (type) {
      case 'admin':
        return new Admin();
      case 'user':
        return new User();
      default:
        return new Guest();
    }
  }
}

const factory = new UserFactory();
const admin = factory.createUser('admin');

4. Module Pattern

const Calculator = (function() {
  let result = 0;  // Private variable

  return {
    add(n) {
      result += n;
      return this;
    },
    subtract(n) {
      result -= n;
      return this;
    },
    getResult() {
      return result;
    }
  };
})();

Calculator.add(5).subtract(2).getResult(); // 3

Learn More

Key Takeaways:

Singleton for single shared instances
Observer for event-driven architecture
Factory for object creation logic
Module for encapsulation and privacy
Choose patterns based on problem context