Closures

Program demonstrating closures in JavaScript

IntermediateTopic: Function Programs

JavaScript Closures Program

This program helps you to learn the fundamental structure and syntax of JavaScript programming.

// Closure: Function has access to outer function's variables

// Example 1: Basic closure
function outerFunction(x) {
    // Outer function's variable
    let outerVar = x;
    
    // Inner function (closure)
    function innerFunction(y) {
        console.log("Outer:", outerVar, "Inner:", y);
        return outerVar + y;
    }
    
    return innerFunction;
}

let closure = outerFunction(10);
console.log("Result:", closure(5));

// Example 2: Counter using closure
function createCounter() {
    let count = 0;
    
    return function() {
        count++;
        return count;
    };
}

let counter1 = createCounter();
let counter2 = createCounter();

console.log("\nCounter 1:", counter1());
console.log("Counter 1:", counter1());
console.log("Counter 2:", counter2());
console.log("Counter 1:", counter1());

// Example 3: Private variables
function createBankAccount(initialBalance) {
    let balance = initialBalance; // Private variable
    
    return {
        deposit: function(amount) {
            balance += amount;
            return balance;
        },
        withdraw: function(amount) {
            if (amount <= balance) {
                balance -= amount;
                return balance;
            } else {
                return "Insufficient funds";
            }
        },
        getBalance: function() {
            return balance;
        }
    };
}

let account = createBankAccount(100);
console.log("\nInitial balance:", account.getBalance());
console.log("After deposit 50:", account.deposit(50));
console.log("After withdraw 30:", account.withdraw(30));
console.log("Final balance:", account.getBalance());

// Example 4: Function factory
function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}

let double = createMultiplier(2);
let triple = createMultiplier(3);

console.log("\nDouble 5:", double(5));
console.log("Triple 5:", triple(5));

// Example 5: Closure with loop (common mistake)
console.log("\nClosure in loop:");
for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log("var i:", i); // Prints 3, 3, 3
    }, 100);
}

// Solution: Use let
for (let j = 0; j < 3; j++) {
    setTimeout(function() {
        console.log("let j:", j); // Prints 0, 1, 2
    }, 200);
}

Output

Outer: 10 Inner: 5
Result: 15

Counter 1: 1
Counter 1: 2
Counter 2: 1
Counter 1: 3

Initial balance: 100
After deposit 50: 150
After withdraw 30: 120
Final balance: 120

Double 5: 10
Triple 5: 15

Closure in loop:
var i: 3
var i: 3
var i: 3
let j: 0
let j: 1
let j: 2

Understanding Closures

This program demonstrates closures in JavaScript.

Closure Definition

A closure is a function that has access to variables in its outer (enclosing) scope, even after the outer function has returned.

Example 1: Basic Closure

Inner function accesses outer variable:

function outer(x) {
    let outerVar = x;
    };
}

    return function inner(y) {
        return outerVar + y; // Accesses outerVar

How it works:

•Inner function "remembers" outer scope

•Variables persist after outer function returns

Example 2: Counter

Each closure has its own state:

function createCounter() {
    let count = 0;
    };
}

    return function() {
        return ++count;

Key Point:

Each call to createCounter() creates a new closure with its own count variable.

Example 3: Private Variables

Encapsulation pattern:

function createBankAccount(balance) {
        deposit: function(amount) {
            balance += amount; // Accesses private balance
        }
    };
}

    return {

Benefits:

•Data privacy

•Prevents external modification

•Encapsulation

Example 4: Function Factory

Create specialized functions:

function createMultiplier(multiplier) {
    };
}

    return function(number) {
        return number * multiplier;

Example 5: Loop Closure Issue

Common mistake with var:

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // All print 3!
    }, 100);
}

Problem:

var is function-scoped, all closures share same i.

Solution:

Use let (block-scoped):

for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // Prints 0, 1, 2
    }, 100);
}

When to Use:

•Data privacy/encapsulation

•Function factories

•Event handlers

•Callbacks with state

•Module pattern

Memory Considerations:

•Closures keep variables in memory

•Can cause memory leaks if not careful

•Be mindful of large objects in closures

Let us now understand every line and the components of the above program.

Note: To write and run JavaScript programs, you need to set up the local environment on your computer. Refer to the complete article Setting up JavaScript Development Environment. If you do not want to set up the local environment on your computer, you can also use online IDE to write and run your JavaScript programs.

Practical Learning Notes for Closures

This JavaScript program is part of the "Function Programs" topic and is designed to help you build real problem-solving confidence, not just memorize syntax. Start by understanding the goal of the program in plain language, then trace the logic line by line with a custom input of your own. Once you can predict the output before running the code, your understanding becomes much stronger.

A reliable practice pattern is to run the original version first, then modify only one condition or variable at a time. Observe how that single change affects control flow and output. This deliberate style helps you understand loops, conditions, and data movement much faster than copying full solutions repeatedly.

For interview preparation, explain this solution in three layers: the high-level approach, the step-by-step execution, and the time-space tradeoff. If you can teach these three layers clearly, you are ready to solve close variations of this problem under time pressure.

Callback Functions