Practical Closure Patterns

1. Introduction

Closures are more than just a theoretical concept. They are a practical tool used to implement several design patterns in JavaScript, such as the Module Pattern, Memoization Caches, and Private State.

2. Why It Matters

Using closure design patterns lets you hide implementation details, cache expensive calculations, and write self-contained modules, helping you build clean and performant applications.

3. Real-World Analogy

Think of a Smart Office Desk:

• Module Pattern (Locked Filing Cabinet): A cabinet with a locked drawer for files (private state) and a top tray for forms (public API). You interact with the tray, while the cabinet hides the files.
• Memoization (Frequently Asked Questions Sheet): A sheet where the receptionist writes down answers to common questions. If a question is asked again, the receptionist reads the answer from the sheet instead of calling a technician to recalculate it.

4. Core Closure Patterns

Let's explore the three primary patterns:

1. The Module Pattern:

Uses closures to create public APIs while hiding internal implementation details, simulating classes with private properties.

2. Memoization (Caching):

Wraps a function with a cache object inside a closure. If the function is called with the same arguments again, the cached result is returned instead of re-running the calculation.

5. Practical Example

Here is a complete, working implementation of a memoized Fibonacci calculator:

6. Common Mistakes

• Unbounded cache size: In memoization, the cache grows indefinitely as the function is called with new arguments. This can lead to memory exhaustion in production. Implement a size limit or clean up strategies (like LRU caching).

7. Quick Quiz

8. Scenario-Based Challenge

9. Debugging Exercise

function badMemoize(fn) {
  const cache = new Map();
  return function(arg) {
    if (cache.has(arg)) {
      return cache.get(arg);
    }
    const result = fn(arg);
    cache.set(arg, result);
    return result;
  };
}
const check = badMemoize(x => x.id);
check({ id: 1 }); // runs calculation
check({ id: 1 }); // runs calculation again! Why?

function goodMemoize(fn) {
  const cache = new Map();
  return function(arg) {
    const key = JSON.stringify(arg);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn(arg);
    cache.set(key, result);
    return result;
  };
}

10. Interview Questions

11. Production Considerations

• • Cache Eviction: Always implement cache eviction policies (like Least Recently Used - LRU) for memoization caches in long-running applications (like Node.js servers) to prevent memory leaks.