Currying in JavaScript

What is Currying?

Currying is a function that takes one argument at a time and returns a new function expecting the next argument. It is a conversion of functions from callable as f(a,b,c) into callable as f(a)(b)(c).

Currying doesn’t call a function. It just transforms a function. They are constructed by chaining closures by immediately returning their inner functions simultaneously.

How does currying work?

Currying is a function that takes multiple arguments as input. It transform the function into a number of functions where every function will accept one argument.

Let’s understand this with examples

***Convert f(a, b) into f(a)(b)*

/* f(a,b) implementation */

function f(a,b) {
    return a + b
}

/* f(a)(b) implementation */

function f(a) {
    return (b) {
          return a + b
        }
}

console.log(f(1)(2)) // 2
console.log(f(1)); /* () => {} */        // will retrun a function

/*Simple function*/ 
const add = (a, b, c)=>{
    return a + b + c
}

console.log(add(1, 2 ,3)); // 6

/* Curried Function */

const addCurry = (a) => { // takes one argument
    return (b) => {                 //takes second argument
        return (c) => {             //takes third argument
            return a + b + c
        }
    }
}

console.log(addCurry(1)(2)(3)); //6

A *currying function that takes infinite arguments.*

const sum = function(a) {
    return function(b) {
        if (b) {
            return sum(a + b);
        } else {
            return a;
        }
    }
}

// sum(1)(2)(3)....() 

How can we manipulate DOM using currying?

<div>
  <h1 id="header">Hello World</h1>
</div>

want browser to show "Hello Currying" instead of "Hello World".

Let's try it using currying.

Steps:

1️⃣ Take the id of the element as one argument and the content inside the element as another argument.

const updateElemText = (id) => (content) => document.querySelector(`#${id}`).textContent= content;

2️⃣ Now call the function with element id and and the content

const updateHeaderText = updateElemText('header');

updateHeaderText('Hello Currying!');

What is showing up on the browser? 👀

Hope this blog helped you understand currying better.