Frontend Coding Interview Guide: DOM Manipulation, Async Utilities & State Management

Frontend coding interviews focus heavily on practical application engineering—building responsive UI components, managing async state, implementing event emitters, and manipulating the DOM efficiently.

Common Types of Frontend Coding Tasks

1. Building Custom Utilities: Implementing debounce, throttle, memoize, or EventEmitter.
2. DOM Traversal & Delegation: Implementing recursive element searching or handling dynamic item click delegation.
3. Data Transformations: Grouping, filtering, and sorting API payloads for UI presentation.

Implement a Custom Event Emitter (Popular Interview Problem)

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

  on(eventName, callback) {
    if (!this.events.has(eventName)) {
      this.events.set(eventName, new Set());
    }
    this.events.get(eventName).add(callback);

    // Return unsubscribe function
    return () => {
      this.events.get(eventName)?.delete(callback);
    };
  }

  emit(eventName, ...args) {
    if (!this.events.has(eventName)) return;
    for (const callback of this.events.get(eventName)) {
      callback(...args);
    }
  }
}