DEV Community

Cover image for JavaScript Closures
Yeasir Arafat
Yeasir Arafat

Posted on

JavaScript Closures

A closure is a powerful and fundamental concept in JavaScript. It refers to a function that has access to variables from its outer (enclosing) scope, even after the outer function has finished executing. Closures are a key part of JavaScript's scoping and functional programming.

How Closures Work

When a function is defined inside another function, the inner function has access to the outer function's variables and parameters. Even after the outer function has completed execution, the inner function retains access to those variables. This behavior is called a closure.

Example of a Closure

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

    function innerFunction() {
        console.log(outerVariable); // innerFunction can access outerVariable
    }

    return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // Output: "I am from the outer scope"
Enter fullscreen mode Exit fullscreen mode

In this example:

innerFunctionis a closure because it retains access to outerVariable even after outerFunction has finished executing.

Practical Uses of Closures

  1. Data Privacy: Closures can be used to create private variables that are only accessible to specific functions.
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
Enter fullscreen mode Exit fullscreen mode
  1. Callback Functions: Closures are widely used in asynchronous programming, such as event handlers or AJAX calls.
setTimeout(function() {
    console.log('This is a callback using closure');
}, 1000);
Enter fullscreen mode Exit fullscreen mode
  1. Currying: Closures are used in function currying, where a function returns another function with partial arguments.
function multiply(a) {
    return function(b) {
        return a * b;
    };
}

const multiplyByTwo = multiply(2);
console.log(multiplyByTwo(5)); // Output: 10
Enter fullscreen mode Exit fullscreen mode

Advantages of Closures

  • Scope Control: Closures help control the scope of variables, preventing them from polluting the global scope.

  • Memory Efficiency: Closures allow for efficient use of memory by retaining access to specific variables without creating global variables.

Caveats of Closures

  • Memory Leaks: Closures can cause memory leaks if not used carefully because they retain references to outer variables, which can prevent garbage collection.

  • Performance Overhead: Excessive use of closures can lead to performance issues due to increased memory consumption.

Real-World Example: Private Variables

function createBankAccount(initialBalance) {
    let balance = initialBalance;

    return {
        deposit: function(amount) {
            balance += amount;
            return `Deposited ${amount}. New balance: ${balance}`;
        },
        withdraw: function(amount) {
            if (amount > balance) {
                return 'Insufficient funds';
            }
            balance -= amount;
            return `Withdrew ${amount}. New balance: ${balance}`;
        },
        getBalance: function() {
            return `Current balance: ${balance}`;
        }
    };
}

const account = createBankAccount(1000);
console.log(account.deposit(500)); // Deposited 500. New balance: 1500
console.log(account.withdraw(200)); // Withdrew 200. New balance: 1300
console.log(account.getBalance()); // Current balance: 1300
Enter fullscreen mode Exit fullscreen mode

In this example:

The balance variable is private and can only be accessed or modified through the methods provided by the closure.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)