Closures are fundamental to JavaScript. Here’s how they work and when to use them.

What is a Closure?

A closure gives you access to an outer function’s scope from an inner function.

function outer() {
    const name = 'JavaScript';
    
    function inner() {
        console.log(name); // Accesses outer scope
    }
    
    return inner;
}

const innerFunc = outer();
innerFunc(); // "JavaScript"

Common Patterns

Module Pattern

const counter = (function() {
    let count = 0;
    
    return {
        increment: () => ++count,
        decrement: () => --count,
        getCount: () => count
    };
})();

Function Factories

function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
double(5); // 10

Common Pitfalls

Loop with Closures

// Bad: All log same value
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100); // 3, 3, 3
}

// Good: Use let or IIFE
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100); // 0, 1, 2
}

Best Practices

  1. Understand scope chain
  2. Avoid memory leaks
  3. Use closures for encapsulation
  4. Be careful in loops
  5. Use modern alternatives when possible

Conclusion

Master closures to write better JavaScript! 🔒