How to call a function that returns another function in JavaScript?

In JavaScript, calling a function that returns another function involves understanding higher-order functions and closures. When a function returns another function, you can either store the returned function in a variable or call it immediately using double parentheses.

Basic Syntax

There are two main ways to call a function that returns another function:

// Method 1: Store in variable then call
let returnedFunction = outerFunction();
returnedFunction();

// Method 2: Call immediately
outerFunction()();

Simple Example

let outerFunction = function() {
    return function() {
        console.log("Inner function executed");
    }
}

// Method 1: Store and call
let innerFunction = outerFunction();
innerFunction();

// Method 2: Immediate call
outerFunction()();

Inner function executed
Inner function executed

Using Arrow Functions

Arrow functions provide a more concise syntax for the same functionality:

let outerFunction = () => () => console.log("Arrow function result");

// Both approaches work
let inner = outerFunction();
inner();

outerFunction()();

Arrow function result
Arrow function result

Practical Example with Parameters

Here's a practical example showing how parameters work with nested functions:

function createMultiplier(x) {
    return function(y) {
        return x * y;
    };
}

// Create specific multiplier functions
let double = createMultiplier(2);
let triple = createMultiplier(3);

console.log("Double 5:", double(5));
console.log("Triple 4:", triple(4));

// Or call immediately
console.log("Direct call:", createMultiplier(10)(3));

Double 5: 10
Triple 4: 12
Direct call: 30

Function Currying Example

Function currying transforms a function with multiple parameters into a sequence of functions, each taking a single argument:

function add(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
        };
    };
}

// Usage with currying
let result1 = add(1)(2)(3);
console.log("Curried result:", result1);

// Partial application
let addFive = add(5);
let addFiveAndTwo = addFive(2);
console.log("Partial application:", addFiveAndTwo(10));

Curried result: 6
Partial application: 17

Key Concepts

Common Use Cases

• Creating specialized functions (like multipliers, validators)

• Event handler factories that need specific configurations

• Partial application for reusable function components

• Function composition in functional programming

Conclusion

Functions that return other functions are powerful tools in JavaScript, enabling closures, currying, and partial application. Use parentheses syntax outerFunction()() for immediate calls or store the returned function in a variable for later use.