Understanding Higher Order Functions

Modern JavaScript Incorporating Functions
10 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€92.78
List Price:  €129.90
You save:  €37.11
£79.40
List Price:  £111.16
You save:  £31.76
CA$136.11
List Price:  CA$190.56
You save:  CA$54.44
A$154.13
List Price:  A$215.78
You save:  A$61.65
S$135.08
List Price:  S$189.12
You save:  S$54.03
HK$782.28
List Price:  HK$1,095.23
You save:  HK$312.94
CHF 90.61
List Price:  CHF 126.85
You save:  CHF 36.24
NOK kr1,085.23
List Price:  NOK kr1,519.37
You save:  NOK kr434.13
DKK kr692.01
List Price:  DKK kr968.84
You save:  DKK kr276.83
NZ$167.80
List Price:  NZ$234.94
You save:  NZ$67.13
د.إ367.19
List Price:  د.إ514.08
You save:  د.إ146.89
৳10,976.08
List Price:  ৳15,366.96
You save:  ৳4,390.87
₹8,339.52
List Price:  ₹11,675.66
You save:  ₹3,336.14
RM473.25
List Price:  RM662.57
You save:  RM189.32
₦141,842.81
List Price:  ₦198,585.61
You save:  ₦56,742.80
₨27,810.04
List Price:  ₨38,935.18
You save:  ₨11,125.13
฿3,647.70
List Price:  ฿5,106.92
You save:  ฿1,459.22
₺3,232.12
List Price:  ₺4,525.11
You save:  ₺1,292.98
B$499.21
List Price:  B$698.91
You save:  B$199.70
R1,908.54
List Price:  R2,672.04
You save:  R763.49
Лв180.65
List Price:  Лв252.92
You save:  Лв72.26
₩135,197.71
List Price:  ₩189,282.20
You save:  ₩54,084.49
₪368.63
List Price:  ₪516.10
You save:  ₪147.47
₱5,633.91
List Price:  ₱7,887.71
You save:  ₱2,253.79
¥15,144.47
List Price:  ¥21,202.86
You save:  ¥6,058.39
MX$1,659.40
List Price:  MX$2,323.22
You save:  MX$663.82
QR364.31
List Price:  QR510.04
You save:  QR145.73
P1,370.91
List Price:  P1,919.33
You save:  P548.42
KSh13,148.68
List Price:  KSh18,408.68
You save:  KSh5,260
E£4,729.52
List Price:  E£6,621.52
You save:  E£1,892
ብር5,680.63
List Price:  ብር7,953.11
You save:  ብር2,272.48
Kz83,612.74
List Price:  Kz117,061.18
You save:  Kz33,448.44
CLP$97,978.20
List Price:  CLP$137,173.40
You save:  CLP$39,195.20
CN¥722.95
List Price:  CN¥1,012.16
You save:  CN¥289.21
RD$5,921.50
List Price:  RD$8,290.34
You save:  RD$2,368.83
DA13,490.83
List Price:  DA18,887.70
You save:  DA5,396.87
FJ$226.12
List Price:  FJ$316.58
You save:  FJ$90.46
Q779.86
List Price:  Q1,091.83
You save:  Q311.97
GY$20,923.51
List Price:  GY$29,293.76
You save:  GY$8,370.24
ISK kr13,946.60
List Price:  ISK kr19,525.80
You save:  ISK kr5,579.20
DH1,013.19
List Price:  DH1,418.51
You save:  DH405.32
L1,763.34
List Price:  L2,468.75
You save:  L705.40
ден5,702.11
List Price:  ден7,983.18
You save:  ден2,281.07
MOP$805.89
List Price:  MOP$1,128.28
You save:  MOP$322.39
N$1,893.44
List Price:  N$2,650.90
You save:  N$757.45
C$3,681.15
List Price:  C$5,153.75
You save:  C$1,472.60
रु13,335.63
List Price:  रु18,670.42
You save:  रु5,334.78
S/370.84
List Price:  S/519.19
You save:  S/148.35
K382.72
List Price:  K535.82
You save:  K153.10
SAR375
List Price:  SAR525.01
You save:  SAR150.01
ZK2,522.76
List Price:  ZK3,531.96
You save:  ZK1,009.20
L461.43
List Price:  L646.02
You save:  L184.59
Kč2,350.75
List Price:  Kč3,291.15
You save:  Kč940.39
Ft36,729.02
List Price:  Ft51,422.10
You save:  Ft14,693.08
SEK kr1,071.30
List Price:  SEK kr1,499.86
You save:  SEK kr428.56
ARS$85,766.82
List Price:  ARS$120,076.98
You save:  ARS$34,310.16
Bs691.04
List Price:  Bs967.48
You save:  Bs276.44
COP$387,583.68
List Price:  COP$542,632.66
You save:  COP$155,048.97
₡50,832.34
List Price:  ₡71,167.31
You save:  ₡20,334.97
L2,468.78
List Price:  L3,456.40
You save:  L987.61
₲737,805.73
List Price:  ₲1,032,957.54
You save:  ₲295,151.80
$U3,781.90
List Price:  $U5,294.82
You save:  $U1,512.91
zł400.73
List Price:  zł561.05
You save:  zł160.31
Already have an account? Log In

Transcript

JavaScript has what we call higher order functions. In fact, that's one of the more powerful features. One of the things we really like about functions in JavaScript is that they are higher order functions. What does that mean to be a higher order function. That simply means that you are able to pass a function into another function as an argument, or return a function from a function using the return statement. When those features exist, we say that programming language has higher order functions and JavaScript has those.

Now, to introduce this concept to you, I need to introduce two new global functions, set timeout and set interval. Now don't get too concerned as we continue to introduce global functions and methods to objects. You have to memorize all these. Just be aware of them that they're there that they're available. And then when you need them, you just need a good reference to look them up and remind yourself how they're used. That's how a lot of programming happens.

So let's take a look at set timeout first to introduce higher order functions. I'm going to open sublime. Now I've already created a function here, very simple function greeting is simply logs out Hello there. Now set timeout. What it does is allows me to execute a function after a certain amount of time. So I specify the function I want to execute.

And I also specify the amount of time I want to wait. So set timeout requires two arguments. So let's go ahead and enter set timeout. Then inside of parentheses, I enter my two arguments. The first one is the function I want to execute. Then I place a comma And then the second one is the amount of time I want to wait before I execute that function.

And this is expressed in milliseconds. So 1000 would be one second, I'm going to enter 5000 for five seconds. So that we're able to see the amount of time passed before Hello there, logs to the console. two parameters and set timeout, the function and the amount of time. I'm gonna go ahead and save this. Let's display the page and open the console has not displayed yet.

And now hello there displays. Now I'm going to dock this to the bottom of the console and refresh this one more time. So you can see that it takes five seconds for it to display. And there it is. So that's what set timeout does. All right, jumping back to sublime.

Now this is not the normal process for passing functions into other functions. Usually what you'll see done in code that you'll look at, and what most JavaScript programmers do is they use an anonymous function. Well, what is anonymous function? Well, basically anonymous function means you define the function right there. So instead of defining the function up here, and then placing the variable as a part of the set timeout parameter, you define the function as a part of that parameter. Now, I gave you this way of doing it first, because I think this is easier to understand for most people to get started working with higher order functions, sometimes when you see a function definition inside another function, it can confuse you but don't let it there really is going to be no difference.

So let me do Another set timeout, set timeout. Now let's define the function function, parentheses, open and closing braces. And now inside that function, I can enter the code that I want to execute. I'm just going to do a console dot log for this one as well. This one, let's say Hello, everyone. And I'll put a semicolon at the end.

But notice for the set timeout function, right now, we only have one parameter, we're only passing in one argument now, and that's the function that we've defined. So now we need to come down here, place a comma and enter the second argument which is the amount of time I'm going to enter seven seconds on that So we should see hello there printed after five seconds, then Hello everyone after seven seconds. Now before we execute this, these are structured a bit differently, but they accomplish the same thing. Up here I define the function first and then I called it inside the set timeout function. Here, I defined the function that I needed to call as a part of the argument that I'm passing to set timeout. So here's the function.

And this is called an anonymous function because it has no name. We don't use a name when we create an anonymous function. Now technically, the other function is an anonymous function as well. It has no name either is simply assigned to a variable greeting. And then we use that variable to pass the function to the set timeout function. Alright, let me save that.

Jump out, refresh. After five seconds, we should see Hello there. And then two more seconds. Hello, everyone. So we've accomplished two things, we've introduced higher order functions were passing a function into another function. And we've done it two different ways we define the function first pass it in, and we did it as an anonymous function.

This is what you will see with most experienced JavaScript programmers anonymous functions. If you feel more comfortable with this method, and go ahead and start using that method for now. All right, we're going to do one more global function and that's set interval. The only difference between set interval and set timeout set interval continues to call that function. It doesn't stop. We still have the time specification, but every time if, for example, we had five seconds, the first five seconds it would call That function five seconds later would call it again.

And we continue to do that until we called a global function clear interval and cleared out the ID associated with set interval. Okay, so what so set interval can continue to execute, set timeout only doesn't want. Alright, I'm going to remove this code. Let's create an example for set interval. First, I'm going to create a variable and set it equal to zero. Now I'm going to create another variable and this is going to be interval ID.

And I'm going to set that equal to set interval. And so interval ID is going to get an ID from set interval. And I'm going to use that ID to to control when I want to stop set interval. Now set interval I have the parentheses and then close it with an with a semi colon. Welcome back in the parentheses, I have two arguments I need to pass in one is the function and the other is the amount of time I'm going to do the function as an anonymous function. curly braces, now I can define the code that's inside the anonymous function.

I'm going to begin by logging i to the console. Then I'm going to increment i. Then I'm going to have an IF conditional. if i if i is greater than five, I'm going to call clear interval. This is the SR function to set interval. And I'm going to pass in to clear interval interval.

Interval ID. So what clear interval does is it stops calls that have been started by a sent set interval command and it does it for the inter will ID that I pass in. So I could have multiple set intervals. But the interval ID I pass in is the one that is going to clear. All right, so once i is greater than five, it will clear that, and so it will stop calling that function. This is going to be very similar to a loop is what we're going to see here.

But a loop is continually running, where this is based upon time. All right. Now, you may have noticed that we've defined our function. But look, we're still missing one more argument to set interval. And that's the amount of time I'm going to set that equal to 1000. Save that, jump out, refresh 012345 and then it stops.

Clear interval stopped. Okay, so once again, set interval very similar to set timeout, except it continues to execute, and it also returns an ID. And then you can use that ID to stop it using clear interval. We also used an anonymous function. That was the first argument that we passed into set interval. The second argument was the amount of time so that is higher order functions that is set interval and set timeout.

Let's continue with the next topic.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.