16.5: Higher Order Functions in JavaScript – Topics of JavaScript/ES6
- January 6, 2024
- Posted by: MainInstructor
- Category: BASIC Go Java JavaScript
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1704580239_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: 16.5: Higher Order Functions in JavaScript – Topics of JavaScript/ES6
Hello welcome to another video that I’m in I just leaked so many videos but this is another one I’m actually really quite excited about this I’m going to talk about in this video something called a higher-order function as if you followed my tutorials and things over the years
I’m kind of like an old Java programmer well probably the language they’ve programmed the most in is Java and specifically processing which is a development environment built on top of Java that I use and so I really was taught and have learned and have practiced like object-oriented programming to programming I’m just
Going to programming a burning program but there is this thing called functional programming which is very popular and interesting and I want to dip my toe a little bit and javascript is a language where functions are the sort of primary building block of the language and there’s lots of thing and
Of course you can do this I know in Java now with like Java 72 whatever version is now one hundred and thousand 51 but I want to look at this idea of a higher-order function and kind of kind of wade into this idea of functional programming a bit more
Now this video is appearing in my es6 playlist even though some of the stuff that I’m gonna use is not es6 specific but it’s useful to have it here because I’m going to use in these tutorials also this particular syntax known as the arrow syntax or the arrow function and
I’m going to use that not only available in JavaScript es6 and if you are confused about what the arrow function is magical tutorial about that in a separate video and I think I talked about es6 for cs5 which are different versions of JavaScript there okay so
What is I’m going to attempt to define what a higher-order function is and I would I like to think about it just like well there’s a function I could define a function like this function hello and then I could write console.log hello in there and that’s a function it’s a named
Block of code that I can execute by calling the name of the function there’s lots of ways to declares functions in JavaScript in but he has six syntax and I could say var hello equals or let Hello equals are constant equals so many possibilities this is not a higher-order function because it is
Just a function on its own on the level playing field of functions a higher-order function is a function that kind of has two levels of functions through its are more than two in other words what if this function expects as its argument another function so you’re calling this function and sending it a
Function that’s a higher order function or what if this function actually makes it function or returns one back to you somehow that is also a higher order function so any function that either takes a function as input or sends a function out as output that is known as a
Higher-order function and you can do all sorts of cookie interesting things that can that look kind of fancy that could be fun but also can make your code easy to write so I the reason one of the reasons why I’m doing this is there are a lot of higher-order functions
Available for JavaScript arrays and those are really useful let me name a few of them map sort reduce filter so in the subsequent videos that are following this one I’m going to start going through these functions and it’s my goal to actually then tie these functions into a particle system example because I
Want to look at well you know I can look at the how these stuff works and just put numbers in it but what might be an actual real life scenario in the sort of creative coded graphics world that I might use them in so this is the whole
Landscape here I’m gonna start with just basic higher-order functions I’m gonna write a couple like goofy trivial examples I’m gonna stop let me come back and start going through higher-order array functions and then try to like tie that into a particle system that’s my plan sounds fine
I think it’s okay alright so let’s try to look at this idea of passing a function to a function or returning a function from a function so let’s I have a sort of empty bit of code here I’ve got the p5 library loaded I don’t need
It for a minute demonstrate but it has a nice set up function which is like the window.onload function so i like to have that available to me i don’t actually need to do this and set up a going to anyway alright so let’s say we’re to define a function and I’m going
To call it sing and in the function I’m going to say la la la la and then when I’m done okay let’s just do that okay this is my function sing oh I got to making it I got to make it in the global space so I can call it from the
Console the set of functions totally irrelevant at this point I know why I talked about that so I have this function called sing so now I’m gonna go over here and I’m gonna say sing song so I’m Bobo go sing ah I reload the page
I think la la la la la all right now craziness what if I were to define what if I were to say hey this function takes as an argument another function and that might be called like a callback and when I finish singing I execute that function
So you can think this might this this is might be code that you’ve never written yourself but it’s code that’s happening all the time in JavaScript libraries that you use because a lot of times you say hey load this JSON and here’s a callback or do this but apply it with
This function so this is the idea of if you could send in a function right the parentheses aren’t here right because this is actually the name of a variable the name of the function it’s a parameter to sing is callback and if that is a function I can execute that
Function here so in other words I could say now in setup I could say I could make my own function sing what would be so what something besides singing check it – meow and I’m gonna say console dot log meow meow and then I’m gonna say sing meow
Actually let’s just let’s do this all in the car I’m gonna put this here and then I’m in here write one thing now what happens if I call sing it says callback is not a function so I didn’t pass that parameter so I have to now say sing meow then
I’m giving it the meow function so sing lalala and then it executes that meow function now I could be sort of thoughtful about this and I could say like oh only call the callback if it exists what did I get wrong here whoops so now I could do some error checking in
My function so I could do this and it’s okay for me to say sing it just does lalala or I could say sing and then act when you’re done execute meow and if I wanted to be really really really careful about this I think I could say as long as it’s
An instance of a function who knows if that’s right so I could say sing meow and then sing and it would still work so this is this idea of being able to call a function from a function okay I should also mention that I’m kind of writing
This code in a very long-winded way where I’m naming all of my functions and this is not what you would typically see as JavaScript programmers do and eventually I’m gonna be like peeling this away and having anonymous functions and eventually getting to this arrow function again so for example just to
Make this case clear probably in another way that I might do this is say oh I want to call sing and then I just want to add pass in another function to it so you can see here this is me calling the function sing and giving it an argument
Which is all this code which is a function definition with no name an anonymous function and this might look even more clear to you if I do this right you can sort of see like this is the whole argument being passed in between those other sluggy those other
Two parentheses so that’s a whole function definition just being passed right in and you know spoiler alert I could kind of write it like this with arrow but we’re gonna get back to that later we’re gonna come to come back to the arrow function later okay so one more
Thing let’s try so this is a function that you’re passing a function another thing you could do is I could have a function return a function some might even call that like a function factory or something you love factories okay so let’s get rid of this and I’m gonna use
A pretty standard exam it’s probably one that you would find in countless other tutorials and I’m gonna write a function called multiplier I’ll show you why this is useful and what this function well first of all let me just quote write a function called multiplier and give it an argument
Called factor given an argument called X and an argument comes factor and I’m gonna return x times factor so this is a general function that’s just going to take two numbers and multiply them together so if I load the page here I’m gonna say multiplier X 5/2 and what should I get nothing
Oh I spelled it wrong multiplier 10 if I say multiplier 3 comma 927 make a little calculator here okay but what if I want to actually create different functions that multiply by different factors so instead of instead of having X here what if I just said return a function that
Receives X and multiplies it by some factor look at this the multiplier returns a new function that uses the factor that was passed in whoa so in other words what do I mean by this I can now say whoops and I’m just using the console here so let me get more space
Here let me make this a little bigger I can now say let let doubler equal multiplier – whoa what is doubler now right I didn’t get it is it a number dime multiply something No I created a function I created a function that uses the number that
Returns x times two so if I were to say let Tripler equal multiplier three now I’ve created a function right we can actually just double check let me just say whatwhat’s doubler is look this is what doubler is now it’s still showing the factor here but really inside that
Function it’s holding on to that number two that was passed in so in other words if I were to say doubler four what am I going to get no I messed something up what did I do wrong oh it doesn’t say oh this has to say ah
Oh oh I have a mistake look at this I wasn’t paying attention to what I was doing this is a fine mistake for me to have right it didn’t return anything undefined I forgot to also have the return here so this is kind of weird looking but this multiplier function makes a function
That returns X x factor so now if I start over here and I say let doubler be a multiplier create a function with a factor of two and let Tripler be a create a function with a factor of three now I can say doubler four and I get
Eight or I can say Tripler four and I get twelve okay so this is this idea of higher-order functions Oh all right actually two things that I forgot number one is this can also be this is also an example of a closure meaning that when you create this function by passing in
Factor this like kind of close your bubble lives on and the value of factor is retained even though it’s sort of technically a local variable just to this function multiplier so this is a I have another video all about JavaScript closures and this is an example of that
As well and then I forgot this is a case where I can use the arrow function to make this look you know nice and clean and simple and I’m very torn about this because on the one hand the arrow function can make code look very cryptic
And confusing on the other hand it can really simplify things so let’s let’s talk about that for a second so what what does the arrow function do so this is actually if I just rewrite this function down here this is what I’ve written so the arrow function you can
Watch my arrow function tutorial allows me to first of all instead of saying the word function I can delete the word function and I can put the arrow here so this is a function definition with one argument X and this is the code that the function executes now interestingly
Enough if there’s only one argument X I don’t need the parentheses so if there were two if this were a function that’s like multiplying two things I have to keep those parentheses but if there’s only one I don’t need so now I’ve simplified it like this it
Also so happens that if there’s only one line of code in that function you don’t need the curly brackets the curly brackets can be assumed and I can now write it like this and guess what if there’s only one line of code the return is assumed so I can actually get rid of
This return so actually this is a completely identical way to write the function up here so what this can actually be now is this so this is what I mean this you might look at this to be like what in the world is it doing but
After you use and I can speak from experience because arrow functions were brand new to me like less than a year ago but after you used them more and more it starts to seep into your brain a little bit like whether you’re doing list of mental gymnastics translate it
Back or it’s just kind of intuitive but there is a nice quality to saying like almost like X transforms into X x factor and it’s it’s confusing is that that return is returning a function but that function is returning X x factor so let’s take a look hopefully I got this
Right let’s take a look at this and I’m in a refresh here and I’m gonna did I save I’m gonna save and refresh and and what I’m actually gonna do is let’s just put this in the code let’s just say let multiplier equal oh sorry let doubler
Equal and let’s get rid of this should not be here let double or equal and I can I don’t need the setup function being so silly let double or equal a multiplier to let Tripler equal multiplier 3 oh and I gotta have the eye there okay so now I
Made those two multiplier functions refresh okay double or four I get eight and Tripler four I get twelve so wonderful look at that lovely use of the arrow functions and higher-order functions so what I’m done now with this video what I’ve really just discovered here basically is that a higher-order
Function is a function that either we see function as a callback and if you’re writing a JavaScript library and you’re asking people to call functions that happen asynchronously this might be something you provide as an option okay if you send me a function I’m the librarian I will execute that function
For you to let you know when I’m done so that’s a very useful technique that you’ll see in p5 and all sorts of JavaScript libraries so receiving a function as input or returning a new function just like I demonstrated with that multiplier function so that’s the
Basic idea now I am NOT going to write my own higher-order functions right in the next videos I’m just gonna make use of some useful ones that happen to live in the JavaScript array object so I don’t know which one I’ll start with tune in to the next video to find out
Wound suspense and I’ll see you then thanks for watching
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
The syntax is not the only difference between arrow and regular functions. An arrow function does not create its own context, while regular ones do. This is something important to keep in mind.
i really like your funny way and expressions to explain things.
😭🥺rll appreciate this viddddd
🔥ty
Let's always do good 🙏
thank you so much for this toturiale
This is the best explenation of higher order functions that i seen… Only now i understand it after so many watched tuturials… Thank you!!! 👍
Well, I thought I could teach myself what is hof in the video, but instead, I'm more confused now, lol) definitely not for beginners, it's so fast to catch all of your ideas
It crazy how entertaining you make coding. Your energy literally seeps through the screen.
Thanks I'm new to these arrows too so this has really helped!
This could do interesting things with optimization of damage calculations that include special effects being doubled.
You're great as you always 😘
He isn't sure what he is doing in a netshell he is saying that high order functions are functions which returns another function.
this guy has to be the most likeable person i've come across on YT
Thank you for this video!!! I have read and read my lesson over and over, but after coding along with you it finally made sense!!!
You are crazy, but a great teaches, thanks!
Functions of da highest ordah..
what is the different between closure and higher order function? newbie here
I enjoy watching your energy and interest in explaining programming logic. You have helped me understand this concept easier. I have tried reading many articles and forums for understanding Higher Order Functions but couldn't grasp the idea of it. But, you have helped me understand it better. Thank you so much for giving such efforts in explaining the complex ideas. Keep it up. I've subscribed to your channel to follow you regular.
Clickety, click, click…. don't mind me. I'm getting stuff that i didn't understand before! great tutorial.
Great tutorial
He's some what looking like cricketer 'Virat Kohli'..
Love your videos mate, super helpful and really enjoyable to watch. Thank you!
Wasn't too sure how higher order functions worked but came across this video and it explained it very clearly. Thank you!
You talk too much
thanks for the great video….
hahaha you are awesome!
Your over eccentric. It makes it hard to focus on what we are learning with your hands waving around, and so much emotion put into it. I am not trying to criticize here, but I don't want you to take anything away from your lessons.
The best coding teacher! Thank you so much!!
How does the doubler(x) call work when there are no parenthesis holding parameters in the definition let doubler = mutiplier(2); I saw a comment below that mentions inheritance in JS, but I was still unable to make sense of this as it looks implied and not defined.
This kinda coding looks like a movie Inception damn
Coding Train for clear concise explanation.
i cant seem to process the code in the example at my vs code
is he gay .. if not why is he acting like one??
Love what you do, I also try to explain complex ideas in beginner language on my channel, I would appreciate your support https://www.youtube.com/channel/UC6N4i972Z7F-ozmUWDakS1Q
Thank you for this amazing explanation!