JavaScript Function Currying

Function currying is a technique that is only possible in JavaScript because functions are first-class objects.
This means that they can be passed to a function as a parameter AND they can be returned from a function.
Code GIST: gist.github.com/prof3ssorSt3v...
Below are a few videos that will help you if you don't understand the fundamentals of functions.
Function Basics: • Introduction to Functi...
Function Return statements: • JavaScript Function Re...
Function parameters: • JavaScript Function Pa...
Variable Scope: • Variable Scope
I also made reference to closures during the video. This is an important but challenging concept in JS. If you want to learn more about closures: • JavaScript Closures

[@Oxmodius19]

I ALWAYS look for your videos first when learning a new topic! Great explanations, no intro bs, straight to the point! Thanks so much!

[@Lost2060]

wow, I've watched many videos and this one was the best. youtube algorithm is not being fared with you I'm surprised why this doesn't have many views!! but I hope you keep uploading videos. subscribed!

[@user-hh2is9kg9j]

You are an awesome human being! I watch a couple of videos with 100k+ viewers and I got nothing. But third way through this video I got the concept.

[@SteveGriffith-Prof3ssorSt3v3]

I did another video on this plus closures and partial application a few days ago. kzbin.info/www/bejne/sH-1XnSJbrN5iZY

[@rotrose7531]

Stunning explanation, like others, I also hope KZbin could be fair with this channel just for all people who want to learn JS earnestly. Thank you for all your effort to make javascript accessible to everyone.

[@Robert-cw9ev]

I've watched and read multiple tutorials, this is the best one! The use case example was so clear to me, thank you!

[@jamesclark1207]

Great explanation and excellent example. Thank you.

[@Snesgamer]

By far the easiest currying video I've seen yet! Both the implementation and the usefulness of the concept are on clear display!

[@aadil4236]

What a simple explanation...!!! You deserve way more subscribers, Thank you for the video.

[@wickedclamor4882]

Wow, unexpectedly got here, but I was amazed by your clear explanation. I already knew currying but was hazy on why it is significant. You cleared that up. Greetings from a fellow developer.

[@edmmonkey1418]

I was about to ask why use closure instead of a simple function with 2 parameters but you explained it very well afterwards. thank you

[@jcos7008]

This helped me understand a concept I was struggling with, thanks for the clear explanation and demonstration!

[@SteveGriffith-Prof3ssorSt3v3]

Glad it helped. You might find this recent video I did helpful too - kzbin.info/www/bejne/sH-1XnSJbrN5iZY (currying, closures, and partial applications)

[@espanol9750]

Easy, once you understand the idea behind it. I had to watch the whole video until it made click. I already wanted to give up ;) Thx a lot!!

[@adityajain019]

Perfect tutorial crisp and still enough detailed to understand. Please speak a little louder or maybe higher pitch. Your voice unfortunately reminds me of some professors who used to make me sleepy during lecture

[@SteveGriffith-Prof3ssorSt3v3]

The videos made 3 or 4 years ago were done with a cheap mic. So, the audio on some of them can be low. Since 2018 the audio quality is much better. It is recommended that you watch all tutorials at 1.5x speed. Proven to provide better engagement and equal levels of comprehension and retention.

[@yagzceritoglu1690]

Thank you for everything sir, this is the clearest explanation about currying i have seen

[@kiwi-Centaur]

Hey Steve, thanks a lot for this explanation, cleared my confusion, keep up the good work.. cheers

[@philipwalton123]

Great explanation. Thank you

[@Zen-lz1hc]

LIKE Great video! You explained really well this convoluted Curring JS concept.. Thank You!

[@mrbjjackson]

Thanks very much for this. Been struggling to get my head around currying. It's weird, I understand the concepts completely but my brain can't quite make the model to work out what is going on unless I really think about it hard. This helped a lot though. Thanks

[@chesterxp508]

Brilliant tutorials :)

[@Kay_Drechsler]

Thanks for the great explanation. I knew it will be very usefull to subscribe to your channel.

[@TheRonron1994]

Yo WTF.. Very simple and easy to understand! Thanks!

[@RichardBronosky]

Best explanation I've seen. This is the video I will share with my team. Do you have one on partials/function.bind()?

[@SteveGriffith-Prof3ssorSt3v3]

Thanks. Here is my video on call, apply, and bind - kzbin.info/www/bejne/q3PHeWOfd5aJeq8

[@juniordallagnolo3983]

Hey Steve, I can def​ see Currying is amazing and really important, but can you do maybe a big example of using it? like a really important mechanic implementation using it?

[@SteveGriffith-Prof3ssorSt3v3]

It's more of a concept. If you want to create reusable functions that need more than one variable passed in BUT you only know one value now (at the function creation time) and the other value will be known later (when the function gets called).

[@seanduignan294]

Hi Steve, great video! One question: does JS hold onto the original function that produced the curry function (on the heap) until the curry function goes out of scope?

[@SteveGriffith-Prof3ssorSt3v3]

Only the variable(s) around which the closure(s) were created.

[@nitinmali7430]

Thanks Steve for these wonderful and easy to follow tutorials. Isn't currying same as closure, how is it different from closure?

[@SteveGriffith-Prof3ssorSt3v3]

You're welcome. Currying uses closures. They are not the same thing. Currying is the process of using a function to create a new function which is "preloaded" with other information.

[@Snoo29293]

If you know how function callbacks and closures work, function currying is pretty easy to understand.

[@yamacode9958]

let english = greet("hi"); is english equal to the function greet with the param?

[@SteveGriffith-Prof3ssorSt3v3]

Yes. Exactly english is the equivalent of function (name){ console.log(msg, name); }

[@abuabdulloh7413]

To be honest, I had almost given up learning Web Development until I came across to your lessons, as majority of tutorials are the same and even not usable in real life projects. And I am relaying on your lessons now!!!) And I wanted to ask you that Can I translate your lessons into my native language and post them? And Can you please make a tutorial that covers a real time project which is built from 0?

[@SteveGriffith-Prof3ssorSt3v3]

Glad you didn't give up. As for translations, KZbin provides the ability for anyone to add closed captions in other languages. In the browser, click the 3 dots below the video to open the menu. One of the options is to "Add Translations". You need to be logged in but you can provided closed captions for your language.

[@bijaylama2794]

sir how is y passed into x funciton what do call it

[@SteveGriffith-Prof3ssorSt3v3]

In JavaScript, functions are first class Objects. That means you can treat them like any other value. Store them in a variable, pass them as an argument to a function, return them from a function. Anything that you can do with a string or number you can do with a function.

[@bijaylama2794]

function subtotal(math, eng, sc, hi, sans){ var total = math + eng + sc + hi + sans; return total; } function percentage(total) { var per = total/500 * 100; document.write(per); } var result =subtotal(63, 84 ,32 ,65, 45); percentage(result) . ........Ok in this code i want to know is the total from subtotal function same total which is used in the percentage funciton if thats the case it makes sense the subtotal is returning a value total and the percentage fucntion is using it in its parameter .....BUT MY QUESTION IS WHY AND HOW ...OR WHAT IS IT CALLED BECAUSE BOTH FUNCTION HAVE DIFFERENT SCOPES... Sir I need your Gudience....please

[@aminomar7890]

We would like to see your dog Mr. Steve, we only hear him barking that is unfair ;)

[@SteveGriffith-Prof3ssorSt3v3]

gyazo.com/6efd4b916fb0a96e58267c28a4bb6cc1

[@Colstonewall]

In any of your React vids, do you have a Currying Ex, Steve? I know it's used in handling events sometimes, but I still don't get why. Such as: handleChange = input => e => { this.setState({ [input]: e.target.value }); }; Why can't we just write handleChange = (input, e) => {this.setState({ [input]: e.target.value }) }; ?? Code: github.com/bradtraversy/react_step_form/blob/master/src/components/UserForm.js

[@SteveGriffith-Prof3ssorSt3v3]

Currying is used when you want to have a function that will be reused sometime in the future and you might have a few variations of that function. The only difference between the variations would be something that you pass early on. The function needs to return another function. The returned function is what gets called later on. Maybe it will be easier to understand it this way: handleChange = function(input){ return function(ev){ this.setState({[input]: ev.target.value }); } } handleChange runs once and creates the generic inner function that is waiting for an event to be passed. handleChange is being passed as a prop to another component. In the other component we will use it multiple times with different events and different input values. Notice how both FormPersonalDetails and FormUserDetails have their own copy of handleChange? We are creating multiple copies of this function. Inside of FormPersonalDetails there is this code: onChange={handleChange('occupation')} onChange={handleChange('city')} onChange={handleChange('bio')} Those three strings 'occupation', 'city', and 'bio' are being passed to the outer function AS SOON AS the component mounts. The function runs and returns the inner function. Now the onChange event listener is pointing to the inner function that was returned. There are now THREE different functions. A unique one for each form field and each function contains the appropriate string. To do it the other way handleChange = (input, e), we need to use bind to create a copy of the function to be used later.

[@Colstonewall]

@@SteveGriffith-Prof3ssorSt3v3 Thank you so much Steve, I know it was a long winded question and answer (and I greatly appreciate it). . .Everything in the first 2 paragraphs of your answer I understand. I get how the function is returning another function. I get currying and Closure for that matter, no problem. . . I think your last paragraph about using bind is closer to answering my question as to why we're using a Curried Function here. In other words, if we don't use a Curried Function we'd have to use bind. I see that, but I'm not quite sure how a Curried Func get around using bind. . .Let me look at this a little more, and see if I get it now. . .

[@Colstonewall]

@@SteveGriffith-Prof3ssorSt3v3 I think I get it now. Because a copy of the function "handleChange" is being passed to another component and the first arg (occupation,city,bio) is being passed in there, yet the event is being run to later in the original component (UserForm.js) when the button is pressed or whatever the event is. The Curried Func must be used in order to achieve this? Is that the gist (no pun intended)?

[@SteveGriffith-Prof3ssorSt3v3]

@@Colstonewall The lightbulb moment has happened.

[@Colstonewall]

@@SteveGriffith-Prof3ssorSt3v3 Thank you for taking the time to answer, Steve. Most wouldn't have. Thanks, again my friend.

[@kumarin2009]

Whats your dog name? It shouts in between the video 😂😂

[@SteveGriffith-Prof3ssorSt3v3]

I think that was my youngest pup - Rane.

[@kumarin2009]

@@SteveGriffith-Prof3ssorSt3v3 Rane ...good name😊

[@yarik83men51]

+++

[@zdargahi]

Steve you are wasting this voice on JS. you should make a meditation app

[@justadev____7232]

Who else got lost fast?