The 10 Days of JavaScript: Day 6 (Greater-Order Features)

by birtanpublished on July 3, 2020

[Music]

hello everyone and welcome back to the

ten days of JavaScript here we are in

day number six and in this lesson we are

going to learn about higher order

functions let's begin with the question

what in the world is a higher order

function so the boring technical

definition is a higher order function is

a function that either accepts a

function as an argument or a function

that returns a function as a result okay

so that wasn't helpful at all because if

you learn the way that I learn technical

answers like that do nothing for me I

need to see examples in order for me to

actually learn anything so this lesson

is going to be broken up into three

parts first we will look at an example

of a function that accepts a function as

an argument after that we will create

our own brand-new higher-order function

that returns a function as a result and

finally at the end of the video we will

learn about some of the most useful

higher-order functions that are part of

the core JavaScript language that you

would leverage in the real world on a

daily basis okay so let's begin up at

the top and look at a function that

accepts another function as an argument

so believe it or not we've actually

already seen a function that does this

so type this out with me if we say

document dot add event listener and this

is a function or method that belongs to

the document object so we include

parentheses to run or call the function

and you might remember that it takes two

arguments so the first argument is which

event you want to be on the lookout for

so we could say quotes click and then a

comma to include another arguments and

remember that the second argument is

supposed to be a function that you want

to run when this event happens so we

could say our amazing function and then

down on a new line we could create a

function with this

matching name so function our amazing

function parentheses curly brackets and

maybe we just alert a pop-up message

that says thank you for clicking okay

now if I check out the preview area of

this and click down here we see the

pop-up thank you for clicking we've done

this before it's not impressive the

reason I'm showing you this is I want to

point out what a higher-order function

is we would say that this add

eventlistener method or function is a

higher-order function because the second

argument that it expects to receive is a

function if you've never worked with

another programming language before you

might not see what's so special or

noteworthy about this however in certain

programming languages you are not

allowed to pass a function as an

argument

you can usually only pass simple values

like a string of text or a number so

JavaScript is special in the sense that

functions are not considered weird or

special entities with their own unique

set of rules of where and how they can

be used in JavaScript a function is just

like any other entity or value to

explain what I mean by that let's jump

into our next example but really quick

back to the definition right so a

higher-order function is a function that

accepts a function as an arguments and

or returns a function as its result

so we just saw an example of the first

part of that definition right we saw a

function that accepts a function as an

argument and now the last part of the

definition a function that returns a

function as a result that is a bit

trickier to understand so right now I'm

going to get rid of this code and let's

start fresh and I want you to type this

out with me first let's begin with a

simple function that is not a

higher-order function so let's create a

function and name it double me

parentheses curly brackets and imagine

that we want this function to double

whatever number

you give it and then return that value

so within its parentheses we can include

a parameter and then inside the body of

the function we can just say return that

parameter times two

okay and then below this function we

could test it out so maybe we could

write a sample number out to the webpage

down here we could say document dot

right and then let's say double me

twenty cool so down the preview area we

see that it worked properly right we see

40 so the point here is that this

doublemeat function is not a

higher-order function clearly it does

not accept a function as an argument we

expect it to receive a number and it

also does not return a function right it

just returns a simple number now if

you're like me you might be scratching

your head and wondering when would it

ever be useful for a function to return

a function well let me give you an

example so let's imagine that we also

wanted a function named triple me and

quadruple me so we could just copy and

paste our double me function right and

change the name to triple me and then

adjust this to multiply by three and

then we could paste it again and name

this one quadruple me and change the

multiplier to four you get the idea but

this code is getting repetitive

literally the only thing that's changing

is the number that we are multiplying by

so just like each one of these functions

returns or generates a value what we can

do is create a new function that

generates or returns one of these

multiplier functions let me show you

what I mean because it's really

confusing until you see it in action so

I'm gonna get rid of the triple median

quadruple me functions and let's create

a brand new function the name doesn't

matter but I'm going to name it create

multiplier parentheses curly brackets in

these parentheses let's give it a

parameter I'm gonna say multiplier okay

and then in the body of this

function instead of returning a number

we can literally return another function

function parentheses curly brackets and

now let's just pretend that this

function is the doublemeat function but

let's make it flexible right so within

its parentheses we could include an X as

a parameter right this would represent

whichever number is getting doubled or

tripled or quadrupled and then in the

body of this function we would just

return that number x and then this is

where we make it flexible so instead of

doubling it or tripling it or

quadrupling it let's just pull in this

parameter the multiplier parameter now

don't worry I do not expect this to make

sense yet okay now at this point we can

get rid of our double me function now

check this out this is where it will

start to make a little bit of sense down

here we can say let double me equal and

then we can just use this create

multiplier function to create our double

me function so we can say create

multiplier two right and then we could

try to get me to say let triple me equal

create multiplier three and then let

quadruple me equal create multiplier

four okay now before we actually try to

use these new double me triple me

quadruple me functions let's take a

minute to understand what's actually

going on here because there are two

really interesting and potentially

confusing things taking place here so

first our create multiplier function is

considered a higher-order function

because instead of just returning a

simple string of text or a number or an

array it's returning a function now that

may not seem very special or interesting

but it's noteworthy because in other

programming languages functions are

considered special entities with

our own weird or unique set of rules

governing when and where they can be

used in other programming languages we

might only be allowed to return a simple

number or string of text within a

function right here but in JavaScript a

function is an entity just like any

other value which also means that not

only can we return a function within a

function but we can also assign a

function to a variable like we see down

here so just like in previous lessons

and you do not need to type out this

part just like in previous lessons how

we would set let strawberry count equal

20 so just like in the past where we

would set a variable to equal a number

or a string of text or an array well in

JavaScript we can set a variable to

equal a function and that's exactly

what's going on here now again this

might not seem super interesting but it

is because we cannot necessarily do this

in other programming languages so the

point here is that javascript is special

in the sense that functions are

considered first-class citizens or

entities so we can pass them around as

arguments we can return them inside of a

function and we can even assign them to

a variable and believe it or not but

this makes JavaScript a very flexible

and powerful language okay now just to

prove to ourselves that this code works

let's test out these double me triple me

and quadruple me functions so let's

output a sample value down into the

preview area down here so maybe below

our code we can say document dot write

and then let's try doubling the number

10 so we can call one of these functions

just like we would any other function we

just type out its name and then a set of

parentheses to actually call the

function and then in the parentheses

just give it an argument so 10 we see

that it gets doubled

we could try tripling the number five so

triple me five it helps if I spell

triple correctly but there we see 15 and

then we could try out quadruple me

really quick so quadruple me awesome

there we see 20 if you're still a little

bit confused as to how this is working

we can take double me as an example so

we are creating a variable and saying

let double me equal whatever this create

multiplier function returns and we know

that that function returns a function so

then literally the double me variable is

going to equal this function that gets

returned here and then we can call it

just like any other function all right

so now that we've covered both halves of

the definition of a higher-order

function let's move on to the third and

final part of this lesson so I'm going

to erase everything we have so far we

begin this lesson by looking at an

example of a higher-order function that

the web browser environment offers and

then in the second part of this lesson

we created our own functions okay and

now in this third and final part I want

to show you a few higher-order functions

that are part of the core JavaScript

language itself and actually some of the

most useful ones that you would run into

on a daily basis all have to do with

arrays so let's begin by pretending that

we have an array you can type this out

with me I'm going to say let my colors

equal and then square brackets to create

the array and then I'm just going to

spell out the first few colors of the

rainbow okay so we've got this example

array now let's imagine that we want to

do something once for each item in the

array for example let's imagine we want

to output down on to the preview part of

the webpage a little bit of text that

says the color red is a great color and

then the color orange is a great color

the color yellow is a great

right so we want to perform this

repetitive task and do it once for each

item well check this out in the

JavaScript language let's begin working

with our variable so my colors in the

JavaScript language all arrays have

access to a method named for each and

just based on its name you might be able

to guess what it does within its

parentheses for the argument we just

give it a function and then it's going

to run that function once for each item

in the collection let me show you how it

works so maybe down on a new line

let's create a brand new function and

name it say something nice the name of

the function doesn't matter that's just

what I'm going with so I've got the name

and then parentheses curly brackets okay

now we can spell out what this function

should do just a minute but on this line

within the parentheses for for each

let's pass it that function so say

something nice and now this line of code

almost makes sense in plain English

we've got our array of colors and we are

saying for each for each item in that

array say something nice so now check

this out down in the actual function

definition within these parentheses we

need to create a parameter so you could

just say X which is easy to type or we

could say color the name of the

parameter doesn't matter but then down

here in the body of the function let's

say document dot right because remember

we want to output something down here

that says the color blank is a great

color so I'm just gonna say quotes the

color and then a space and then add on

our parameter so for you it might be X

or whatever you name the parameter and

then add on another string of text begin

with the space and say is a great color

cool and there we see the color red is a

great color color orange the color

yellow if you wanted each one to sit on

its own line it's just a matter of HTML

so right after this period we could just

add a

break tag perfect now this may not seem

that impressive but it's cool because

our code is now flexible meaning in the

future if we ever added new colors to

our array it's going to automatically

display onto the webpage so if we came

up here and at the end of the array

added on comma green that's all we need

to do and now we see the color green is

a great color now the real reason we

just learned about this for each

function is to show you that it is a

higher-order function that is part of

the core JavaScript language itself

right for its argument it accepts a

function however indirectly we also just

learned why arrays can be so useful once

you have items in a collection like this

computers are very skilled at performing

a repetitive task or looping through the

array and doing something once for each

item so we could just as well imagine

that each one of these was an email in

your inbox or a post on Facebook or a

photo post on Instagram okay anyways

that was a quick look at the for each

method now two of the other most useful

higher-order functions in JavaScript

that I leverage on a daily basis also

have to do with arrays and you do not

need to type this out but they are map

and filter I only typed out the name of

our array variable here to show you that

these are functions or methods that all

arrays automatically get access to now

we actually are not going to learn about

map and filter in this lesson because

we've already covered enough new ground

and material for one lesson but we are

going to learn about map and filter in

our very next lesson and this is great

because these functions are the perfect

segue into our next topic now this next

topic might seem like a minor detail but

in actuality it's crew

to understanding JavaScript it's a

concept that might be obvious if you're

familiar with another programming

language but I know that personally in

my own experience I wish that someone

would have stressed this concept to me

when I was first starting out and what

is that concept it's the difference

between returning a value and mutating a

value so what in the world does that

even mean well we're gonna learn all

about it in our next lesson so let's

keep things rolling and I will see you

then the ten days of JavaScript is the

first chapter from my upcoming premium

course full stack JavaScript from

scratch I'm making these first 10 or 11

videos freely available on YouTube and

so for the next 10 days I'm going to

upload one new video each day so stay

tuned or if you're watching this in the

future all the lessons are up so feel

free to binge watch the full premium

course is not available just yet but if

you subscribe to this channel you'll be

notified as soon as it's out or you're

watching this video in the future it's

already available enjoy

you

[Music]

Related Videos

Be the first to comment “The 10 Days of JavaScript: Day 6 (Greater-Order Features)”

Your email address will not be published.

There are no comments yet.