JavaScript Closures Explained Like You’re Five

Closures are one of the trickiest yet most fundamental concepts in JavaScript. If you’ve ever found yourself confused about why certain variables persist after a function has executed, then you’re in the right place. Let’s break it down in the simplest way possible. What Are Closures? Closures occur when a function remembers the variables from its surrounding scope even after that scope has exited. In simple terms, a closure allows a function to access variables from its parent scope even after the parent function has finished executing. Think of it like this: Imagine you visit a bakery and order a custom cake. The baker (function) takes your order (variables), goes into the kitchen (parent function execution ends), and later comes back with your cake (accessing variables). The baker still remembers what you ordered even though you are no longer at the counter! Understanding Scope & Lexical Environment To understand closures, we first need to understand scope. 1. Global vs. Function Scope let globalVar = "I am global"; function testFunction() { let localVar = "I am local"; console.log(globalVar); // ✅ Accessible console.log(localVar); // ✅ Accessible } console.log(globalVar); // ✅ Accessible console.log(localVar); // ❌ Error: localVar is not defined Variables declared inside a function cannot be accessed from outside. But closures allow us to work around this limitation. 2. Lexical Scope & Closures JavaScript uses lexical scoping, meaning functions can access variables from their parent scope. function outerFunction() { let outerVar = "I am from outer function"; function innerFunction() { console.log(outerVar); // ✅ Accessible due to closure } return innerFunction; } const myClosure = outerFunction(); myClosure(); // Output: "I am from outer function" Here, innerFunction retains access to outerVar even after outerFunction has finished executing. How Closures Work (With Examples) Example 1: A Simple Closure function makeCounter() { let count = 0; return function () { count++; console.log(count); }; } const counter = makeCounter(); counter(); // Output: 1 counter(); // Output: 2 Even though makeCounter() has finished execution, the returned function retains access to count because of closures. Example 2: Closures in setTimeout function delayedMessage(msg, delay) { setTimeout(function() { console.log(msg); }, delay); } delayedMessage("Hello after 2 seconds!", 2000); The inner function inside setTimeout remembers the msg variable, even though delayedMessage has already executed. Real-World Use Cases of Closures Closures are not just a theoretical concept; they have practical applications in JavaScript programming. 1. Data Encapsulation (Creating Private Variables) Closures help us create private variables, making them inaccessible from outside. function secretMessage() { let secret = "I am hidden"; return function() { console.log(secret); }; } const revealSecret = secretMessage(); revealSecret(); // Output: "I am hidden" console.log(secret); // ❌ Error: secret is not defined 2. Function Factories & Currying Closures allow us to create customized functions dynamically. function multiplier(factor) { return function (number) { return number * factor; }; } const double = multiplier(2); console.log(double(5)); // Output: 10 const triple = multiplier(3); console.log(triple(5)); // Output: 15 3. Memoization for Performance Optimization Closures help in caching results to optimize performance. function memoizedAdd() { let cache = {}; return function (num) { if (num in cache) { console.log("Fetching from cache"); return cache[num]; } console.log("Calculating result"); let result = num + 10; cache[num] = result; return result; }; } const addTen = memoizedAdd(); console.log(addTen(5)); // Output: Calculating result, 15 console.log(addTen(5)); // Output: Fetching from cache, 15 Common Mistakes & Debugging Closures 1. Unintended Memory Leaks Since closures hold references to variables, they can cause memory leaks if not handled properly. function leakyFunction() { let bigArray = new Array(1000000).fill("I am a big array"); return function () { console.log(bigArray.length); }; } const leakyClosure = leakyFunction(); // The large array remains in memory even if it's not needed!

let globalVar = "I am global";

function testFunction() {
    let localVar = "I am local";
    console.log(globalVar); // ✅ Accessible
    console.log(localVar);  // ✅ Accessible
}

console.log(globalVar); // ✅ Accessible
console.log(localVar);  // ❌ Error: localVar is not defined

function outerFunction() {
    let outerVar = "I am from outer function";

    function innerFunction() {
        console.log(outerVar); // ✅ Accessible due to closure
    }

    return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: "I am from outer function"

function makeCounter() {
    let count = 0;
    return function () {
        count++;
        console.log(count);
    };
}

const counter = makeCounter();
counter(); // Output: 1
counter(); // Output: 2

function delayedMessage(msg, delay) {
    setTimeout(function() {
        console.log(msg);
    }, delay);
}

delayedMessage("Hello after 2 seconds!", 2000);

function secretMessage() {
    let secret = "I am hidden";
    return function() {
        console.log(secret);
    };
}

const revealSecret = secretMessage();
revealSecret(); // Output: "I am hidden"
console.log(secret); // ❌ Error: secret is not defined

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

const double = multiplier(2);
console.log(double(5)); // Output: 10

const triple = multiplier(3);
console.log(triple(5)); // Output: 15

function memoizedAdd() {
    let cache = {};
    return function (num) {
        if (num in cache) {
            console.log("Fetching from cache");
            return cache[num];
        }
        console.log("Calculating result");
        let result = num + 10;
        cache[num] = result;
        return result;
    };
}

const addTen = memoizedAdd();
console.log(addTen(5)); // Output: Calculating result, 15
console.log(addTen(5)); // Output: Fetching from cache, 15

function leakyFunction() {
    let bigArray = new Array(1000000).fill("I am a big array");
    return function () {
        console.log(bigArray.length);
    };
}

const leakyClosure = leakyFunction();
// The large array remains in memory even if it's not needed!

Related Posts

Best Practices for Consistent API Error Handling

Mar 8, 2025  0

How to Import AWS RDS Instances into Terraform and Safe...

Mar 2, 2025  0

Databases: Partitioning & Sharding

Feb 19, 2025  0