Currying in JavaScript 🍛

Photo by Nadir sYzYgY on Unsplash

Recently, there was this problem I encountered and it made me realize there is this really important technique in JavaScript and other languages that I didn’t fully understand.

I believe a lot of you have seen functions like these:

const result = add(a, b, c) // or
const result = add(a)(b)(c) // or
const result = a => b => c => { return a + b + c }

This transformation is called currying and it translates a function from callable as f(a, b, c) into callable as f(a)(b)(c). This process does not call the function, it just transfers it. The resulting function is called curried function.

If we break f(a)(b)(c) down, it equals:

function curry(f) { // curry(f) does the currying transform   
return function(a) {
return function(b) {
return function(c) {
return f(a, b, c)
}
}
}
}
// example
function multiply(a, b, c) {
return a * b * c
}
let mathOperation = curry(multiply)console.log(mathOperation(2)(2)(2)) // result is 8

Now this all starts to make sense, but what is the actual use of this transformation? The beauty of it lies in the ability to make convenience functions with fixed arguments, in other words “partially applied function” or “partial” for short. For example:

// now we want mathOperation to at least multiply 2 no matter what
let double = mathOperation(2)
// use it
console.log(double(3)(4)) // equals 2 * (3 * 4)

The argument of mathOperation(2) is saved in the Lexical Environment and the returned result is saved in the variable double which is a wrapper function(b)or multiply(2, b, c) . The great thing about this is mathOperation is still callable as usual and we can also generate partial functions such as double .

One last example where we create a generic mathOperation that does different arithmetic operations:

mathOperation = (arg) => {
if (arg === '+') {
return (a, b) => { return (a + b) }
}
if (arg === '*') {
return (a, b) => { return (a * b) }
}
}
var multiple = mathOperation('*')if (multiple(3, 5) == 15) {
console.log('Successful multiply')
}
var add = mathOperation('+')if (add(2, 4) == 6) {
console.log('Successful addition')
}

I hope this article was helpful and you are now more confident with Curry functions either with the chained parentheses next to each other or the ES6 arrows.

--

--

--

Software Developer | Tech Junkie | Professional Nap Taker 🐨

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Simplify Your Object with State Pattern in JavaScript

Math.random() is not secure ? 🤔

Code reviews: How?

VueJS: First Impressions

JavaScript & its use cases

Skeleton Screen Loading in Ember.js

REACTJS VS ANGULARJS VS VUEJS

be your web developer

Wrangling Wild CMS Data with TypeScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Brian Wang

Brian Wang

Software Developer | Tech Junkie | Professional Nap Taker 🐨

More from Medium

Understand Scoping and Hoisting in JavaScript with Examples

JavaScript Optional chaining (?.)

What’s JavaScript?

The Fat = (Arrow) => {Functions}

Image representation of arrow functions By Yasir Gaji