JavaScript Closures

What Are JavaScript Closures?

A closure in JavaScript occurs when a function is created inside another function, and the inner function remembers the variables from the outer function even after the outer function has finished executing. This allows you to create functions that have access to variables even after they are no longer in scope.

Basic Structure of a Closure

The basic structure of a closure involves two key components:

1. The outer function that defines the variables (the values you want to "close over").
2. The inner function that uses the outer function's variables and is returned by the outer function.

Here's the general structure of a closure in JavaScript:

function outerFunction(outerVariable) {
    function innerFunction(innerVariable) {
        // Inner function uses outerVariable
        return outerVariable + innerVariable;
    }
    return innerFunction;
}

function outerFunction(outerVariable) {
    function innerFunction(innerVariable) {
        // Inner function uses outerVariable
        return outerVariable + innerVariable;
    }
    return innerFunction;
}

Here's a simple example:

function greet(name) {
    function sayHello() {
        return "Hello, " + name;
    }
    return sayHello;
}

const greeting = greet("Tom");
console.log(greeting());  // Output: Hello, Tom

function greet(name) {
    function sayHello() {
        return "Hello, " + name;
    }
    return sayHello;
}

const greeting = greet("Tom");
console.log(greeting());  // Output: Hello, Tom

How It Works:

• function greet(name) defines a function called greet that takes a parameter name.
• function sayHello() defines a nested function sayHello that returns a personalized greeting.
• return sayHello; returns the sayHello function when greet is called.
• const greeting = greet("Tom"); calls the greet function with "Tom" as an argument, and stores the returned function in greeting. The inner function sayHello has access to the outer function's variable name, which is why it can use it to return a personalized greeting.
• console.log(greeting()); calls the returned sayHello function and prints its result: "Hello, Tom".

Output:

Hello, Tom

Hello, Tom

Closures with Multiple Variables

A closure can also work with multiple variables. This means the inner function can access several variables from the outer function, not just one.

Here's an example of a closure with multiple variables:

function outerFunction(x, y) {
    function innerFunction(z) {
        return x + y + z;
    }
    return innerFunction;
}

const closure = outerFunction(5, 10);
console.log(closure(3));  // Output: 18

function outerFunction(x, y) {
    function innerFunction(z) {
        return x + y + z;
    }
    return innerFunction;
}

const closure = outerFunction(5, 10);
console.log(closure(3));  // Output: 18

How It Works:

• function outerFunction(x, y) : defines a function called outerFunction that takes two parameters x and y.
• function innerFunction(z) : defines a nested function innerFunction that takes a parameter z.
• return x + y + z;: adds x, y, and z together in the inner function.
• const closure = outerFunction(5, 10);: calls the outerFunction with 5 and 10 as arguments, and stores the returned inner function in closure.
• console.log(closure(3));: calls the inner function with 3 as an argument and prints the result. The total is 5 + 10 + 3 = 18.

Output:

18

18

Example 1: Using Closures to Create a Counter

In this example, we use a closure to create a counter function. Each time the counter is called, it will increment the value by 1, and the inner function will remember the count even after the outer function has finished executing.

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

const counter = createCounter();

console.log(counter());  // Output: 1
console.log(counter());  // Output: 2
console.log(counter());  // Output: 3

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

const counter = createCounter();

console.log(counter());  // Output: 1
console.log(counter());  // Output: 2
console.log(counter());  // Output: 3

How It Works:

• createCounter(): The outer function creates a local variable count and returns an inner function that increments and returns the count.
• let count = 0: Initializes the count variable to 0 inside the outer function.
• return function(): The inner function is returned, which has access to the count variable, even after the outer function has finished executing.
• counter(): Each time the inner function is called, it increments the count and returns the new value.

Output

1
2
3

1
2
3

Example 2: Using a Closure to Retain Access to Outer Function's Variables

This example demonstrates how a closure works by using a function inside another function. The inner function retains access to the outer function's variables even after the outer function has finished executing.

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

const multiplierByTwo = createMultiplier(2);
console.log(multiplierByTwo(5));  // Output: 10

const multiplierByThree = createMultiplier(3);
console.log(multiplierByThree(5));  // Output: 15

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

const multiplierByTwo = createMultiplier(2);
console.log(multiplierByTwo(5));  // Output: 10

const multiplierByThree = createMultiplier(3);
console.log(multiplierByThree(5));  // Output: 15

How It Works:

• createMultiplier(factor): This function takes a factor as an argument and returns an inner function.
• return function(number): The inner function takes number as an argument and multiplies it by the outer function's factor.
• multiplierByTwo = createMultiplier(2): This creates a new function that multiplies any given number by 2.
• console.log(multiplierByTwo(5)): Calls the returned inner function with the number 5 and prints the result: 10.
• multiplierByThree = createMultiplier(3): This creates another function that multiplies any given number by 3.
• console.log(multiplierByThree(5)): Calls the second inner function with the number 5 and prints the result: 15.

Output

10
15

10
15

What’s Next?

Up next, you’ll dive into Async JavaScript—a crucial topic for handling tasks like API calls, timers, and file operations. You’ll learn how to use Promises, async/await, and other tools to write non-blocking, efficient JavaScript code.