06 - Arrow Functions Introduction.vtt

WEBVTT

1
00:00:02.470 --> 00:00:03.050
 Instructor: ES6 has 

2
00:00:03.320 --> 00:00:04.680
introduced arrow functions which, 

3
00:00:04.860 --> 00:00:05.970
in my opinion, they have three 

4
00:00:05.980 --> 00:00:07.120
main benefits. First of all, 

5
00:00:07.130 --> 00:00:08.380
they are much concise than 

6
00:00:08.380 --> 00:00:10.050
regular functions. Second of all, 

7
00:00:10.060 --> 00:00:11.430
they have implicit returns, 

8
00:00:11.440 --> 00:00:13.580
which allows us to write these 

9
00:00:13.590 --> 00:00:15.540
nifty one-liners. Third of 

10
00:00:15.550 --> 00:00:17.210
all, it doesn't rebind the value 

11
00:00:17.220 --> 00:00:19.450
of this when you use a arrow 

12
00:00:19.460 --> 00:00:21.310
function inside of another 

13
00:00:21.320 --> 00:00:22.310
function, which is really 

14
00:00:22.320 --> 00:00:24.170
helpful for when you're doing 

15
00:00:24.180 --> 00:00:25.610
things like click handlers and 

16
00:00:25.685 --> 00:00:26.330
whatnot. We're going to take a 

17
00:00:26.330 --> 00:00:27.080
look at a whole bunch of 

18
00:00:27.090 --> 00:00:29.280
examples as well as, we're going 

19
00:00:29.355 --> 00:00:29.630
to be using arrow functions all 

20
00:00:29.640 --> 00:00:32.010
over the place in this course. 

21
00:00:32.850 --> 00:00:34.990
I've got this names array right 

22
00:00:35.000 --> 00:00:36.790
here, and I want to add Bos to 

23
00:00:36.800 --> 00:00:38.450
the end of all three of these. 

24
00:00:38.525 --> 00:00:39.190
Normally, you'd do something 

25
00:00:39.190 --> 00:00:40.550
like this. You'd say "const, 

26
00:00:40.625 --> 00:00:43.740
fullnames = names." and you'd 

27
00:00:43.750 --> 00:00:45.500
use map. Pass it a regular 

28
00:00:45.580 --> 00:00:46.630
function, it's going to pass you 

29
00:00:46.640 --> 00:00:48.730
the singular name, and we're 

30
00:00:48.805 --> 00:00:48.970
going to return. We're going 

31
00:00:48.980 --> 00:00:52.410
to use back text here, which is 

32
00:00:52.420 --> 00:00:53.440
our template strings. Don't 

33
00:00:53.450 --> 00:00:54.940
worry exactly about what that is, 

34
00:00:54.950 --> 00:00:56.410
if you're not sure just yet. We 

35
00:00:56.500 --> 00:00:57.920
have a whole chapter on that 

36
00:00:57.930 --> 00:01:00.320
coming up. Name and we're going 

37
00:01:00.395 --> 00:01:01.150
to tack Bos on to the end, 

38
00:01:01.310 --> 00:01:03.460
console log the full names. 

39
00:01:04.150 --> 00:01:05.070
What this is going to give me? 

40
00:01:05.145 --> 00:01:06.390
It's going to give me Wes Bos, 

41
00:01:06.400 --> 00:01:08.700
Kate Bos, Lex Bos in the entire 

42
00:01:08.710 --> 00:01:09.830
array. It took this array, 

43
00:01:10.010 --> 00:01:11.860
transformed it into whatever it 

44
00:01:11.470 --> 00:01:14.820
was plus the word "Bos" on the 

45
00:01:14.895 --> 00:01:16.400
end. That makes sense to me, 

46
00:01:17.910 --> 00:01:19.880
but this isn't an arrow function, 

47
00:01:19.890 --> 00:01:21.810
so let's take a look at how we 

48
00:01:21.820 --> 00:01:24.730
could rewrite that. I'm going to 

49
00:01:23.950 --> 00:01:24.870
leave that one up, just so we 

50
00:01:24.880 --> 00:01:27.060
can visualize. I'm going to 

51
00:01:27.135 --> 00:01:28.340
say fullnames2. The first thing 

52
00:01:28.350 --> 00:01:29.530
you do with an arrow function is, 

53
00:01:29.605 --> 00:01:30.600
you simply delete the word 

54
00:01:31.040 --> 00:01:32.800
function and you put in what's 

55
00:01:32.810 --> 00:01:34.590
called a fat arrow. If you've 

56
00:01:35.080 --> 00:01:36.160
come from other programming 

57
00:01:36.170 --> 00:01:37.130
languages, you might have seen 

58
00:01:37.140 --> 00:01:38.990
that before, but in JavaScript 

59
00:01:39.065 --> 00:01:39.930
it's the first time we're seeing 

60
00:01:39.940 --> 00:01:41.630
a fat arrow. It's an equals sign 

61
00:01:41.640 --> 00:01:43.100
with an angle bracket beside it. 

62
00:01:43.380 --> 00:01:45.100
That will do exactly the same 

63
00:01:45.170 --> 00:01:48.350
thing. We console log it, should 

64
00:01:48.360 --> 00:01:49.510
be no surprises there. We get 

65
00:01:49.520 --> 00:01:50.760
the exact same thing. That's 

66
00:01:50.760 --> 00:01:53.320
the first thing that you can do, 

67
00:01:52.970 --> 00:01:54.840
but we can go even further with 

68
00:01:54.850 --> 00:01:57.450
it where, if you only have one 

69
00:01:57.460 --> 00:01:58.700
parameter...If you've got two 

70
00:01:58.710 --> 00:01:59.820
parameters -- that's what these 

71
00:01:59.830 --> 00:02:01.570
parenthesis are for -- if you've 

72
00:02:01.570 --> 00:02:03.260
got two parameters, you can do 

73
00:02:03.270 --> 00:02:04.220
something like that. But if you 

74
00:02:04.230 --> 00:02:06.060
only have one, there's no need 

75
00:02:06.070 --> 00:02:07.380
to actually have the parenthesis 

76
00:02:07.910 --> 00:02:09.200
on it. That's a bit of a 

77
00:02:09.210 --> 00:02:10.540
stylistic choice. Some people 

78
00:02:10.550 --> 00:02:11.820
say put the parenthesis on 

79
00:02:11.840 --> 00:02:13.040
regardless if you have one or 

80
00:02:13.050 --> 00:02:15.730
two. In my case, if I have one, 

81
00:02:16.110 --> 00:02:17.640
I could do something like this. 

82
00:02:18.080 --> 00:02:19.710
That would do the same thing 

83
00:02:19.720 --> 00:02:22.810
again with fullnames3. Still 

84
00:02:22.820 --> 00:02:24.520
working great. What else 

85
00:02:24.530 --> 00:02:26.560
could I do with this? I can use 

86
00:02:26.570 --> 00:02:28.280
what's called an implicit return. 

87
00:02:28.800 --> 00:02:30.480
What's a explicit return? It's 

88
00:02:30.520 --> 00:02:31.950
when you explicitly write the 

89
00:02:31.960 --> 00:02:33.750
word "return" for what you are 

90
00:02:33.360 --> 00:02:34.970
returning. But a lot of these 

91
00:02:34.980 --> 00:02:36.120
call back functions that we 

92
00:02:36.130 --> 00:02:37.840
write in JavaScript are just one-

93
00:02:37.850 --> 00:02:39.820
liners, where we just return 

94
00:02:39.830 --> 00:02:40.970
something immediately in one 

95
00:02:40.980 --> 00:02:41.810
line. We don't need a whole 

96
00:02:41.820 --> 00:02:43.640
bunch of lines. Why do we 

97
00:02:43.640 --> 00:02:45.070
have to do this return? Well, 

98
00:02:45.080 --> 00:02:48.180
what we could do is rename that 

99
00:02:48.255 --> 00:02:49.410
fullnames4, is delete the return, 

100
00:02:50.390 --> 00:02:52.680
put it up on all of one line, 

101
00:02:52.755 --> 00:02:54.520
and then delete your curly 

102
00:02:54.530 --> 00:02:56.550
brackets. When you delete 

103
00:02:56.560 --> 00:02:58.110
your curly brackets, it's going 

104
00:02:58.120 --> 00:02:59.900
to be an implicit return, which 

105
00:02:59.910 --> 00:03:01.800
means we do not need to specify 

106
00:03:01.990 --> 00:03:03.890
that we are returning name Bos. 

107
00:03:04.210 --> 00:03:05.780
It will just assume that we're 

108
00:03:05.790 --> 00:03:07.480
doing so. This should give us 

109
00:03:07.555 --> 00:03:09.630
the exact same thing. There we 

110
00:03:09.705 --> 00:03:12.800
go. Then finally, if you 

111
00:03:12.810 --> 00:03:14.470
have no arguments at all -- in 

112
00:03:14.470 --> 00:03:15.800
this case obviously we need an 

113
00:03:15.810 --> 00:03:17.170
argument -- but if no arguments 

114
00:03:17.245 --> 00:03:18.870
at all, you need to pass some 

115
00:03:19.110 --> 00:03:21.890
empty parenthesis there. Then 

116
00:03:22.130 --> 00:03:23.220
you don't have a name in this 

117
00:03:23.230 --> 00:03:24.700
case. Maybe we'll just say Cool 

118
00:03:24.710 --> 00:03:27.010
Bos, and they'll all be Cool Bos 

119
00:03:27.020 --> 00:03:28.280
at the end. Oops, we already 

120
00:03:28.280 --> 00:03:29.730
used that variable here. That's 

121
00:03:29.740 --> 00:03:31.370
a little bit of a lesson. 

122
00:03:31.445 --> 00:03:32.190
Fullnames4 has already been 

123
00:03:32.190 --> 00:03:33.620
declared, because I used it 

124
00:03:33.620 --> 00:03:35.210
right here. You can't re-declare 

125
00:03:35.220 --> 00:03:37.270
a variable when you are using 

126
00:03:37.345 --> 00:03:38.510
const, I should rename that to 5 

127
00:03:38.240 --> 00:03:42.150
and make that 5. Another 

128
00:03:42.160 --> 00:03:43.270
thing we need to know about 

129
00:03:43.280 --> 00:03:44.670
arrow functions, at least right 

130
00:03:44.680 --> 00:03:46.870
now, they may change this in 

131
00:03:46.880 --> 00:03:48.380
future versions of JavaScript, 

132
00:03:48.040 --> 00:03:50.160
is that arrow functions are 

133
00:03:50.170 --> 00:03:52.330
always anonymous functions. What 

134
00:03:52.340 --> 00:03:53.840
is an anonymous function? An 

135
00:03:53.915 --> 00:03:54.790
anonymous function...or maybe 

136
00:03:54.800 --> 00:03:55.740
let's talk about, what's a name 

137
00:03:55.750 --> 00:03:56.970
function? A name function is 

138
00:03:57.045 --> 00:03:59.370
when you say something like this, 

139
00:03:58.160 --> 00:04:00.410
function say my name, and you 

140
00:04:00.420 --> 00:04:03.360
take in a name, then you alert, 

141
00:04:03.640 --> 00:04:05.280
or console log, or return, or 

142
00:04:05.290 --> 00:04:06.920
whatever it is. You say hello, 

143
00:04:06.995 --> 00:04:08.480
and you pop the person's name 

144
00:04:08.790 --> 00:04:09.910
right in there. That's a name 

145
00:04:09.920 --> 00:04:11.270
function. The benefit to 

146
00:04:11.280 --> 00:04:12.610
using a name function is that if 

147
00:04:12.620 --> 00:04:13.710
you have a stack trace, which 

148
00:04:13.720 --> 00:04:15.300
means if you have an error and 

149
00:04:15.375 --> 00:04:15.720
you want to figure out, where 

150
00:04:16.800 --> 00:04:18.680
did this go wrong, sometimes a 

151
00:04:18.690 --> 00:04:19.870
line number as to where it 

152
00:04:19.880 --> 00:04:22.620
happened isn't very helpful. You 

153
00:04:22.630 --> 00:04:23.670
need to know actually the name 

154
00:04:23.680 --> 00:04:24.540
of the function that it got 

155
00:04:24.560 --> 00:04:26.290
called in. If you use an 

156
00:04:26.300 --> 00:04:28.590
arrow function, you cannot name 

157
00:04:28.600 --> 00:04:31.100
them. We take a look at all of 

158
00:04:31.100 --> 00:04:32.730
our arrow functions here. None 

159
00:04:32.740 --> 00:04:33.610
of these have a name. This 

160
00:04:33.620 --> 00:04:35.360
doesn't have a name. That's not 

161
00:04:35.435 --> 00:04:35.870
even an arrow function. This 

162
00:04:35.870 --> 00:04:37.230
doesn't have a name. None of 

163
00:04:36.740 --> 00:04:38.910
them have a name. You can, 

164
00:04:38.920 --> 00:04:40.640
however, put them in a variable. 

165
00:04:40.715 --> 00:04:43.580
If I were to say something like 

166
00:04:43.655 --> 00:04:44.870
const, say my name = this looks 

167
00:04:44.870 --> 00:04:45.830
a little bit weird, and 

168
00:04:45.840 --> 00:04:47.140
sometimes people get a little 

169
00:04:47.140 --> 00:04:49.160
bit a freaked out by this. We 

170
00:04:49.170 --> 00:04:51.180
could say alert. We're going to 

171
00:04:50.800 --> 00:04:53.600
pass it. A name. We're going to 

172
00:04:53.675 --> 00:04:55.500
alert, hello, and pop someone's 

173
00:04:55.510 --> 00:04:59.200
name in there. Now I should able 

174
00:04:59.220 --> 00:05:01.800
to go like this, say my name. 

175
00:05:02.270 --> 00:05:04.240
Pass it Wes. If you can spell 

176
00:05:04.250 --> 00:05:05.060
your own name that would be 

177
00:05:05.070 --> 00:05:08.100
great. There we go, hello Wes, 

178
00:05:08.110 --> 00:05:09.900
when you refresh the actual name. 

179
00:05:10.300 --> 00:05:11.670
That is actually a function 

180
00:05:12.180 --> 00:05:13.450
declaration there. The thing we 

181
00:05:13.460 --> 00:05:16.090
need to know about that is it is 

182
00:05:16.100 --> 00:05:17.500
an anonymous function and it 

183
00:05:17.510 --> 00:05:18.720
will not give us very good stack 

184
00:05:18.730 --> 00:05:20.630
traces. However, if you're not 

185
00:05:20.240 --> 00:05:21.710
too concerned with that, then 

186
00:05:21.720 --> 00:05:23.410
you can absolutely go ahead. Of 

187
00:05:23.420 --> 00:05:25.400
course you could put these on 

188
00:05:25.530 --> 00:05:26.910
multiple lines as well.