My Web Training

📖 JavaScript Function Composition and Currying

Function composition and currying are advanced concepts in functional programming that help create more modular, reusable, and readable code. Understanding these concepts will enhance your ability to write cleaner and more efficient JavaScript.

Task

Learn how to use function composition and currying to create more reusable and modular code.

Function Composition: Combines two or more functions to produce a new function.
Currying: Transforms a function with multiple arguments into a sequence of functions, each taking a single argument.

Coding Examples

Function Composition

Function composition is the process of combining two or more functions to produce a new function. It allows you to build complex operations from simpler ones.


// Basic functions
const add5 = x => x + 5;
const multiplyBy2 = x => x * 2;

// Composing functions
const add5AndMultiplyBy2 = x => multiplyBy2(add5(x));

console.log(add5AndMultiplyBy2(10)); // Output: 30

Here's how it works.

const add5 = x => x + 5; - Defines a function add5 that adds 5 to its input.
const multiplyBy2 = x => x * 2; - Defines a function multiplyBy2 that multiplies its input by 2.
const add5AndMultiplyBy2 = x => multiplyBy2(add5(x)); - Defines a composed function add5AndMultiplyBy2 that first adds 5 to the input and then multiplies the result by 2.
console.log(add5AndMultiplyBy2(10)); // Output: 30 - Calls the composed function with an input of 10, resulting in 30 (10 + 5 = 15, 15 * 2 = 30).

Currying

Currying is a technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This allows for more flexible and reusable code.


// Curried function
const multiply = a => b => a * b;

const multiplyBy3 = multiply(3);
console.log(multiplyBy3(4)); // Output: 12
console.log(multiply(3)(4)); // Output: 12

Here's how it works.

const multiply = a => b => a * b; - Defines a curried function multiply that takes two arguments one at a time.
const multiplyBy3 = multiply(3); - Creates a new function multiplyBy3 by partially applying multiply with the first argument set to 3.
console.log(multiplyBy3(4)); // Output: 12 - Calls the multiplyBy3 function with an input of 4, resulting in 12 (3 * 4).
console.log(multiply(3)(4)); // Output: 12 - Calls the curried multiply function directly with both arguments, resulting in 12 (3 * 4).

Putting It Into Action

Create an HTML file and include the following script to see function composition and currying in action. This script will demonstrate how to use these techniques to create more reusable and modular code.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Function Composition and Currying Example</title>
</head>
<body>
    <script>
        // Function composition example
        const add5 = x => x + 5;
        const multiplyBy2 = x => x * 2;
        const add5AndMultiplyBy2 = x => multiplyBy2(add5(x));
        console.log(add5AndMultiplyBy2(10)); // Output: 30

        // Currying example
        const multiply = a => b => a * b;
        const multiplyBy3 = multiply(3);
        console.log(multiplyBy3(4)); // Output: 12
        console.log(multiply(3)(4)); // Output: 12
    </script>
</body>
</html>

Challenge

Combine function composition and currying to create a curried function that performs multiple operations in sequence. For example, create a function that adds 5 to a number, then multiplies it by 3, and finally subtracts 2.

In order to check your learning, you should attempt to create a solution before revealing the provided solution below.

Challenge Solution


// Curried and composed function
const add = a => b => a + b;
const subtract = a => b => a - b;
const multiply = a => b => a * b;

const add5 = add(5);
const multiplyBy3 = multiply(3);
const subtract2 = subtract(2);

const add5MultiplyBy3Subtract2 = x => subtract2(multiplyBy3(add5(x)));

console.log(add5MultiplyBy3Subtract2(4)); // Output: 19