Master Closures in JavaScript with 5 practical examples

Understanding closures in JavaScript is crucial for frontend developers as they play a significant role in how functions work and interact with variables. This is one of the confusing topics with so many applications in different contexts.

In this blog post, we will explore 5 practical examples to help you grasp the concept of Closures in JS and use them confidently in your applications.

What are Closures in JavaScript?

In JavaScript, a closure is a combination of a function bundled together with references to its surrounding state (the lexical environment). This means that a closure gives you access to an outer function's scope from an inner function. Here is a simple example.

function outerFunction() {
    let outerVariable = 'I am from the outer function';

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

const innerFn = outerFunction();
innerFn(); // Output: I am from the outer function

5 Practical Closures Example in JavaScript

Example 1: Basic Closure

In this example, the inner function has access to the outerVariable defined in the outer function, demonstrating how closures work.

Example 2: Closures in Event Listeners

function addClickListener() {
    let count = 0;

    document.getElementById('clickMeButton').addEventListener('click', function() {
        count++;
        console.log('Button clicked ' + count + ' times');
    });
}

addClickListener();

Here, the closure maintains access to the count variable across multiple click events, incrementing it each time the button is clicked.

Example 3: Closures in Asynchronous Operations

function delayedGreeting() {
    let name = 'Alice';

    setTimeout(function() {
        console.log('Hello ' + name);
    }, 2000);
}

delayedGreeting();

This example showcases how closures capture the name variable even after the outer function has finished executing, allowing the delayed function to access it.

Example 4: Closures with Higher-Order Functions

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

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

By returning a function inside another function, closures enable the creation of functions that remember and use the variables from their lexical environment.

Example 5: Closures for Data Privacy

function createCounter() {
    let count = 0;

    return {
        increment: function() {
            count++;
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // Output: 1

This example demonstrates how closures can be used to encapsulate and protect data, providing a way to maintain private variables within a function.

Best Practices for Using Closures

• Understand the scope chain to avoid unexpected behaviour.
• Avoid creating unnecessary closures to prevent memory leaks.
• Use closures for encapsulation and data privacy when needed.
• Consider performance implications when using closures in performance-critical code.

Final thoughts

Closures are a powerful feature in JavaScript that can be leveraged to write more concise and efficient code. By mastering closures, you can enhance your understanding of functions and scope in JavaScript.

Understanding different use cases of closures in JavaScript helps to easily answer closure-related questions in the frontend interview and also helps in day-to-day frontend development work.

Further Reading

1. Checkout best resources for Closures in JavaScript
2. Top Interview JavaScript Questions & Answers