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

File upload on android for JavaScript app

Total.js API services

Replace with Alphabet Position Challenge

Fetch Requests and Controller Actions: Connecting the Frontend to the Backend

Did I spend a whole week in Trivago learning Javascript from Kyle Simpson?

Fat Global State Management .1(Selector)

A quick look into React-Navigation

An Introduction to JavaScript Prototype for Beginners

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

Understanding JavaScript's ‘this’ keyword

JavaScript: Interacting with the DOM, Methods and Properties

Type Conversion and Coercion in javascript

Notification with Audio in JavaScript