1
00:00:01,280 --> 00:00:06,020
All right, next up, let's talk about Arab functions, and these are functions that are often used

2
00:00:06,020 --> 00:00:08,310
in callbacks and you'll see what I mean a minute.

3
00:00:09,590 --> 00:00:16,880
So this is a function is passed in as a parameter to another function in that function calls the first

4
00:00:16,880 --> 00:00:17,330
function.

5
00:00:19,070 --> 00:00:26,750
So here's an example over function that's called Run It and it takes a primer f and inside that function,

6
00:00:26,750 --> 00:00:30,050
it just says run that F as another function.

7
00:00:31,580 --> 00:00:39,740
And then when we actually call run it, we pass in a function to it and we're going to show some examples

8
00:00:39,740 --> 00:00:41,390
that are going to make this a little more clear.

9
00:00:42,050 --> 00:00:47,120
But the Arrow function says you have a list of parameters.

10
00:00:47,120 --> 00:00:48,110
In this case, we have none.

11
00:00:48,140 --> 00:00:53,140
So there's left parenthesis, right parentheses and then the arrow.

12
00:00:53,720 --> 00:00:56,020
And then after that is the definition of the function.

13
00:00:56,900 --> 00:00:58,690
So curly brace and curly brace.

14
00:00:59,600 --> 00:01:04,890
So when F is called above all that does is run the function that says council log.

15
00:01:04,910 --> 00:01:05,600
Hello, world.

16
00:01:07,610 --> 00:01:16,850
Now, here's a little bit more of a. a real example, so array's have a filter function and what you

17
00:01:16,850 --> 00:01:19,700
do is you pass in the arrow function into it.

18
00:01:19,700 --> 00:01:26,120
And this is a really short version because all we're doing is saying X Arrow X, less than five.

19
00:01:27,590 --> 00:01:35,720
And so what this does is it takes every a every value of a and evaluate it, passes it into this function

20
00:01:36,290 --> 00:01:37,970
and checks to see if it's less than five.

21
00:01:39,600 --> 00:01:44,460
So at the beginning, this is completely confusing, so we need to run some examples.

22
00:01:46,450 --> 00:01:51,850
OK, before we get completely into the area of functions or functions are a shortcut for just a regular

23
00:01:51,850 --> 00:01:54,610
function, so let's do it that way.

24
00:01:55,360 --> 00:01:58,920
So what we do is I'm going to create a anonymous function.

25
00:01:58,930 --> 00:02:04,540
I'm going to say let my function equals function.

26
00:02:05,150 --> 00:02:10,600
I'm going to take a string and I'm going to log out that string.

27
00:02:13,740 --> 00:02:15,970
OK, so I have a function I can I can call it

28
00:02:21,730 --> 00:02:25,270
so I can call it my function.

29
00:02:29,380 --> 00:02:29,860
Hello.

30
00:02:31,330 --> 00:02:32,470
So let's just run that.

31
00:02:36,130 --> 00:02:41,170
So we've got our second helo down here and what it is called this function and Ranit.

32
00:02:42,780 --> 00:02:49,110
So let's say we had another function that wanted to take this function and do something with it, so

33
00:02:49,110 --> 00:03:03,040
let's make another function down here and we'll call it function string at her story or one last year

34
00:03:03,040 --> 00:03:03,790
or two.

35
00:03:05,040 --> 00:03:11,250
And what this is going to do is to take two strings, concatenate them together and put them to the

36
00:03:11,250 --> 00:03:11,620
log.

37
00:03:13,260 --> 00:03:18,000
So our final string is going to look like there's a concern

38
00:03:24,790 --> 00:03:25,070
now.

39
00:03:25,290 --> 00:03:28,230
So just consider what we want a function to do this.

40
00:03:29,040 --> 00:03:31,530
So we're going to take a function as a parameter.

41
00:03:35,740 --> 00:03:37,900
And this function is going to take this string.

42
00:03:41,140 --> 00:03:42,910
So when we call this.

43
00:03:45,570 --> 00:03:47,640
Going to say string atter

44
00:03:50,880 --> 00:03:58,350
Hello, World, and a third premier has to be the function so opposite to my function.

45
00:04:05,480 --> 00:04:10,520
And that is all we're going to do, so let's run this, but we'll run it with a debugger so we see what's

46
00:04:10,520 --> 00:04:10,940
happening.

47
00:04:15,170 --> 00:04:25,220
So sources and we're just going to get a break here and run it, so it takes the break, I'm going to

48
00:04:25,220 --> 00:04:31,850
hit if loving to step in and steps into the string at her function and it puts those two strands together.

49
00:04:31,850 --> 00:04:34,640
And so we have a whole world string now.

50
00:04:34,640 --> 00:04:35,540
We got our function.

51
00:04:35,540 --> 00:04:38,140
And you can see here when I hover over it, it's my function.

52
00:04:38,240 --> 00:04:39,790
So we're just going to step into it.

53
00:04:40,490 --> 00:04:44,810
And now it's back here inside this function and it took our string.

54
00:04:44,810 --> 00:04:46,910
Hello, world is called Log it up.

55
00:04:50,090 --> 00:04:57,470
So there's our result, instead of defining a function here, we can define the function right here.

56
00:04:59,280 --> 00:05:10,020
So we'll just say, function astar, in this case, I want to keep it the same thing, I leave it on

57
00:05:10,020 --> 00:05:10,710
the same line

58
00:05:17,100 --> 00:05:20,160
and there we go to get rid of my function.

59
00:05:24,580 --> 00:05:25,650
Let's go back and run this.

60
00:05:25,980 --> 00:05:26,930
So we stopped here.

61
00:05:27,460 --> 00:05:34,300
We have a function there, so let's step in and remove the string adder and we got to string one string

62
00:05:34,300 --> 00:05:36,000
to our function.

63
00:05:36,010 --> 00:05:40,990
You can see it says it's anonymous that there is no name for this function, but is this function is

64
00:05:40,990 --> 00:05:41,740
defined up here.

65
00:05:43,330 --> 00:05:48,430
So if we step in, it's going to step back to here and you can kind of see a console's kind of highlighted

66
00:05:48,430 --> 00:05:48,730
there.

67
00:05:50,380 --> 00:05:53,230
And she's going to run that and it's going to be done.

68
00:05:55,910 --> 00:05:56,910
As a little girl.

69
00:05:57,500 --> 00:06:04,400
All right, so the earth function takes the place of this, so like I said, it's just a shortcut.

70
00:06:04,610 --> 00:06:11,670
So get rid of the word function and we got to put instead of the curly braces when we need to curly

71
00:06:11,690 --> 00:06:16,340
braces, we'll say equal sign greater, then that's the arrow.

72
00:06:17,420 --> 00:06:19,000
So that defines our function.

73
00:06:19,010 --> 00:06:20,450
We have our parameter coming in.

74
00:06:21,420 --> 00:06:26,430
It says here, our arrows says, here's the function and then we have our function body.

75
00:06:27,800 --> 00:06:32,380
And you can do the exact same thing, so it's safe to bring this up.

76
00:06:34,630 --> 00:06:35,170
Ron.

77
00:06:38,230 --> 00:06:38,980
Stepan.

78
00:06:40,600 --> 00:06:43,750
Steps back there in the exact same result.

79
00:06:49,120 --> 00:06:54,010
Now, there's an even shorter version where all you need to do is return a value as opposed to that

80
00:06:54,010 --> 00:06:54,490
next.

81
00:06:58,070 --> 00:07:04,850
So instead of our function doing logging, all we want to do is concatenate the values together that

82
00:07:04,850 --> 00:07:11,480
says send in the strings in general and return them concatenated together.

83
00:07:11,600 --> 00:07:19,730
So since all we're doing is the return statement, we don't need the curly braces or the return statement

84
00:07:20,450 --> 00:07:22,310
and we're going to get two parameters.

85
00:07:27,730 --> 00:07:39,350
So all this and we'll say return astar one plus last year to enthralls is going to do is concatenated

86
00:07:39,350 --> 00:07:40,790
to values together and return them.

87
00:07:41,600 --> 00:07:48,500
So in our function we no longer want to do this or we want to do is say

88
00:07:51,320 --> 00:07:53,930
cancel that log.

89
00:07:56,760 --> 00:07:57,090
Yes.

90
00:07:57,360 --> 00:08:00,660
One come Aschiana to.

91
00:08:04,410 --> 00:08:07,110
So this is an even shorter version of the Arrow function.

92
00:08:08,190 --> 00:08:13,550
So let's run that and before we do that, let's correct spelling of console.

93
00:08:17,240 --> 00:08:19,980
So let's run this.

94
00:08:21,080 --> 00:08:32,040
And let's step in, step in, it's going to execute the year one plus first year to go back to council

95
00:08:32,060 --> 00:08:36,020
that log and we're going to get the same result overall.

96
00:08:36,740 --> 00:08:43,100
So often with the arrow functions, it's a built in function that you want to call in.

97
00:08:43,160 --> 00:08:46,720
The example that I showed in the slides was the array filter.

98
00:08:48,320 --> 00:08:49,430
So let's do that next.

99
00:08:50,990 --> 00:08:52,550
So let's get rid of some of this stuff.

100
00:08:53,270 --> 00:08:57,500
Let's get rid of this and we'll define an array.

101
00:08:57,970 --> 00:09:01,060
I said, what are you.

102
00:09:01,200 --> 00:09:10,910
Equals one coming to a three, four, five, six, seven, eight, nine, comma ten.

103
00:09:11,330 --> 00:09:12,710
We'll get ten things into it.

104
00:09:13,820 --> 00:09:17,660
And then I want to get an array out of the values between three and seven.

105
00:09:19,700 --> 00:09:25,610
So we'll say let be array equals array, dot filter.

106
00:09:27,200 --> 00:09:30,800
And then here we're going to specify our filter.

107
00:09:31,640 --> 00:09:37,690
And because it's only one parameter, you don't have to use the parentheses.

108
00:09:37,820 --> 00:09:44,810
So you just say the parameter X and you can use it if you like, equals greater.

109
00:09:45,530 --> 00:09:51,220
And then the return statement and what the array is going to do is, as I said at one and then set it

110
00:09:51,230 --> 00:09:56,060
to, as I said, at three and check this return statement for each one.

111
00:09:56,770 --> 00:10:10,100
So I must say it's true when X is greater than or equal to three three and X is less than or equal to

112
00:10:10,100 --> 00:10:10,670
seven.

113
00:10:12,270 --> 00:10:14,000
So it's true in those cases

114
00:10:16,800 --> 00:10:17,200
semicolon.

115
00:10:18,350 --> 00:10:24,320
So it's a really short version of the of the array, but it's very commonly seen in some of these built

116
00:10:24,320 --> 00:10:25,100
in functions.

117
00:10:28,090 --> 00:10:29,470
And then let's load this up

118
00:10:34,930 --> 00:10:43,170
and let's go back to here and let's get rid of our break because we don't really want it anymore.

119
00:10:45,480 --> 00:10:51,280
And I'm going to run Hello, World, and you can see the just output, an array of Southbury three,

120
00:10:51,280 --> 00:10:52,570
four, five, six, seven.

121
00:10:54,190 --> 00:10:59,650
Then when you're looking at documentation and let's bring up documentation on the Mozilla site for the

122
00:10:59,650 --> 00:11:00,400
array filter.

123
00:11:02,260 --> 00:11:03,610
So here it is.

124
00:11:03,920 --> 00:11:08,800
And you see here the syntax says array, dot, filter, callback.

125
00:11:09,010 --> 00:11:12,070
And that's your clue that you're going to be passing in a function.

126
00:11:13,180 --> 00:11:19,120
And the callback has current value and that's what it's going to get, an index, an array, you know,

127
00:11:19,120 --> 00:11:21,910
show some some examples.

128
00:11:23,020 --> 00:11:24,670
Filter equals that that Folker.

129
00:11:28,270 --> 00:11:34,300
And then in visual studio code, well, you often see when you're doing this

130
00:11:37,390 --> 00:11:43,660
is the word predicate, and that's also your clue that it's going to take a callback like this.

131
00:11:45,760 --> 00:11:48,130
So it there's a function except for three arguments.

132
00:11:50,530 --> 00:11:56,380
OK, so that's our introduction to the Arrow function, and you'll use it most often as callbacks to

133
00:11:56,380 --> 00:11:57,330
DILTON functions.