What is Currying?

Currying transforms a function that takes multiple arguments into a sequence of functions, each accepting a single argument. Named after mathematician Haskell Brooks Curry, this technique originates from lambda calculus and plays a significant role in functional programming.

Why Use Currying?

Currying serves several practical purposes in JavaScript development:

• Reduces complexity by breaking down multi-argument functions
• Enables function reuse and configuration
• Facilitates the creation of higher-order functions
• Helps avoid repetitive argument passing

How Currying Works

A function requiring multiple parameters gets converted into a chain of nested functions. Each function in the chain captures one parameter and returns the next function until all parameters have been supplied.

Example: Basic Three-Parameter Function

Consider a straightforward function that accepts three values:

const multiply = (a, b, c) => {
    return a * b * c;
};
console.log(multiply(2, 3, 4)); // 24

Output:

24

This function takes all parameters at once. Currying transforms it into a chain where each call provides a single argument.

Example: Converting to Curried Function

The following demonstrates the currying pattern where each function returns the next:

function calculate(x) {
    return (y) => {
        return (z) => {
            return x + y + z;
        };
    };
}
console.log(calculate(5)(8)(3)); // 16

Step-by-step breakdown:

When calculate(5) executes, it receives the first argument and returns a new function:

return (y) => {
    return (z) => {
        return x + y + z;
    };
};

This returned function gets stored in a variable. Calling it with 8 produces the final function:

return (z) => {
    return x + y + z;
};

The final invocation with 3 completes the chain, yielding 5 + 8 + 3 = 16.

Example: Composing a Greeting

Building a curried function that constructs personalized messages:

function greetUser salutation => {
    return userName => {
        return note => {
            return `${salutation} ${userName}, ${note}`;
        };
    };
}
greetUser('Hi')('Alex')('Would you like to connect on LinkedIn?')

Output:

Hi Alex, Would you like to connect on LinkedIn?

Basic vs Advanced Currying

Basic Currying

In basic currying, a function accepts one argument and returns a chain of functions holding all remaining parameters. The function remains incomplete until receiving all arguments:

const getRecipeComponents = (item1) => {
    return (item2) => {
        return (item3) => {
            return `${item1}, ${item2}, ${item3}`;
        };
    };
};
getRecipeComponents('Butter')('Sugar')('Vanilla');

The function getRecipeComponents stays incomplete until all three ingredients have been provided.

Advanced Currying

Advanced currying uses a wrapper function that handles argument counting and supports incremental parameter supply:

const curryEvaluator = (originalFn) => {
    return curried = (...params) => {
        if (originalFn.length !== params.length) {
            return curried.bind(null, ...params);
        }
        return originalFn(...params);
    };
};
const sumValues = (p, q, r) => {
    return p + q + r;
};
const curriedSum = curryEvaluator(sumValues);
console.log(curriedSum(10)(25)(15));

The curryEvaluator functon compares the original function's parameter count against provided arguments. When counts don't match, it returns a bound function ready to receive additional arguments. This approach uses the spread operator to collect arguments into an array, enabling flexible partial application.

ES6 Arrow Function Syntax

Modern JavaScript supports concise currying syntax with arrow functions:

const buildMessage = salutation => user => note =>
    `${salutation} ${user}, ${note}`;
buildMessage('Greetings')('Sam')('Join our developer community?')

Output:

Greetings Sam, Join our developer community?

DOM Manipulation with Currying

Currying proves useful for DOM operations by allowing configuration of functions before execution. A single curried function can generate differant event handlers or DOM modifiers based on supplied parameters.

Currying vs Partial Application

These concepts often get confused but serve different purposes:

Currying converts a multi-parameter function into a chain of single-parameter functions. Each function in the chain must receive exact one argument before producing the next function.

Partial application pre-fills some arguments to create a new function with fewer parameters:

const sumPartial = (num1, num2, num3) => {
    return num1 + num2 + num3;
};
const presetSum = sumPartial.bind(this, 4, 5);
presetSum(11); // returns 20

Here, bind pre-fills the first two arguments, creating a function that only requires the third parameter.