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 [Music]

Channel: The Coding Train

Views: 119,667

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, nature of code, live stream, itp nyu, es6 arrow functions, es6 arrow, map es6, reduce es6, reduce javascript explained, array reduce javascript, javascript reduce method, higher order functions javascript, es6 tutorial, es6 tutorial for beginners, es6 javascript, closures javascript, closures js

Id: H4awPsyugS0

Length: 16min 21sec (981 seconds)

Published: Mon Feb 19 2018