Module 10: Projects, Practice & Certification • Chapter 39

JS Exercises, Quizzes & 30-Day Study Plan

Transform conceptual knowledge into muscle memory: solve senior-level algorithmic drills (Debounce, Deep Equality, EventEmitter), and track your progress through the structured 30-Day JavaScript Mastery Bootcamp.

The 30-Day JavaScript Mastery Progression Map

Follow a battle-tested daily progression curve from fundamental memory mechanics to production architectural design patterns.

1. Senior Engineering Coding Drills

Below are canonical implementation challenges frequently tested in senior frontend coding evaluations:

Drill 1: Production Debounce Function

Ensures a function runs only after a specified idle period has elapsed:

function debounce(fn, delayMs = 300) {
  let timerId = null;

  return function (...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn.apply(this, args);
    }, delayMs);
  };
}

// Usage:
// searchInput.addEventListener('input', debounce(performSearch, 400));

Run in Playground

Drill 2: Deep Object Equality Checker

function deepEqual(a, b) {
  if (a === b) return true;

  if (typeof a !== 'object' || a === null || typeof b !== 'object' || b === null) {
    return false;
  }

  const keysA = Object.keys(a);
  const keysB = Object.keys(b);

  if (keysA.length !== keysB.length) return false;

  for (const key of keysA) {
    if (!keysB.includes(key) || !deepEqual(a[key], b[key])) {
      return false;
    }
  }

  return true;
}

Test in Playground

Interactive Lab: 30-Day Progress Dashboard

0% Complete

Check off the modules as you complete daily drills. Your progress is automatically persisted in your browser's local storage.

Week 1: Core Fundamentals

Day 1: Scope, Hoisting & TDZ

Day 2: Dynamic Types & Coercion

Day 3: Closures & Memory Leaks

Day 4: High-Order Array Methods

Week 2: Async & Browser APIs

Day 5: Event Loop Microtasks

Day 6: Promise Combinators

Day 7: DOM Event Delegation

Day 8: Fetch & AbortController

Hands-on Challenge

Build a Complete EventEmitter Class from Scratch

Implement a pub/sub EventEmitter with on(event, listener), emit(event, ...args), off(event, listener), and once(event, listener).

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

  on(event, listener) {
    if (!this.events.has(event)) {
      this.events.set(event, []);
    }
    this.events.get(event).push(listener);
    return () => this.off(event, listener); // Unsubscribe helper
  }

  off(event, listener) {
    const listeners = this.events.get(event);
    if (!listeners) return;
    this.events.set(event, listeners.filter(fn => fn !== listener));
  }

  emit(event, ...args) {
    const listeners = this.events.get(event);
    if (!listeners) return;
    listeners.forEach(fn => fn(...args));
  }

  once(event, listener) {
    const wrapper = (...args) => {
      this.off(event, wrapper);
      listener(...args);
    };
    return this.on(event, wrapper);
  }
}

Chapter 39 Knowledge Check

Validate your mastery of core design patterns, debounce/throttle mechanics, and pub/sub architecture.

1. What is the fundamental difference between Debouncing and Throttling a function?

Debounce runs on the GPU; Throttle runs on the CPU

Debounce waits until user activity stops for a duration; Throttle enforces a maximum execution rate (e.g. once every 200ms)

Throttle only works on touch screens

They are completely identical algorithms

2. When implementing an EventEmitter.once() method, how should the self-removal be executed?

By deleting the class constructor

Wrap the listener in a closure that unsubscribes itself before invoking the original callback

By calling process.exit()

By clearing all localStorage

3. Why does comparing two distinct objects with identical properties via a === b evaluate to false?

JavaScript object keys are unordered

Objects are compared by reference (memory address in the heap), not by value

It is a bug in V8

Only strings can be compared with triple equals

4. Which of the following is the most suitable real-world use case for a Debounce function?

A 60fps canvas game loop

An auto-completing search bar that queries a remote REST API as the user types

A window scroll listener calculating parallax position

Math.random() calculations

5. In a recursive deep equality function, what base case handles primitive comparison immediately?

if (a === b) return true;

if (a == b) return true;

if (typeof a === 'object') return true;

if (a.length === b.length) return true;

JavaScript Mastery — Chapter 39: JS Exercises, Quizzes & 30-Day Study Plan