Use Lodash Curry When Functions Return Functions

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 4 years ago

Functions returning functions returning functions can begin to look a bit unwieldy. The arrow function has helped the syntax a lot, but maybe using a curry utility function to combine all the arguments into a single function will help your syntax look a little cleaner. Currying isn't necessary for our pattern, but you'll definitely see it used in many patterns involving functions returning functions and maybe you'll grow to love it.

John Lindquist: [0:00] Let's npm install lodash and then we can import curry from lodash. This curry function is going to enable us to remove some of these intermediate arrows, which will make these look like functions with multiple arguments, rather than a function with a single argument, returning another function with a single argument, returning another function with a single argument.

[0:27] We can wrap all these arguments with parens, replace the arrow with a comma. We wrap this entire function with a call to curry. We'll do that on each of these. We'll wrap this. This is a comma and that's a comma. Let me wrap this and call curry. We'll do the same here. Remove the arrow, put in a comma, wrap this, and call curry.

[0:54] Now our code functions exactly the same. You'll see clickOrTick in there. I can click or tick and everything works just fine.

[1:02] These functions have function signatures that have the typical argument list. Because we're using curry, they're still treated as functions that can take a single argument and then return another function. addListener took a single argument and returned a function. Even though in addListener, you'll see, it looks like it requires three arguments.

[1:21] This curry function is a code-based way to split up arguments into functions that return arguments, which we had to do manually before. Curry will also allow us, in situations like this where we have addListener take a single argument and return another function which takes a single argument, we can now pass in two arguments.

[1:42] I'll take addButton click listener, I'll copy it here, paste it here. Now we no longer need this line, because curry enables us to pass in multiple arguments and still return a function that takes a single argument. Once I hit Save, you'll still see the ticks and the clicks coming through just fine.

[2:00] Let's also add curry down here to merge. We can combine the listener into that list of arguments of broadcasters, then select all of this, and wrap that with curry.

[2:11] Another added benefit is instead of these long method names, sometimes you might just want to write that in line here. I can say "merge addListener button click with a create interval one second." I'll hit Save. I will comment out cancelClickOrTick. Everything will work just fine.

[2:32] Then depending on your preferences, this might read better to you, or naming the functions might read better to you.

egghead
egghead
~ 6 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today