DEV Community

Ravina Deogadkar
Ravina Deogadkar

Posted on • Updated on

JavaScript: Currying

Hi everyone! After a long gap I was refreshing my JavaScript understanding and went through many blogs and videos. JavaScript is like a magic you will never be able to understand it as whole. JavaScript as a base language do support many front end and back end libraries and framework. JavaScript is no more just a scripting language.

Today I am going to discuss about one of the most asked interview topic. Currying

Trust me until now I have given a lots of interviews and this was asked to me in almost all interviews.

But to start with currying we need pre requisite knowledge of closures. To know more about closures you can read my blog on closures where I have demonstrated closures and it's usecase in more detail.

Currying

Currying is based on the concept of closures where a function of type f(a,b,c) is converted to f(a)(b)(c). Currying simply means evaluating function with multiple arguments and decomposing it into sequence of multiple functions with single argument. In other term a function is called by passing a argument which returns a new function accepting an argument and that in turn returns a new function accepting an argument and so on.

Example
Example with normal function

This could be rewritten using currying as follows.

Example with currying

Here add function becomes outer function for a function accepting b has an argument which in turn becomes outer function for a function accepting c has an argument. In term add function becomes a closure to encapsulated function limiting its scope only to the enclosed function.

Advanced example

Advance currying example

And the function can be used as

Advance currying function use

Closure and Partial application

Closures are formed by nesting functions but at what level? Does it depends upon number of arguments passed to a function? What if it doesn't.

Partial Application

Here only one function is nested although three arguments are passed and only one argument is decomposed.
No it doesn't form closure it forms partial application although they look similar but in closure the functions nested will depend on number of arguments passed to function. Partial application simply decompose a function into another function with smaller arguments.

Application / Use-case

  • Currying can be used to manipulate DOM in JavaScript.
  • It is used to trigger event listener.
  • In a functional programming currying is used to achieve higher order functions.

Reference

https://javascript.info/currying-partials

That's all for today until then Happy Coding!...

Top comments (10)

Collapse
 
frankwisniewski profile image
Info Comment hidden by post author - thread only accessible via permalink
Frank Wisniewski

I wonder about the point of copying code from "Javascript.info" and posting it here.
Wouldn't it be enough to post the link...

Collapse
 
deogadkarravina profile image
Ravina Deogadkar

Thanks for suggesting, I will add it in reference

Collapse
 
jonrandy profile image
Jon Randy 🎖️

What happened in the 'application' section? 🤔

Collapse
 
deogadkarravina profile image
Ravina Deogadkar

It's use cases where we can apply currying

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Really? OK, I'll bite... please give examples of using currying to:

  • Manipulate the DOM
  • Trigger an event listener
Thread Thread
 
deogadkarravina profile image
Ravina Deogadkar

You can check this codepen example for manipulating dom codepen.io/emilsone/pen/jOwNgde

and in react where you attach a event handler onclick event to work as
const handleClick = (value)=>{
return (e)=>{
setValue({[value]: e.currentTarget.value }
}
}

You can also use it to create a function which will accept a event and the element as argument and will be used to add event listener or remove event listener
function on(type, element){
element.addListener(type, ()=>alert("clicked"));
return (a)=>element.removeListener(type,(a)=>alert("element removed"+a));
}

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️

Currying isn't manipulating the DOM, nor is it triggering an event listener. Currying is merely a process to convert a function that takes multiple arguments into a sequence of functions that each takes a single argument.

Thread Thread
 
deogadkarravina profile image
Ravina Deogadkar

Yes right currying is a process to convert a function with multiple arguments to multiple functions with single argument. Currying is used to manipulate the DOM and triggering an event listener. So this are "use-cases/scenarios" where you can use currying. That's the reason I have written them in "application" section and not in the "examples" section.

Thanks for reading my blog I will definitely share a blog to discuss currying use-cases/scenarios.

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️

It seems we're fighting a language battle that is going round in circles

Thread Thread
 
deogadkarravina profile image
Ravina Deogadkar

Very well, I got what you want to say but I have used currying in the following scenario and I feel mentioning them so that reader get an idea where they can apply it.

Some comments have been hidden by the post's author - find out more