JavaScript closures vs. anonymous functions

In this article, we will learn about JavaScript's closures and anonymous functions. JavaScript is a powerful language that allows developers to write expressive and concise code. Two concepts that often confuse beginners are closures and anonymous functions. While they share some similarities, they serve different purposes and function differently in JavaScript.

What are Anonymous Functions?

An anonymous function is simply a function without a name. Anonymous, as the name suggests, allows the creation of a function without any name identifier. It can be used as an argument to other functions, assigned to a variable, or immediately invoked. They are called using the variable name.

Basic Anonymous Function Example

This is how JavaScript anonymous functions can be used ?

var func = function() {
    console.log('This is anonymous');
}
func();

This is anonymous

Anonymous Function as Callback

Another common example is using anonymous functions as callbacks ?

setTimeout(function() {
    console.log('Demo message after 3 seconds');
}, 3000);

// This will execute immediately
console.log('This executes first');

This executes first
Demo message after 3 seconds

Use Cases of Anonymous Functions

Following are the use cases of anonymous functions ?

• Callback functions (e.g., event handlers, setTimeout, map, filter, etc.).
• Function expressions (storing functions in variables).
• Immediately Invoked Function Expressions (IIFE).

What are JavaScript Closures?

In JavaScript all functions work like closures. A closure is a function that retains access to variables from its outer (enclosing) scope even after the outer function has finished executing. It remembers the environment in which it was created, not where it is invoked.

Basic Closure Example

function outerFunction(x) {
    // Variable in outer scope
    var outerVariable = x;
    
    // Inner function (closure)
    function innerFunction(y) {
        console.log('Outer variable:', outerVariable);
        console.log('Inner variable:', y);
    }
    
    return innerFunction;
}

var myClosure = outerFunction(10);
myClosure(20);

Outer variable: 10
Inner variable: 20

Closure Scope Demonstration

var p = 20;

function a() {
    var p = 40;
    b(function() {
        console.log('Value of p:', p); // Uses p from function a's scope
    });
}

function b(f) {
    var p = 60;
    f(); // Function remembers where it was created (in function a)
}

a();

Value of p: 40

Use Cases of Closures

Following are the use cases of closures ?

• Data encapsulation (creating private variables).
• Maintaining state between function calls.
• Function factories (generating customized functions dynamically).
• Event handling and callbacks.

Key Differences

Conclusion

Anonymous functions and closures serve different purposes in JavaScript. Anonymous functions are simply unnamed functions used for convenience in callbacks and short-lived tasks. Closures, however, are powerful mechanisms that allow functions to remember and access variables from their creation context, enabling data encapsulation and state management.