Currying Step-By-Step

Definition

Transform a function that takes multiple arguments into a series of functions that take a single argument each.

Reason

The main advantage of currying is that the new function can be partially applied to its arguments.

Instead of:

function sum(x, y, z) { 
    return x + y 
} 
sum(1, 2, 3); //LOGs: 6

We have:

function sum(x) { 
    return (y) => { 
        return (z) => { 
            return x + y + z;
        } 
    } 
} 
sum(1)(2)(3); //LOGs: 6

Although currying can be achieved via other techniques, for example .bind(), this article focuses on utilizing closures.
Closures enables us to allocate each closure for a returned function to a specific variable:

function sum(x) { 
    return (y) => { 
        return (z) => { 
            return x + y + z;
        } 
    } 
} 
const addOne = sum(1)
const addTwo = addOne(2)
console.log(addTwo(3)) //LOGs: 6

1. When execution of the code comes to "const addOne = sum(1)", JS creates a closure for the returned function that captures the value of x as 1 in the Heap memory:

In HEAP: x = 1

In Stack:
(y) => { 
        return (z) => { 
            return x(1) + y + z;
        } 
    } 

2. when execution of the code comes to "const addTwo = add(2)", JS creates a closure for the returned function that captures the value of y as 2 in the Heap memory:

In HEAP: x = 1, y = 2

In Stack:
(z) => { 
            return x(1) + y(2) + z;
        } 

3. when execution of the code comes to "console.log(addTwo(3))", JS creates a closure for the returned function that captures the value of z as 2 in the Heap memory:

In HEAP: x = 1, y = 2, z = 3;

In Stack:
x(1) + y(2) + z(3);

All that is left is the execution of the final return:

function sum(1) { 
    return (2) => { 
        return (3) => { 
            return 1 + 2 + 3;
        } 
    } 
} 
const addOne = sum(1)
const addTwo = addOne(2)
console.log(addTwo(3)) //LOGs: 6