WEBVTT

1
00:00:00.040 --> 00:00:04.400
<v Speaker 1>All right, get ready to dive deep into the sometimes confusing,

2
00:00:04.679 --> 00:00:09.080
<v Speaker 1>often surprising world of JavaScript types and grammar. Absolutely with

3
00:00:09.199 --> 00:00:14.880
<v Speaker 1>us as always is expert, and today we were taking

4
00:00:14.919 --> 00:00:18.039
<v Speaker 1>on Kyle Simpson's You Don't Know JS Types and Grammar,

5
00:00:18.120 --> 00:00:19.879
<v Speaker 1>one of best, one of the best books out there,

6
00:00:20.440 --> 00:00:23.160
<v Speaker 1>you know, with the fundamentals absolutely, like what are the

7
00:00:23.160 --> 00:00:24.640
<v Speaker 1>building blocks of JavaScript?

8
00:00:24.839 --> 00:00:29.359
<v Speaker 2>Yeah, so Simpson lays out these seven fundamental types in JavaScript.

9
00:00:29.719 --> 00:00:35.880
<v Speaker 2>They've got null and undefined, boolean, number, string, object, and symbol.

10
00:00:36.039 --> 00:00:41.119
<v Speaker 1>I remember when I first started with JavaScript, undefined and undeclared.

11
00:00:41.439 --> 00:00:43.799
<v Speaker 1>Yoh yeah, really got me tripped up.

12
00:00:43.960 --> 00:00:46.640
<v Speaker 2>It's a common one, for sure. Yeah, a lot of

13
00:00:46.640 --> 00:00:49.920
<v Speaker 2>folks stumble over that. And you know the tricky thing is, yeah,

14
00:00:50.119 --> 00:00:53.520
<v Speaker 2>it's not the variable itself that has the type in JavaScript,

15
00:00:53.840 --> 00:00:56.359
<v Speaker 2>it's the value. Oh okay, So you can have a

16
00:00:56.439 --> 00:00:59.759
<v Speaker 2>variable that exists but hasn't been given a value yet,

17
00:00:59.759 --> 00:01:00.719
<v Speaker 2>so it's undefined.

18
00:01:00.799 --> 00:01:01.159
<v Speaker 1>Okay.

19
00:01:01.399 --> 00:01:03.399
<v Speaker 2>But then you could also have a variable that you're

20
00:01:03.439 --> 00:01:07.120
<v Speaker 2>trying to use that doesn't even exist. It's undeclared. And

21
00:01:07.159 --> 00:01:10.200
<v Speaker 2>the funny or maybe not so funny thing is type

22
00:01:10.200 --> 00:01:12.439
<v Speaker 2>of returns undefined for both.

23
00:01:12.640 --> 00:01:14.760
<v Speaker 1>So it's like JavaScript is saying I don't know what

24
00:01:14.760 --> 00:01:15.640
<v Speaker 1>you're talking about.

25
00:01:15.599 --> 00:01:18.719
<v Speaker 2>Right, exactly, Like I've never even heard of that undefined

26
00:01:18.840 --> 00:01:19.719
<v Speaker 2>Yeah exactly.

27
00:01:19.920 --> 00:01:22.439
<v Speaker 1>So but is that I mean, that seems like a problem.

28
00:01:22.599 --> 00:01:25.200
<v Speaker 2>It might seem like it, but it's actually a really

29
00:01:25.239 --> 00:01:28.719
<v Speaker 2>clever safety net. Oh, it's JavaScript trying to protect you

30
00:01:28.799 --> 00:01:33.319
<v Speaker 2>from yourself by preventing these reference errors that would normally

31
00:01:33.400 --> 00:01:35.879
<v Speaker 2>just crash your program if you try to use a

32
00:01:35.959 --> 00:01:37.159
<v Speaker 2>variable that doesn't exist.

33
00:01:37.519 --> 00:01:41.640
<v Speaker 1>So is this like a featured detection kind.

34
00:01:41.439 --> 00:01:43.640
<v Speaker 2>Of that's a great way to think about it. Yeah, okay,

35
00:01:43.719 --> 00:01:45.799
<v Speaker 2>especially you know back in the day we had to

36
00:01:45.799 --> 00:01:49.519
<v Speaker 2>worry about different browsers supporting different things. Yeah, this was

37
00:01:49.560 --> 00:01:50.280
<v Speaker 2>a lifesaver.

38
00:01:50.480 --> 00:01:55.280
<v Speaker 1>So it's like a like a compatibility checker built in exactly. Okay. Cool,

39
00:01:55.319 --> 00:01:59.840
<v Speaker 1>So we've got these seven types. Let's start maybe with

40
00:02:00.560 --> 00:02:04.040
<v Speaker 1>a RAYS. You know, I used to think of a

41
00:02:04.120 --> 00:02:07.239
<v Speaker 1>RAYS as just like a list of things, but but

42
00:02:07.400 --> 00:02:10.680
<v Speaker 1>I ran into some really weird behavior. Oh with the

43
00:02:10.840 --> 00:02:13.680
<v Speaker 1>length property? Yeah, and delete?

44
00:02:14.120 --> 00:02:16.520
<v Speaker 2>What's with that length and delete? Those are those are

45
00:02:16.560 --> 00:02:19.360
<v Speaker 2>tricky ones. So you can use delete okay to remove

46
00:02:19.400 --> 00:02:22.199
<v Speaker 2>an element from an array. But the weird thing is

47
00:02:23.000 --> 00:02:26.000
<v Speaker 2>it doesn't actually change the length. What it just leaves

48
00:02:26.039 --> 00:02:28.120
<v Speaker 2>this like this gap there. So you end up with

49
00:02:28.159 --> 00:02:32.280
<v Speaker 2>this thing called a sparse array, a sparse array which

50
00:02:33.560 --> 00:02:36.199
<v Speaker 2>behaves differently than like a dense array.

51
00:02:36.280 --> 00:02:38.319
<v Speaker 1>So it's like I delete a word from a sentence,

52
00:02:38.759 --> 00:02:40.000
<v Speaker 1>but I leave the space there.

53
00:02:40.159 --> 00:02:42.759
<v Speaker 2>Yeah, exactly exactly. It looks weird and it can mess

54
00:02:42.800 --> 00:02:45.159
<v Speaker 2>things up if you're not careful. If you need to

55
00:02:45.199 --> 00:02:47.960
<v Speaker 2>actually remove an element and shift everything over, you'd use

56
00:02:48.000 --> 00:02:48.879
<v Speaker 2>something like splice.

57
00:02:49.000 --> 00:02:49.360
<v Speaker 1>Okay.

58
00:02:49.400 --> 00:02:51.439
<v Speaker 2>But yeah, delete and length those are those are different?

59
00:02:51.520 --> 00:02:51.759
<v Speaker 2>Got it?

60
00:02:51.759 --> 00:02:55.879
<v Speaker 1>Okay, So that's on my my weird JavaScript quirks checklist.

61
00:02:56.039 --> 00:02:57.240
<v Speaker 2>It's a growing list, right, it is.

62
00:02:57.240 --> 00:03:02.439
<v Speaker 1>A growing list, it is. Okay. String Okay, I for

63
00:03:02.479 --> 00:03:05.520
<v Speaker 1>the longest time thought that strings were just a raise

64
00:03:05.599 --> 00:03:06.520
<v Speaker 1>of characters.

65
00:03:06.879 --> 00:03:08.319
<v Speaker 2>Yeah, that's a common one.

66
00:03:08.439 --> 00:03:08.960
<v Speaker 1>Is that wrong?

67
00:03:09.360 --> 00:03:13.439
<v Speaker 2>It is? Yeah, so they might seem like that, okay,

68
00:03:13.479 --> 00:03:15.960
<v Speaker 2>But strings are immutable, which means you can't just like

69
00:03:16.199 --> 00:03:18.719
<v Speaker 2>change them in place. Oh okay, So if you use

70
00:03:18.960 --> 00:03:23.280
<v Speaker 2>a string method like the uppercase, it's not actually changing

71
00:03:23.280 --> 00:03:27.039
<v Speaker 2>the original string, it's creating a whole new string really

72
00:03:27.120 --> 00:03:28.280
<v Speaker 2>with the uppercase letters.

73
00:03:28.479 --> 00:03:31.360
<v Speaker 1>Huh. Yeah, that's why my debugger is always so cluttered, right.

74
00:03:31.960 --> 00:03:34.120
<v Speaker 2>It can be hard to track it is. Yeah, but

75
00:03:34.159 --> 00:03:38.080
<v Speaker 2>it's it's actually really good for like, yeah, predictability and

76
00:03:38.159 --> 00:03:39.560
<v Speaker 2>thread safety things like that.

77
00:03:39.639 --> 00:03:42.360
<v Speaker 1>So every time I'm manipulating a string and creating a

78
00:03:42.360 --> 00:03:43.080
<v Speaker 1>whole new string.

79
00:03:43.280 --> 00:03:43.719
<v Speaker 2>You got it.

80
00:03:44.000 --> 00:03:46.000
<v Speaker 1>Okay, that's yeah, I did not know that.

81
00:03:46.000 --> 00:03:48.159
<v Speaker 2>It's one of those things that's often kind of hidden, Yeah,

82
00:03:48.360 --> 00:03:48.960
<v Speaker 2>under the hood.

83
00:03:50.120 --> 00:03:53.639
<v Speaker 1>Cool. Well, let's move on to another one that can

84
00:03:53.719 --> 00:03:56.919
<v Speaker 1>lead to some unexpected behavior. Oh yeah, numbers.

85
00:03:57.120 --> 00:03:57.479
<v Speaker 2>Numbers.

86
00:03:58.159 --> 00:04:04.240
<v Speaker 1>I vividly remember pulling an all nighter in college. Oh no,

87
00:04:04.560 --> 00:04:08.039
<v Speaker 1>because point one plus point two wasn't point three. I

88
00:04:08.080 --> 00:04:09.280
<v Speaker 1>thought my code was broken.

89
00:04:09.960 --> 00:04:14.680
<v Speaker 2>Ah, the classic JavaScript math problem. Yeah, this is uh,

90
00:04:14.719 --> 00:04:18.040
<v Speaker 2>this is where the IE seven fifty four standard it

91
00:04:18.120 --> 00:04:22.920
<v Speaker 2>comes in. It's uh, it governs how JavaScript handles floating

92
00:04:22.959 --> 00:04:27.639
<v Speaker 2>point numbers, Okay, and certain decimal numbers like point one

93
00:04:27.639 --> 00:04:31.199
<v Speaker 2>to point two. They just can't be precisely represented in

94
00:04:31.240 --> 00:04:34.120
<v Speaker 2>binary So it's like trying to fit a square peg

95
00:04:34.199 --> 00:04:34.920
<v Speaker 2>in a round hole.

96
00:04:35.360 --> 00:04:37.959
<v Speaker 1>So wait, so it's not that JavaScript is wrong, it's

97
00:04:38.120 --> 00:04:41.480
<v Speaker 1>it's that's not JavaScript bug. No, it's that computers can't

98
00:04:41.560 --> 00:04:42.959
<v Speaker 1>represent these numbers correctly.

99
00:04:43.000 --> 00:04:46.160
<v Speaker 2>It's a limitation of how computers represent numbers.

100
00:04:46.199 --> 00:04:46.519
<v Speaker 1>Got it?

101
00:04:46.560 --> 00:04:49.639
<v Speaker 2>And it affects a lot of programming languages, not just JavaScript.

102
00:04:49.720 --> 00:04:53.040
<v Speaker 1>So what you're saying is, don't trust JavaScript with my

103
00:04:53.120 --> 00:04:53.839
<v Speaker 1>bank account.

104
00:04:54.600 --> 00:04:55.720
<v Speaker 2>Probably a good rule with them.

105
00:04:55.879 --> 00:05:01.040
<v Speaker 1>Okay, all right, well let's move on then to maybe

106
00:05:01.079 --> 00:05:06.519
<v Speaker 1>two of JavaScript's greatest hits when it comes to confusing terminology.

107
00:05:06.639 --> 00:05:09.319
<v Speaker 1>Oh yeah, Nan and negative zero.

108
00:05:09.199 --> 00:05:10.120
<v Speaker 2>The dynamic duo.

109
00:05:10.319 --> 00:05:12.800
<v Speaker 1>I mean, come on, nan is it's not a number.

110
00:05:12.600 --> 00:05:14.680
<v Speaker 2>Right, But here's the thing. It is a number type.

111
00:05:14.680 --> 00:05:17.439
<v Speaker 1>Wait, wait, hold on, It's not a number, but it's

112
00:05:17.480 --> 00:05:17.959
<v Speaker 1>a number.

113
00:05:18.160 --> 00:05:19.040
<v Speaker 2>It's one of those.

114
00:05:19.199 --> 00:05:21.480
<v Speaker 1>That's like saying a squares in a shape, but it's

115
00:05:21.519 --> 00:05:22.800
<v Speaker 1>also a type of shape.

116
00:05:22.879 --> 00:05:26.160
<v Speaker 2>Yeah, it's It definitely takes a bit of mental gymnastics

117
00:05:26.160 --> 00:05:29.000
<v Speaker 2>to wrap your head around, but think of it as

118
00:05:29.040 --> 00:05:32.519
<v Speaker 2>a signal that's something has gone wrong in a calculation. Okay.

119
00:05:32.759 --> 00:05:39.879
<v Speaker 2>JavaScript uses NAN to basically say, hey, this operation resulted

120
00:05:39.920 --> 00:05:44.800
<v Speaker 2>in an invalid numeric value, and you can't just directly

121
00:05:44.800 --> 00:05:49.040
<v Speaker 2>compare something to NAN with like an equality operation. Yes,

122
00:05:49.519 --> 00:05:54.680
<v Speaker 2>that's why we have number to specifically test for NAN.

123
00:05:55.079 --> 00:05:58.480
<v Speaker 1>Gotcha, Okay? And negative zero, like, why does that even exist?

124
00:05:58.480 --> 00:05:59.839
<v Speaker 1>I've seen it pop up in the console.

125
00:06:00.040 --> 00:06:03.959
<v Speaker 2>I just I know, right, it seems unnecessary at first glance,

126
00:06:04.759 --> 00:06:09.360
<v Speaker 2>but it actually does have implications for certain mathematical operations,

127
00:06:09.399 --> 00:06:12.360
<v Speaker 2>like what like if you divide by negative zero, you

128
00:06:12.439 --> 00:06:17.360
<v Speaker 2>get negative infinity. Oh okay, so it's not just completely useless.

129
00:06:17.399 --> 00:06:18.079
<v Speaker 1>It has meaning.

130
00:06:18.240 --> 00:06:18.560
<v Speaker 2>It does.

131
00:06:18.639 --> 00:06:22.360
<v Speaker 1>Yeah, it's like a secret code. Yeah, kind of.

132
00:06:22.600 --> 00:06:25.839
<v Speaker 2>JavaScript's using to like preserve information.

133
00:06:25.480 --> 00:06:30.240
<v Speaker 1>Exactly about like which direction the value was approaching zero from.

134
00:06:30.360 --> 00:06:34.680
<v Speaker 2>Okay, yeah, that's that's really cool. All right. Well, speaking

135
00:06:34.720 --> 00:06:38.639
<v Speaker 2>of things that can be a little bit misleading, let's

136
00:06:38.680 --> 00:06:42.040
<v Speaker 2>talk about primitive values versus references.

137
00:06:42.160 --> 00:06:44.600
<v Speaker 1>Oh yeah, that's a big one. And this is where

138
00:06:45.199 --> 00:06:48.240
<v Speaker 1>I think, you know, folks coming from other languages especially

139
00:06:48.319 --> 00:06:51.120
<v Speaker 1>like really get thrown for a loop, right, because.

140
00:06:50.839 --> 00:06:55.079
<v Speaker 2>In some languages everything is an object. So in JavaScript

141
00:06:55.079 --> 00:06:58.680
<v Speaker 2>we have this difference between like primitive values like numbers

142
00:06:58.720 --> 00:07:02.439
<v Speaker 2>and strings, yeah, and then objects like a raise and

143
00:07:02.839 --> 00:07:04.519
<v Speaker 2>well objects objects. Yeah.

144
00:07:04.600 --> 00:07:07.600
<v Speaker 1>And the key difference is in how they're stored and assigned.

145
00:07:08.199 --> 00:07:13.920
<v Speaker 1>So primitives, those are immutable, right, so they can't be changed, okay,

146
00:07:14.040 --> 00:07:18.160
<v Speaker 1>and they're always copied by value by value, So when

147
00:07:18.199 --> 00:07:20.959
<v Speaker 1>you assign a primitive value to a variable.

148
00:07:21.079 --> 00:07:26.040
<v Speaker 2>You're creating a whole separate copy of that value. Objects

149
00:07:26.079 --> 00:07:28.920
<v Speaker 2>on the other hand, are different. When you assign an

150
00:07:28.920 --> 00:07:32.959
<v Speaker 2>object to a variable, you're not creating a copy, you're

151
00:07:33.000 --> 00:07:34.399
<v Speaker 2>creating a reference to it.

152
00:07:34.439 --> 00:07:37.160
<v Speaker 1>So it's like two different names for the same house.

153
00:07:37.319 --> 00:07:39.040
<v Speaker 2>That's a great way to think about it. Okay, So

154
00:07:39.079 --> 00:07:43.319
<v Speaker 2>both of those variables are pointing to the same place

155
00:07:43.399 --> 00:07:46.199
<v Speaker 2>in memory, the same object, got it. So if you

156
00:07:46.360 --> 00:07:50.600
<v Speaker 2>modify the object using one reference, the changes are going

157
00:07:50.639 --> 00:07:51.720
<v Speaker 2>to be reflected everywhere.

158
00:07:51.800 --> 00:07:54.160
<v Speaker 1>Right, Yeah, that makes sense. But I can see how

159
00:07:54.160 --> 00:07:56.680
<v Speaker 1>it could go wrong if you're not paying attention.

160
00:07:56.879 --> 00:08:00.959
<v Speaker 2>Yeah, absolutely, you got to really keep that all right. Well,

161
00:08:00.959 --> 00:08:03.399
<v Speaker 2>we're talking about objects. Let's talk about some of those

162
00:08:03.439 --> 00:08:12.399
<v Speaker 2>built in functions that Simpson calls natives men natives like string, number, array, object.

163
00:08:12.879 --> 00:08:15.040
<v Speaker 2>I use these all the time, but I have to.

164
00:08:15.000 --> 00:08:19.240
<v Speaker 1>Admit I've never really understood what's happening behind the scenes.

165
00:08:20.000 --> 00:08:21.480
<v Speaker 1>Like when I use the new keyword.

166
00:08:21.560 --> 00:08:24.759
<v Speaker 2>Oh, the new keyword. Yeah, that's where things get a

167
00:08:24.759 --> 00:08:27.560
<v Speaker 2>little funky. So that's where this concept of boxing comes in.

168
00:08:28.160 --> 00:08:30.639
<v Speaker 2>When you use a native function like string with a

169
00:08:30.680 --> 00:08:33.919
<v Speaker 2>new keyword, you're not actually creating a new string. Oh,

170
00:08:34.080 --> 00:08:38.440
<v Speaker 2>You're creating this thing called an object wrapper, an object

171
00:08:38.480 --> 00:08:41.480
<v Speaker 2>wrapper around the primitive value. So it's like, you know,

172
00:08:41.559 --> 00:08:44.039
<v Speaker 2>you're taking a simple value and you're putting it in

173
00:08:44.120 --> 00:08:45.720
<v Speaker 2>this like fancy box.

174
00:08:45.960 --> 00:08:47.159
<v Speaker 1>It's a decorated string.

175
00:08:47.559 --> 00:08:52.039
<v Speaker 2>Yeah, yeah, exactly. That comes with like extra methods and properties, so.

176
00:08:52.000 --> 00:08:54.279
<v Speaker 1>It's not just a string anymore. It's an object that

177
00:08:54.320 --> 00:08:55.120
<v Speaker 1>contains the string.

178
00:08:55.360 --> 00:08:59.159
<v Speaker 2>That's exactly right. Okay, Yeah, and that object wrapper gives

179
00:08:59.159 --> 00:09:03.480
<v Speaker 2>you extra function Okay. But the really wild thing is

180
00:09:03.879 --> 00:09:07.559
<v Speaker 2>that this boxing happens automatically really when you try to

181
00:09:07.679 --> 00:09:10.120
<v Speaker 2>use methods on primitive values.

182
00:09:10.559 --> 00:09:11.159
<v Speaker 1>Behind the scenes.

183
00:09:11.240 --> 00:09:13.440
<v Speaker 2>Yeah, behind the scenes. So it's like JavaScript is saying, oh,

184
00:09:13.480 --> 00:09:14.000
<v Speaker 2>worry about it.

185
00:09:14.039 --> 00:09:14.679
<v Speaker 1>I got you.

186
00:09:14.679 --> 00:09:17.799
<v Speaker 2>You want to use an object method on a primitive

187
00:09:19.639 --> 00:09:22.879
<v Speaker 2>no problem, I'll just box it for you real quick.

188
00:09:23.000 --> 00:09:24.840
<v Speaker 1>It's like it's like JavaScript magic.

189
00:09:25.000 --> 00:09:28.360
<v Speaker 2>It's a little bit magical. And then there's unboxing.

190
00:09:28.480 --> 00:09:29.840
<v Speaker 1>Oh there's unboxing too.

191
00:09:29.720 --> 00:09:31.799
<v Speaker 2>Yeah, which is just the reverse. Ok So, if you

192
00:09:31.879 --> 00:09:34.279
<v Speaker 2>use an object wrapper in a context where you need

193
00:09:34.440 --> 00:09:38.519
<v Speaker 2>the primitive value, JavaScript will just automatically unbox it.

194
00:09:38.720 --> 00:09:41.759
<v Speaker 1>So take it out of the fancy box exactly. Yeah, Okay,

195
00:09:42.200 --> 00:09:44.440
<v Speaker 1>I never knew about boxing and unboxing.

196
00:09:44.799 --> 00:09:47.440
<v Speaker 2>Yeah, it's it's one of those things that that's cool.

197
00:09:47.600 --> 00:09:49.480
<v Speaker 2>It often happens behind the scenes, all right.

198
00:09:49.480 --> 00:09:53.360
<v Speaker 1>Well, and then there's the array constructor. Yeah, and this

199
00:09:53.360 --> 00:09:56.159
<v Speaker 1>this myth of precizing arrays, Oh.

200
00:09:56.080 --> 00:10:00.200
<v Speaker 2>The precizing myth. Yeah. So I've seen a lot of developers, yeah, right,

201
00:10:00.240 --> 00:10:04.440
<v Speaker 2>to create an array with a specific length, thinking that

202
00:10:04.519 --> 00:10:07.960
<v Speaker 2>they're like being a face reserving memory, pre allocating memory.

203
00:10:08.120 --> 00:10:11.080
<v Speaker 2>But that's not actually what happens when you do that.

204
00:10:11.720 --> 00:10:15.399
<v Speaker 2>You're creating a sparse array with that length. Okay, but

205
00:10:15.440 --> 00:10:16.240
<v Speaker 2>all the slots are.

206
00:10:16.120 --> 00:10:18.120
<v Speaker 1>Empty, so I'm not actually reserving memory.

207
00:10:18.159 --> 00:10:21.039
<v Speaker 2>No, You're not reserving memory, You're just creating.

208
00:10:20.799 --> 00:10:23.399
<v Speaker 1>I'm just I'm just making a list of empty.

209
00:10:23.039 --> 00:10:25.240
<v Speaker 2>Slots exactly like a bunch of placeholders.

210
00:10:25.279 --> 00:10:27.759
<v Speaker 1>Placeholders, Okay, I got it. Yeah, And those can those

211
00:10:27.799 --> 00:10:33.480
<v Speaker 1>can behave strangely, so generally best to avoid that, avoid

212
00:10:33.519 --> 00:10:36.360
<v Speaker 1>pre sizing unless you really know okay, what you're.

213
00:10:36.200 --> 00:10:39.279
<v Speaker 2>Doing, got it, all right, Well, speaking of things that

214
00:10:39.360 --> 00:10:41.720
<v Speaker 2>can be a little bit strange, let's talk about coersion.

215
00:10:41.919 --> 00:10:44.360
<v Speaker 1>Oh, coersion. Yeah, that's a that's a big one.

216
00:10:44.679 --> 00:10:47.120
<v Speaker 2>And I have a love hate it's a love hate

217
00:10:47.159 --> 00:10:51.279
<v Speaker 2>relationship with coercion. It can be really elegant, yeah, and

218
00:10:51.279 --> 00:10:54.559
<v Speaker 2>and and clean, but it can also but by lead

219
00:10:54.600 --> 00:10:56.399
<v Speaker 2>to some tricky buzzs.

220
00:10:56.480 --> 00:11:01.120
<v Speaker 1>Oh yeah, so many bugs. So uh, Coersion, at its

221
00:11:01.159 --> 00:11:06.039
<v Speaker 1>heart is simply jovscript's way of converting a value from

222
00:11:06.039 --> 00:11:08.600
<v Speaker 1>one type to another. Okay, and we've got two flavors

223
00:11:08.600 --> 00:11:11.519
<v Speaker 1>of coercion, right we do, Yeah, explicit and implicit.

224
00:11:11.679 --> 00:11:15.919
<v Speaker 2>Explicit where you're basically, like, you know, explicitly saying JavaScript,

225
00:11:15.919 --> 00:11:18.440
<v Speaker 2>I want you to convert this value. You use you know,

226
00:11:18.480 --> 00:11:21.679
<v Speaker 2>functions like string or number or bullion, and then you

227
00:11:21.679 --> 00:11:25.480
<v Speaker 2>have implicit coercion, which is where it happens like yeah,

228
00:11:25.480 --> 00:11:27.720
<v Speaker 2>as a side effect of operations.

229
00:11:28.039 --> 00:11:30.679
<v Speaker 1>Okay, So give me an example, like what happens if

230
00:11:30.720 --> 00:11:32.919
<v Speaker 1>I add a string and a number together.

231
00:11:32.960 --> 00:11:36.360
<v Speaker 2>Oh yeah, So the plus operator in JavaScript, right, it

232
00:11:36.360 --> 00:11:40.200
<v Speaker 2>could be used for addition or for string concatenation. Oh right, right,

233
00:11:40.279 --> 00:11:43.559
<v Speaker 2>So if one of the operatings is a string, JavaScript's

234
00:11:43.559 --> 00:11:45.080
<v Speaker 2>gonna say, okay, I'm going to coerce the other one

235
00:11:45.080 --> 00:11:47.480
<v Speaker 2>to a string and do string concatenation.

236
00:11:47.720 --> 00:11:49.120
<v Speaker 1>So four plus two.

237
00:11:49.039 --> 00:11:51.519
<v Speaker 2>Would be forty two would be would.

238
00:11:51.360 --> 00:11:53.919
<v Speaker 1>Be a string, forty two a string, not the number.

239
00:11:53.720 --> 00:11:56.600
<v Speaker 2>Six exactly, got it. But if you use an operator

240
00:11:56.919 --> 00:12:01.120
<v Speaker 2>that's strictly for numbers, like say subtraction, JavaScript will try

241
00:12:01.159 --> 00:12:03.919
<v Speaker 2>to coerce any non number operats into numbers.

242
00:12:04.440 --> 00:12:06.759
<v Speaker 1>So forty two, the string and.

243
00:12:06.960 --> 00:12:08.960
<v Speaker 2>Zero would give you the number forty two. I'll give

244
00:12:09.000 --> 00:12:10.320
<v Speaker 2>you the number forty two exactly.

245
00:12:10.360 --> 00:12:11.559
<v Speaker 1>Okay, Yeah, right.

246
00:12:11.519 --> 00:12:15.799
<v Speaker 2>That makes sense. Okay. What about boolean coersion Bullian coersion?

247
00:12:15.919 --> 00:12:18.559
<v Speaker 1>Yeah, this is another big one, right, Yeah, this is

248
00:12:18.559 --> 00:12:21.159
<v Speaker 1>where those truthy and falsey values come in.

249
00:12:21.320 --> 00:12:25.320
<v Speaker 2>I think a lot of people even experience JavaScript developers.

250
00:12:25.360 --> 00:12:27.639
<v Speaker 2>I think this is where oh yeah, things can get

251
00:12:27.919 --> 00:12:28.559
<v Speaker 2>can get weird.

252
00:12:28.600 --> 00:12:30.799
<v Speaker 1>It's easy to trip up on this one, okay for sure.

253
00:12:31.000 --> 00:12:35.399
<v Speaker 1>So JavaScript has this specific set okay of values that

254
00:12:35.440 --> 00:12:36.519
<v Speaker 1>are considered falsey.

255
00:12:36.799 --> 00:12:41.879
<v Speaker 2>Okay, So like false itself, falls itself, null, undefined.

256
00:12:41.480 --> 00:12:44.679
<v Speaker 1>Yep, those are all falsey nan nan yeah.

257
00:12:44.559 --> 00:12:48.159
<v Speaker 2>Zero negative zero, negative zero, and d string empty string,

258
00:12:48.200 --> 00:12:50.679
<v Speaker 2>that's right, okay. And everything else is truth So.

259
00:12:50.639 --> 00:12:52.440
<v Speaker 1>Even an empty object is truthy.

260
00:12:52.559 --> 00:12:56.039
<v Speaker 2>Even an empty object is truthy, which can be a

261
00:12:56.080 --> 00:12:57.360
<v Speaker 2>little counterintuitive. Right.

262
00:12:57.440 --> 00:12:59.759
<v Speaker 1>So if I if I use an empty object and

263
00:12:59.840 --> 00:13:00.919
<v Speaker 1>if statement.

264
00:13:00.799 --> 00:13:03.840
<v Speaker 2>Ye, the code in the if block will execute?

265
00:13:04.000 --> 00:13:06.559
<v Speaker 1>It will it will? Yeah, It's one of those things

266
00:13:06.600 --> 00:13:08.080
<v Speaker 1>you just got to kind of, you know, got to remember,

267
00:13:08.120 --> 00:13:08.799
<v Speaker 1>burn into your.

268
00:13:08.679 --> 00:13:12.440
<v Speaker 2>Brain, burn it in now. Simpson talks about these ye

269
00:13:12.759 --> 00:13:15.919
<v Speaker 2>falsey objects, which yeah, I mean that just sounds like

270
00:13:16.240 --> 00:13:17.120
<v Speaker 2>a paradox to me.

271
00:13:17.639 --> 00:13:19.879
<v Speaker 1>Yeah, that's it's a little bit of a head scratcher

272
00:13:19.919 --> 00:13:24.879
<v Speaker 1>for sure. He's referring to, Okay, some quirks and how

273
00:13:25.120 --> 00:13:31.080
<v Speaker 1>older browsers used to handle certain objects. Like one of

274
00:13:30.759 --> 00:13:36.200
<v Speaker 1>the infamous examples is document in Internet Explorer. So in

275
00:13:36.320 --> 00:13:39.840
<v Speaker 1>older versions of IE, document all was an object that

276
00:13:39.919 --> 00:13:44.240
<v Speaker 1>represented all the elements on the page. But for compatibility reasons,

277
00:13:44.639 --> 00:13:47.360
<v Speaker 1>in later versions of IE, they made it behave like

278
00:13:47.399 --> 00:13:51.639
<v Speaker 1>a falsey value what in boolean context.

279
00:13:51.759 --> 00:13:53.759
<v Speaker 2>So it's like it's an object, but it's not an object.

280
00:13:53.840 --> 00:13:54.240
<v Speaker 2>It's like a.

281
00:13:55.879 --> 00:13:58.360
<v Speaker 1>Quantum object, the JavaScript quantum object.

282
00:13:58.120 --> 00:13:59.480
<v Speaker 2>A JavaScript quantum object.

283
00:13:59.480 --> 00:14:01.919
<v Speaker 1>It's one of those things that you might you might

284
00:14:01.960 --> 00:14:02.840
<v Speaker 1>run into if you're.

285
00:14:02.679 --> 00:14:05.039
<v Speaker 2>Dealing with like really old legacy code.

286
00:14:05.120 --> 00:14:09.039
<v Speaker 1>Okay, so another one for my weird JavaScript quirks checklist,

287
00:14:09.159 --> 00:14:15.679
<v Speaker 1>the long list. Okay, let's talk about explicit okay, bullian coercion.

288
00:14:15.200 --> 00:14:16.639
<v Speaker 2>Explicit bullying coercion.

289
00:14:16.720 --> 00:14:19.639
<v Speaker 1>Now, I know there's the boolean function, but I don't

290
00:14:19.639 --> 00:14:20.600
<v Speaker 1>think I've ever used that.

291
00:14:20.919 --> 00:14:23.320
<v Speaker 2>Yeah, you probably won't see that in a while. Very often,

292
00:14:24.399 --> 00:14:28.320
<v Speaker 2>the more idiomatic way to do explicit bullying coercion is

293
00:14:28.399 --> 00:14:31.240
<v Speaker 2>to use the double negation.

294
00:14:31.000 --> 00:14:35.039
<v Speaker 1>Operator double negation, So I'm saying like not not true, yeah,

295
00:14:35.039 --> 00:14:38.000
<v Speaker 1>which is true, or or not not false which is

296
00:14:38.039 --> 00:14:38.840
<v Speaker 1>false exactly.

297
00:14:39.000 --> 00:14:44.000
<v Speaker 2>Yeah. It's a it's a way to force that boolean context. Yeah,

298
00:14:44.039 --> 00:14:47.519
<v Speaker 2>and it's it's useful when you're dealing with values that

299
00:14:47.639 --> 00:14:50.879
<v Speaker 2>might be either truth or falsey. Yeah, and you just

300
00:14:50.919 --> 00:14:53.639
<v Speaker 2>need to like make sure sure, yeah that you're getting

301
00:14:53.639 --> 00:14:54.720
<v Speaker 2>a bullyan Okay, I got it.

302
00:14:55.600 --> 00:14:59.200
<v Speaker 1>Now, what about implicit bullian coercion implicity especially with the

303
00:14:59.240 --> 00:15:01.559
<v Speaker 1>logical operator and a d.

304
00:15:01.759 --> 00:15:04.320
<v Speaker 2>Oh yeah and the end of the yeah, this is yeah.

305
00:15:04.200 --> 00:15:06.840
<v Speaker 1>Because now these operators it's like they're not just about

306
00:15:06.919 --> 00:15:08.519
<v Speaker 1>logic anymore.

307
00:15:08.320 --> 00:15:09.559
<v Speaker 2>Right, They're not just about logic.

308
00:15:09.600 --> 00:15:13.080
<v Speaker 1>It's like they're yeah, selecting operad yeah, operand selectors.

309
00:15:13.240 --> 00:15:15.279
<v Speaker 2>Yeah, that's a great way to think about it. So

310
00:15:15.320 --> 00:15:20.600
<v Speaker 2>in JavaScript, the and an Indians they evaluate their operands

311
00:15:20.639 --> 00:15:23.240
<v Speaker 2>as booleans, right, right, and then they return one of

312
00:15:23.240 --> 00:15:26.080
<v Speaker 2>the operands okay, based on the results okay, And that's

313
00:15:26.120 --> 00:15:28.039
<v Speaker 2>where that concept of short circuiting comes in.

314
00:15:28.240 --> 00:15:31.919
<v Speaker 1>Right, So with O R, if the first operand is

315
00:15:32.000 --> 00:15:34.519
<v Speaker 1>truth y, yeah, it just it just stops.

316
00:15:34.639 --> 00:15:36.720
<v Speaker 2>It doesn't even look doesn't even look at the second one.

317
00:15:36.799 --> 00:15:39.960
<v Speaker 1>At the second one, I'm done. I found true.

318
00:15:40.200 --> 00:15:41.759
<v Speaker 2>It's like, I'm done here, I got what I need.

319
00:15:41.960 --> 00:15:44.600
<v Speaker 1>That's that's really efficient and with a D.

320
00:15:45.080 --> 00:15:48.159
<v Speaker 2>Yeah, if the first operand is falsey, it's done. It

321
00:15:48.320 --> 00:15:49.639
<v Speaker 2>just stops right.

322
00:15:49.480 --> 00:15:51.320
<v Speaker 1>There and doesn't even look at the second one.

323
00:15:51.399 --> 00:15:54.240
<v Speaker 2>That's right. And that's really important to keep in mind. Yeah,

324
00:15:54.320 --> 00:15:59.399
<v Speaker 2>when you're dealing with expressions that have like side effects,

325
00:15:59.440 --> 00:16:00.000
<v Speaker 2>side effects.

326
00:16:00.360 --> 00:16:03.519
<v Speaker 1>Well, and speaking of side effects, let's talk about the

327
00:16:03.559 --> 00:16:05.080
<v Speaker 1>increment and decrement.

328
00:16:04.720 --> 00:16:06.679
<v Speaker 2>Operator, the plus plus and flip.

329
00:16:07.039 --> 00:16:10.240
<v Speaker 1>These can be tricky. Yeah, those are I know, they

330
00:16:10.240 --> 00:16:12.519
<v Speaker 1>can be tricky. It's like, yeah, it depends whether they

331
00:16:12.639 --> 00:16:13.600
<v Speaker 1>use them before or after.

332
00:16:13.840 --> 00:16:16.639
<v Speaker 2>Yeah, it all comes down to the timing of the

333
00:16:16.639 --> 00:16:19.039
<v Speaker 2>side effect. Okay, So when you use plus plus or

334
00:16:19.039 --> 00:16:22.399
<v Speaker 2>before an operator, that's called pre increment or pre decrement,

335
00:16:23.080 --> 00:16:27.639
<v Speaker 2>and the operator is applied before the value is used

336
00:16:28.279 --> 00:16:29.000
<v Speaker 2>in the expression.

337
00:16:29.039 --> 00:16:32.440
<v Speaker 1>Okay. So so if I have like AA equals five,

338
00:16:32.840 --> 00:16:35.879
<v Speaker 1>and I do plus plus aa becomes six and the

339
00:16:35.960 --> 00:16:38.639
<v Speaker 1>value of the expression is also six, that's right. Okay,

340
00:16:39.399 --> 00:16:42.600
<v Speaker 1>But when I use them after after, that's the that's

341
00:16:42.639 --> 00:16:43.840
<v Speaker 1>post increment.

342
00:16:43.519 --> 00:16:46.360
<v Speaker 2>As post increment or post decrement. Okay, And in that case,

343
00:16:46.399 --> 00:16:49.080
<v Speaker 2>the original value is used in the expression and then

344
00:16:49.200 --> 00:16:50.720
<v Speaker 2>the increment or decrement happens.

345
00:16:50.840 --> 00:16:53.759
<v Speaker 1>So with with A plus plus, the value of the

346
00:16:53.799 --> 00:16:56.639
<v Speaker 1>expression is five, and then A becomes six exactly.

347
00:16:56.799 --> 00:17:01.919
<v Speaker 2>Yeah. So it's, uh, it's subtle, yeah, but it's it's

348
00:17:02.000 --> 00:17:02.759
<v Speaker 2>really important.

349
00:17:02.840 --> 00:17:04.240
<v Speaker 1>It's super important to keep.

350
00:17:04.119 --> 00:17:06.880
<v Speaker 2>Track of yees, especially when you're like in loops or

351
00:17:06.920 --> 00:17:08.839
<v Speaker 2>something like that. The loops a ray manipulation.

352
00:17:09.079 --> 00:17:13.559
<v Speaker 1>Okay, So pre increment modifies before, post increment modifies after.

353
00:17:13.799 --> 00:17:16.000
<v Speaker 1>Got it, I'm writing that down, good idea, Okay.

354
00:17:16.119 --> 00:17:22.640
<v Speaker 2>Now. Simpson also mentions this kind of obscure operator, Oh yeah,

355
00:17:22.799 --> 00:17:25.920
<v Speaker 2>that can be used to like control the order of

356
00:17:25.960 --> 00:17:29.440
<v Speaker 2>these side effects, the comma operator.

357
00:17:29.519 --> 00:17:31.519
<v Speaker 1>A comma operator. I don't think I've ever used that.

358
00:17:31.759 --> 00:17:35.519
<v Speaker 2>Yeah, it's it's one of JavaScript's lesser known features. Okay,

359
00:17:36.000 --> 00:17:38.240
<v Speaker 2>but it can be handy in certain cases. So the

360
00:17:38.279 --> 00:17:41.240
<v Speaker 2>comma operator lets you like string together a bunch of

361
00:17:41.279 --> 00:17:44.640
<v Speaker 2>expressions and it evaluates them from left to right. Okay,

362
00:17:45.000 --> 00:17:47.880
<v Speaker 2>And the important thing is that the completion value of

363
00:17:47.920 --> 00:17:50.759
<v Speaker 2>the whole expression is the value of the last expression.

364
00:17:50.759 --> 00:17:51.839
<v Speaker 1>Okay, So give me an example.

365
00:17:51.920 --> 00:17:55.640
<v Speaker 2>Okay, so let's say you have a plus plus a

366
00:17:56.039 --> 00:17:59.440
<v Speaker 2>comma bay. That comma operator will make sure that A

367
00:17:59.680 --> 00:18:03.920
<v Speaker 2>gets incremented or B is evaluated, and then the value

368
00:18:03.960 --> 00:18:06.599
<v Speaker 2>of the whole expression would be the value of B.

369
00:18:06.799 --> 00:18:07.920
<v Speaker 1>So it's like a way too.

370
00:18:08.319 --> 00:18:11.160
<v Speaker 2>Yeah, it's like a way to control source, yeah, for

371
00:18:11.440 --> 00:18:12.359
<v Speaker 2>that order of execution.

372
00:18:12.480 --> 00:18:14.039
<v Speaker 1>Okay, that's that's interesting.

373
00:18:14.279 --> 00:18:17.599
<v Speaker 2>It's a little comma operator. Yeah. Not something you'll use

374
00:18:17.640 --> 00:18:20.599
<v Speaker 2>every day, right, but good to know about.

375
00:18:20.920 --> 00:18:23.319
<v Speaker 1>Good to know about. Okay, all right, well, let's ship

376
00:18:23.359 --> 00:18:26.119
<v Speaker 1>gears a little bit and talk about building blocks of

377
00:18:26.200 --> 00:18:29.200
<v Speaker 1>JavaScript code. Statements and expressions.

378
00:18:29.200 --> 00:18:31.640
<v Speaker 2>Statements and expressions, Yeah, those are those are important.

379
00:18:31.720 --> 00:18:34.519
<v Speaker 1>Yeah, I have to admit I get them mixed up

380
00:18:34.599 --> 00:18:36.400
<v Speaker 1>sometimes it's easy to do.

381
00:18:37.240 --> 00:18:41.720
<v Speaker 2>So think of statements as like the actions or instructions,

382
00:18:41.799 --> 00:18:44.640
<v Speaker 2>right right, that tell JavaScript what to do. So they

383
00:18:44.680 --> 00:18:50.680
<v Speaker 2>perform tasks like you know, declaring variables, assigning values, controlling

384
00:18:50.720 --> 00:18:51.759
<v Speaker 2>the flow of execution.

385
00:18:52.079 --> 00:18:52.400
<v Speaker 1>Okay.

386
00:18:52.960 --> 00:18:56.920
<v Speaker 2>Expressions, on the other hand, are like values themselves.

387
00:18:57.240 --> 00:18:59.279
<v Speaker 1>So a statement is like a command.

388
00:18:59.680 --> 00:19:00.480
<v Speaker 2>Yeah, a command.

389
00:19:00.559 --> 00:19:02.599
<v Speaker 1>An expression is like a calculation.

390
00:19:03.119 --> 00:19:05.359
<v Speaker 2>That's a great way to think about it. Yeah. So like,

391
00:19:05.480 --> 00:19:09.079
<v Speaker 2>for example, yeah, let a ten that's a statement. Right,

392
00:19:09.400 --> 00:19:12.359
<v Speaker 2>that's an instruction to JavaScript saying, hey, create a variable

393
00:19:12.400 --> 00:19:16.279
<v Speaker 2>called a and assign it the value ten. The expression

394
00:19:16.279 --> 00:19:19.720
<v Speaker 2>ten plus five, on the other hand, that evaluates to fifteen.

395
00:19:19.839 --> 00:19:22.799
<v Speaker 1>Okay, that makes sense. But then Simpson throws in this

396
00:19:22.960 --> 00:19:26.960
<v Speaker 1>idea of statement completion values.

397
00:19:27.200 --> 00:19:29.720
<v Speaker 2>Yeah, the completion value you thought about that. Yeah, this

398
00:19:29.880 --> 00:19:33.960
<v Speaker 2>is a bit of a hidden gem in JavaScript. So

399
00:19:34.279 --> 00:19:38.519
<v Speaker 2>every statement actually has a completion value, really, even if

400
00:19:38.559 --> 00:19:39.720
<v Speaker 2>it's just undefined.

401
00:19:39.920 --> 00:19:43.440
<v Speaker 1>So even like a simple statement like let a ten

402
00:19:43.559 --> 00:19:43.799
<v Speaker 1>has a.

403
00:19:43.880 --> 00:19:45.400
<v Speaker 2>Value, it does. It does. Yeah.

404
00:19:45.440 --> 00:19:49.599
<v Speaker 1>But but if I type that into the console, I

405
00:19:49.799 --> 00:19:50.960
<v Speaker 1>just see undefined.

406
00:19:51.079 --> 00:19:53.680
<v Speaker 2>Yeah, and that's because the console is showing me the

407
00:19:53.680 --> 00:19:56.640
<v Speaker 2>completion value of the statement. So in the case of

408
00:19:56.720 --> 00:20:00.519
<v Speaker 2>let a ten, the completion value is undefined, not ten,

409
00:20:00.880 --> 00:20:03.440
<v Speaker 2>not ten. No, oh, okay, it's it's kind.

410
00:20:03.319 --> 00:20:06.160
<v Speaker 1>Of a it's a behind the scenes yeah, behind the scenes.

411
00:20:07.039 --> 00:20:12.000
<v Speaker 2>Now, Simpson mentions, you can capture these completion values using evil.

412
00:20:12.279 --> 00:20:15.039
<v Speaker 1>Oh evil. Now I've always been told to stay away

413
00:20:15.039 --> 00:20:15.559
<v Speaker 1>from evil.

414
00:20:15.720 --> 00:20:16.680
<v Speaker 2>Yeah, you probably should.

415
00:20:18.200 --> 00:20:19.079
<v Speaker 1>It's a little shady.

416
00:20:19.359 --> 00:20:23.160
<v Speaker 2>It's a little shady. It lets you execute like arbitrary

417
00:20:23.200 --> 00:20:25.359
<v Speaker 2>code from a string.

418
00:20:25.640 --> 00:20:27.960
<v Speaker 1>That sounds dangerous.

419
00:20:28.079 --> 00:20:31.079
<v Speaker 2>It can be. Yeah, So unless you really really know

420
00:20:31.160 --> 00:20:34.400
<v Speaker 2>what you're doing, and you've like really sanitized that string.

421
00:20:35.319 --> 00:20:37.880
<v Speaker 1>Just stay away, avoid at all costs.

422
00:20:37.960 --> 00:20:42.759
<v Speaker 2>Yeah, pretty much. Now there's there's this proposed feature do

423
00:20:42.960 --> 00:20:46.759
<v Speaker 2>expression to do expression. Yeah, that's a that's being considered

424
00:20:46.759 --> 00:20:50.880
<v Speaker 2>for like future versions of JavaScript, and that would give

425
00:20:50.880 --> 00:20:54.759
<v Speaker 2>you cleaner way to capture those completion values.

426
00:20:54.880 --> 00:20:58.200
<v Speaker 1>It's like it's like a supercharged code block, like.

427
00:20:58.119 --> 00:21:01.519
<v Speaker 2>A code block that can return a value, returns of value. Yeah, okay,

428
00:21:01.519 --> 00:21:04.480
<v Speaker 2>that's I'll put that on my things to things to

429
00:21:04.519 --> 00:21:05.079
<v Speaker 2>watch list.

430
00:21:05.200 --> 00:21:09.119
<v Speaker 1>It's still in the proposal state, but something to keep

431
00:21:09.119 --> 00:21:13.480
<v Speaker 1>an eye on, definitely, definitely. Now let's talk about operator precedence.

432
00:21:14.200 --> 00:21:19.160
<v Speaker 2>Operator precedence. Now, I know there's a specific order that

433
00:21:19.279 --> 00:21:24.160
<v Speaker 2>JavaScript evaluates. It follows a hierarchy operators, but I don't

434
00:21:24.200 --> 00:21:25.359
<v Speaker 2>always remember what it is.

435
00:21:25.480 --> 00:21:28.279
<v Speaker 1>It can be, it can be tricky. So it's uh,

436
00:21:28.440 --> 00:21:32.720
<v Speaker 1>it's similar to you know what you might have learned

437
00:21:32.759 --> 00:21:35.319
<v Speaker 1>in math class peendus or.

438
00:21:35.839 --> 00:21:38.279
<v Speaker 2>Bottom parentheses, exponents.

439
00:21:37.839 --> 00:21:40.359
<v Speaker 1>Identification division, editions of traction.

440
00:21:40.519 --> 00:21:43.799
<v Speaker 2>That's the basic idea. Yeah, but JavaScript has a lot

441
00:21:43.839 --> 00:21:48.839
<v Speaker 2>more operators right than just those, So there's like logical operators,

442
00:21:48.880 --> 00:21:49.960
<v Speaker 2>bitwise operators.

443
00:21:49.960 --> 00:21:52.000
<v Speaker 1>So am I going to have to like memorize this

444
00:21:52.200 --> 00:21:53.599
<v Speaker 1>giant Well, luckily.

445
00:21:53.319 --> 00:21:56.319
<v Speaker 2>You don't have to memorize a giant table. The key

446
00:21:56.400 --> 00:21:58.400
<v Speaker 2>is to just like understand the general principles.

447
00:21:58.519 --> 00:21:59.279
<v Speaker 1>Okay, like what.

448
00:21:59.680 --> 00:22:04.000
<v Speaker 2>So for example, like you know, arithmetic operators like multiplication

449
00:22:04.079 --> 00:22:09.799
<v Speaker 2>and division, they have higher precedents okay than like comparison

450
00:22:09.839 --> 00:22:12.519
<v Speaker 2>operators like less then or greater than.

451
00:22:12.680 --> 00:22:13.039
<v Speaker 1>Got it.

452
00:22:13.160 --> 00:22:15.759
<v Speaker 2>Logical operators like A and D and O R they

453
00:22:15.839 --> 00:22:18.920
<v Speaker 2>usually have lower precedents than the arithmetic word.

454
00:22:18.960 --> 00:22:20.839
<v Speaker 1>This is like a pyramid. It is kind of like

455
00:22:20.880 --> 00:22:22.920
<v Speaker 1>a pyramid of precedence.

456
00:22:22.599 --> 00:22:24.960
<v Speaker 2>Yeah, with the with the most important ones at the top.

457
00:22:25.400 --> 00:22:27.720
<v Speaker 2>And if you're ever in doubt, just use parentheses parenthesy

458
00:22:27.759 --> 00:22:30.920
<v Speaker 2>it just be sure purposes. They make it explicit. Got

459
00:22:30.960 --> 00:22:31.480
<v Speaker 2>it all right?

460
00:22:32.880 --> 00:22:34.799
<v Speaker 1>Speaking of things that can be a little tricky, let's

461
00:22:34.799 --> 00:22:38.440
<v Speaker 1>talk about automatic semicolon insertion.

462
00:22:38.319 --> 00:22:41.799
<v Speaker 2>ASI, the great semicolon debate.

463
00:22:41.880 --> 00:22:42.559
<v Speaker 1>Great debate.

464
00:22:42.759 --> 00:22:43.960
<v Speaker 2>Yeah, this is one of those.

465
00:22:44.200 --> 00:22:45.839
<v Speaker 1>It's like a religious war almost.

466
00:22:46.000 --> 00:22:48.440
<v Speaker 2>It can get it can get heated, yeah for sure.

467
00:22:48.640 --> 00:22:51.720
<v Speaker 1>So remind me again, as I what is that?

468
00:22:52.000 --> 00:22:56.279
<v Speaker 2>So a SI is It's basically a mechanism in the

469
00:22:56.359 --> 00:23:02.440
<v Speaker 2>JavaScript engine that tries to fix by inserting semi colons

470
00:23:02.920 --> 00:23:05.519
<v Speaker 2>where they're missing but implied.

471
00:23:05.599 --> 00:23:07.319
<v Speaker 1>So JavaScript is trying to be helpful.

472
00:23:07.400 --> 00:23:10.240
<v Speaker 2>It's trying to be helpful, but sometimes you know, yeah,

473
00:23:10.400 --> 00:23:13.000
<v Speaker 2>it's a little too helpful.

474
00:23:13.079 --> 00:23:15.480
<v Speaker 1>Well, because it's it's making assumptions, right.

475
00:23:15.400 --> 00:23:17.599
<v Speaker 2>It is, yeah about what I meant. Yeah, And those

476
00:23:17.640 --> 00:23:20.839
<v Speaker 2>assumptions don't always line up with reality.

477
00:23:20.880 --> 00:23:23.759
<v Speaker 1>And this is where people start getting getting into fights.

478
00:23:24.119 --> 00:23:25.720
<v Speaker 2>This is where the debate comes in. Right. So some

479
00:23:25.720 --> 00:23:29.640
<v Speaker 2>folks say, look, ASI makes semi colons optional, right, you know,

480
00:23:29.680 --> 00:23:33.240
<v Speaker 2>and it makes your code cleaner, more concise.

481
00:23:33.480 --> 00:23:35.640
<v Speaker 1>Less visual clutter, less visual clutter.

482
00:23:35.720 --> 00:23:37.359
<v Speaker 2>Yeah. Okay, But then you have the folks who have

483
00:23:37.400 --> 00:23:41.920
<v Speaker 2>been bitten by ASI bugs and they say, no, no, no,

484
00:23:42.000 --> 00:23:47.240
<v Speaker 2>always use semi colons, right, you know, to avoid any ambiguity, explicity,

485
00:23:47.279 --> 00:23:48.519
<v Speaker 2>be explicit. Yeah, exactly.

486
00:23:48.599 --> 00:23:53.359
<v Speaker 1>So it's a matter of style versus versus safety.

487
00:23:53.440 --> 00:23:56.640
<v Speaker 2>Style versus safety. Yeah, and you know there are valid

488
00:23:56.680 --> 00:23:57.799
<v Speaker 2>points on both sides.

489
00:23:58.000 --> 00:24:01.759
<v Speaker 1>So what's the verdict semi colons? Are they in or

490
00:24:01.799 --> 00:24:02.519
<v Speaker 1>are they out?

491
00:24:02.720 --> 00:24:06.200
<v Speaker 2>You know, I think the real takeaway is, regardless of

492
00:24:06.240 --> 00:24:08.599
<v Speaker 2>how you feel about semi colons, Okay, you need to

493
00:24:08.680 --> 00:24:11.559
<v Speaker 2>understand how ASI works. Okay, because if you understand how

494
00:24:11.559 --> 00:24:14.119
<v Speaker 2>it works. You can write code, got it that is

495
00:24:14.160 --> 00:24:18.799
<v Speaker 2>both readable and reliable, right, whether you semi Collins or not.

496
00:24:18.960 --> 00:24:21.200
<v Speaker 1>So just know the rules of the game, exactly.

497
00:24:20.839 --> 00:24:22.160
<v Speaker 2>Know the rules of the game, and then you could

498
00:24:22.200 --> 00:24:23.000
<v Speaker 2>play however.

499
00:24:22.759 --> 00:24:26.200
<v Speaker 1>You want, all right, so informed decisions. I like it, Okay. Well.

500
00:24:26.400 --> 00:24:30.240
<v Speaker 1>Simpson also goes into some of the more advanced, potentially

501
00:24:30.359 --> 00:24:36.759
<v Speaker 1>confusing areas of JavaScript grammar, absolutely, starting with the temporal

502
00:24:36.799 --> 00:24:39.680
<v Speaker 1>dead zone the TDZ. Yeah gz gaes.

503
00:24:39.799 --> 00:24:42.119
<v Speaker 2>It sounds like, yeah, like a sci fi movie or something.

504
00:24:42.000 --> 00:24:46.200
<v Speaker 1>Right, but it's it's actually not that complicated, Okay. It's

505
00:24:46.240 --> 00:24:50.319
<v Speaker 1>basically a restriction on when you can access variables that.

506
00:24:50.279 --> 00:24:51.839
<v Speaker 2>Are declared with let and constant.

507
00:24:52.039 --> 00:24:54.559
<v Speaker 1>Right, those those keywords that were introduced in e.

508
00:24:54.720 --> 00:24:57.480
<v Speaker 2>S six for blockscope variables for blockscope.

509
00:24:57.480 --> 00:25:01.759
<v Speaker 1>So unlike var which was functions, gope or global exactly.

510
00:25:01.559 --> 00:25:04.920
<v Speaker 2>Let in constant there, they're only accessible within the block

511
00:25:04.960 --> 00:25:05.640
<v Speaker 2>they're declared in.

512
00:25:05.799 --> 00:25:06.119
<v Speaker 1>Okay.

513
00:25:06.200 --> 00:25:10.440
<v Speaker 2>So the TDZ is basically the period between the start

514
00:25:10.480 --> 00:25:14.000
<v Speaker 2>of the block and the point where the let or

515
00:25:14.039 --> 00:25:17.759
<v Speaker 2>constant variable is actually declared, okay, and during that time

516
00:25:18.039 --> 00:25:20.799
<v Speaker 2>you can't access it. It's like it's in limbo.

517
00:25:20.960 --> 00:25:24.359
<v Speaker 1>So it's like a no fly zone for for variables.

518
00:25:24.599 --> 00:25:26.039
<v Speaker 1>If I try to if I try to access a

519
00:25:26.119 --> 00:25:28.359
<v Speaker 1>variable on the TDZ, my code will crash.

520
00:25:28.519 --> 00:25:31.839
<v Speaker 2>You'll get a reference error. Uh, not quite a crash,

521
00:25:31.880 --> 00:25:35.000
<v Speaker 2>but yeah, it's is JavaScript saying hey, not yet, this

522
00:25:35.079 --> 00:25:35.880
<v Speaker 2>doesn't exist yet.

523
00:25:35.920 --> 00:25:37.599
<v Speaker 1>Okay, respect the PDC.

524
00:25:37.599 --> 00:25:38.759
<v Speaker 2>Got respect the TDC.

525
00:25:39.279 --> 00:25:41.880
<v Speaker 1>And you know it is it actually, I mean it

526
00:25:41.920 --> 00:25:44.039
<v Speaker 1>sounds like a it sounds like a restriction.

527
00:25:44.440 --> 00:25:46.920
<v Speaker 2>It sounds like a restriction, but it's a it's actually

528
00:25:47.000 --> 00:25:50.640
<v Speaker 2>really helpful because it prevents like all sorts of unexpected

529
00:25:50.680 --> 00:25:53.680
<v Speaker 2>behavior and it encourages you to structure your code better.

530
00:25:53.880 --> 00:25:55.920
<v Speaker 1>So it's so it's actually it's another one of these

531
00:25:56.000 --> 00:25:58.279
<v Speaker 1>JavaScript quirks that is actually a lot.

532
00:25:58.119 --> 00:26:00.480
<v Speaker 2>Of those quarks are helpful. Actually, yeah, for our benefit.

533
00:26:00.640 --> 00:26:03.359
<v Speaker 1>Now are there any are there any like Gotcha's. We

534
00:26:03.400 --> 00:26:07.279
<v Speaker 1>should always Gotcha's look out for what the TDZ.

535
00:26:07.160 --> 00:26:10.559
<v Speaker 2>Especially when it comes to like function arguments.

536
00:26:10.640 --> 00:26:12.039
<v Speaker 1>Okay, function argument.

537
00:26:11.880 --> 00:26:13.599
<v Speaker 2>Yeah, so you know in E S six we've got

538
00:26:13.599 --> 00:26:15.519
<v Speaker 2>default parameter values, right, right.

539
00:26:15.400 --> 00:26:17.559
<v Speaker 1>So if you don't pass a value.

540
00:26:17.119 --> 00:26:21.519
<v Speaker 2>If you omit an argument or pass undefined, it gets

541
00:26:21.559 --> 00:26:22.599
<v Speaker 2>that default value.

542
00:26:22.680 --> 00:26:23.400
<v Speaker 1>It's a fallback.

543
00:26:23.480 --> 00:26:26.079
<v Speaker 2>Yeah, it's a fallback. Yeah, Okay, but The catch is

544
00:26:26.559 --> 00:26:29.839
<v Speaker 2>if you try to use that parameter within the default value,

545
00:26:30.920 --> 00:26:32.039
<v Speaker 2>you're going to hit the TDZ.

546
00:26:32.519 --> 00:26:35.559
<v Speaker 1>Wait, so I can't do something like A equals A

547
00:26:35.599 --> 00:26:36.200
<v Speaker 1>plus one.

548
00:26:36.400 --> 00:26:39.359
<v Speaker 2>Yeah, like function foo a equals a plus one. You

549
00:26:39.400 --> 00:26:42.640
<v Speaker 2>can't do that because A is still in the TDZ.

550
00:26:42.839 --> 00:26:46.240
<v Speaker 1>Okay, so no, no self referential the.

551
00:26:46.440 --> 00:26:49.559
<v Speaker 2>Self referential deault values. Yeah, exactly, I got it.

552
00:26:49.640 --> 00:26:52.720
<v Speaker 1>Yeah, Okay, that's that's good to know. All right, Well

553
00:26:52.720 --> 00:26:57.640
<v Speaker 1>we're talking about function arguments. Let's talk about the arguments array.

554
00:26:58.000 --> 00:26:59.440
<v Speaker 2>Oh, the argument's array.

555
00:26:59.599 --> 00:27:01.480
<v Speaker 1>This is an other one that there's another one yet.

556
00:27:01.519 --> 00:27:03.039
<v Speaker 2>Yeah, so the argument's array.

557
00:27:03.160 --> 00:27:05.079
<v Speaker 1>I mean it holds all the argument.

558
00:27:04.880 --> 00:27:06.440
<v Speaker 2>It holds all the arguments yet were.

559
00:27:06.359 --> 00:27:08.400
<v Speaker 1>Passed to a function, even if they.

560
00:27:08.279 --> 00:27:10.160
<v Speaker 2>Weren't even if they weren't.

561
00:27:09.799 --> 00:27:11.240
<v Speaker 1>Like explicitly defined.

562
00:27:11.240 --> 00:27:12.039
<v Speaker 2>Its eplicitely name.

563
00:27:12.079 --> 00:27:15.039
<v Speaker 1>But I've also heard it's it's kind of it's a

564
00:27:15.119 --> 00:27:18.400
<v Speaker 1>legacy thing. Yeah. It has a bit of a mixed reputation.

565
00:27:18.720 --> 00:27:19.480
<v Speaker 2>Yeah for sure.

566
00:27:19.799 --> 00:27:22.759
<v Speaker 1>So first of all, it's not a true array. Oh really,

567
00:27:22.759 --> 00:27:24.599
<v Speaker 1>it's an array like object.

568
00:27:25.319 --> 00:27:28.680
<v Speaker 2>So so they call it the argument's array. Yeah, I know,

569
00:27:29.039 --> 00:27:30.480
<v Speaker 2>but it's not actually an array.

570
00:27:30.559 --> 00:27:33.079
<v Speaker 1>It's not a true array. It's got some array like properties,

571
00:27:33.119 --> 00:27:35.599
<v Speaker 1>like a length property. Okay, but it doesn't have all

572
00:27:35.640 --> 00:27:40.440
<v Speaker 1>the methods of a real array. And here's the real kicker.

573
00:27:41.319 --> 00:27:46.200
<v Speaker 1>In non strict mode, there's this weird.

574
00:27:46.000 --> 00:27:50.599
<v Speaker 2>Linkage between the arguments array, right, and the named parameters

575
00:27:50.640 --> 00:27:51.200
<v Speaker 2>of a function.

576
00:27:51.680 --> 00:27:54.519
<v Speaker 1>So wait, so they're like secretly connected.

577
00:27:54.839 --> 00:27:58.640
<v Speaker 2>Yeah, kind of. So if you modify named parameter inside

578
00:27:58.640 --> 00:28:06.200
<v Speaker 2>a function, corresponding element in arguments gets modified to vice versa. Weird. Yeah,

579
00:28:06.240 --> 00:28:08.000
<v Speaker 2>it's uh, that's one of those things that can lead

580
00:28:08.039 --> 00:28:11.240
<v Speaker 2>to some like really unexpected.

581
00:28:11.720 --> 00:28:14.640
<v Speaker 1>Okay, So arguments are ray use with caution, use with

582
00:28:14.720 --> 00:28:15.480
<v Speaker 1>extreme caution.

583
00:28:16.079 --> 00:28:18.319
<v Speaker 2>If it all, yeah, if it all? There are there

584
00:28:18.319 --> 00:28:21.759
<v Speaker 2>are better ways to handle, you know, variable numbers of

585
00:28:21.880 --> 00:28:25.000
<v Speaker 2>arguments these days, like what like rest parameters which are

586
00:28:25.039 --> 00:28:25.960
<v Speaker 2>part of e S six.

587
00:28:26.039 --> 00:28:28.559
<v Speaker 1>Okay, rest parameters, I'm going to check those out. Put

588
00:28:28.559 --> 00:28:31.240
<v Speaker 1>that on my my to learn list. It seems like

589
00:28:31.319 --> 00:28:33.519
<v Speaker 1>the long list, right, the Java script to learn list

590
00:28:33.640 --> 00:28:35.039
<v Speaker 1>is never ending.

591
00:28:35.119 --> 00:28:36.039
<v Speaker 2>There's always something new.

592
00:28:36.640 --> 00:28:39.640
<v Speaker 1>Well, let's let's talk about another area of JavaScript grammar.

593
00:28:39.799 --> 00:28:46.880
<v Speaker 1>Sure that that can be tricky. The try dot finally statement.

594
00:28:47.000 --> 00:28:51.559
<v Speaker 2>Try finally yes. So this is used for exception.

595
00:28:51.240 --> 00:28:55.279
<v Speaker 1>Handling, right, exception handling right, so try some code, if something.

596
00:28:54.920 --> 00:28:56.799
<v Speaker 2>Goes wrong, if something blows.

597
00:28:56.559 --> 00:29:00.799
<v Speaker 1>Up, and then finally always execute, always executes.

598
00:29:00.799 --> 00:29:01.799
<v Speaker 2>It's like your cleanup.

599
00:29:01.519 --> 00:29:06.279
<v Speaker 1>Crew, the clean up crew. Okay, So, so finally always executes,

600
00:29:06.559 --> 00:29:10.759
<v Speaker 1>whether there's an exception or not. But what happens if

601
00:29:10.839 --> 00:29:12.240
<v Speaker 1>if there's a return statement.

602
00:29:12.279 --> 00:29:14.759
<v Speaker 2>Oh yeah, this is where things the triblock. Yeah, this

603
00:29:14.839 --> 00:29:15.920
<v Speaker 2>is where things get interesting.

604
00:29:16.079 --> 00:29:16.400
<v Speaker 1>Okay.

605
00:29:16.440 --> 00:29:19.160
<v Speaker 2>So if you have a return statement in your triblock, right,

606
00:29:19.440 --> 00:29:21.799
<v Speaker 2>and you also have a return statement in the finally

607
00:29:22.000 --> 00:29:24.799
<v Speaker 2>in the finally blocked okay, the one in the finally

608
00:29:24.799 --> 00:29:26.400
<v Speaker 2>block wins.

609
00:29:28.480 --> 00:29:32.839
<v Speaker 1>Seriously, even if the triblock return to value already, even

610
00:29:32.839 --> 00:29:34.960
<v Speaker 1>if a return to value, yeah, the finally block gets

611
00:29:35.000 --> 00:29:38.119
<v Speaker 1>the final. Say so we have a return in finally, Yeah,

612
00:29:38.160 --> 00:29:39.799
<v Speaker 1>it's going to override everything else.

613
00:29:39.880 --> 00:29:44.759
<v Speaker 2>It's going to override anything that came before. Okay, so uh, you.

614
00:29:44.680 --> 00:29:47.640
<v Speaker 1>Know, be careful what you put in your finally block.

615
00:29:48.160 --> 00:29:50.599
<v Speaker 2>Be very careful what you put in finally.

616
00:29:50.440 --> 00:29:54.759
<v Speaker 1>Especially if there's returns, especially returns. Okay, what about what

617
00:29:54.799 --> 00:29:56.000
<v Speaker 1>about other control.

618
00:29:55.640 --> 00:29:58.559
<v Speaker 2>Flow statements like continue or break?

619
00:29:58.880 --> 00:30:00.359
<v Speaker 1>Yeah, like continue or break?

620
00:30:00.720 --> 00:30:04.960
<v Speaker 2>Yeah? Do they they do have interactions with finally, So

621
00:30:05.000 --> 00:30:08.279
<v Speaker 2>if you have a continue or break inside your tri block,

622
00:30:09.079 --> 00:30:11.839
<v Speaker 2>and you know that triblock is inside say a loop,

623
00:30:12.240 --> 00:30:15.400
<v Speaker 2>right switch statement. Yeah, that finally block is going to

624
00:30:15.440 --> 00:30:17.920
<v Speaker 2>execute before the loop continues or the switch breaks.

625
00:30:18.079 --> 00:30:21.559
<v Speaker 1>So it's like the like the finally interrupts the flow it.

626
00:30:21.519 --> 00:30:23.440
<v Speaker 2>Does of the of the loop it does. Yeah, the

627
00:30:23.440 --> 00:30:28.079
<v Speaker 2>finally block is very persistent. Okay, once it gets code.

628
00:30:27.880 --> 00:30:29.720
<v Speaker 1>Executed, finally always happens, and.

629
00:30:29.680 --> 00:30:33.759
<v Speaker 2>They always happens it. Yeah. Right, Well, Simpson gives this

630
00:30:33.839 --> 00:30:36.319
<v Speaker 2>crazy example of combining finally with.

631
00:30:37.559 --> 00:30:41.400
<v Speaker 1>Label block, label blocks and break statements, and he says.

632
00:30:41.240 --> 00:30:42.079
<v Speaker 2>Is it crazy?

633
00:30:42.240 --> 00:30:46.880
<v Speaker 1>It's crazy. Yeah, maybe we should just uh alone, let

634
00:30:46.960 --> 00:30:50.960
<v Speaker 1>sleeping dogs lie. Okay, let's talk about switch.

635
00:30:50.759 --> 00:30:53.319
<v Speaker 2>Statements, which statements.

636
00:30:52.799 --> 00:30:56.680
<v Speaker 1>Another another control flow statement that I think a lot

637
00:30:56.720 --> 00:31:00.880
<v Speaker 1>of people use but maybe don't don't appreciate.

638
00:31:01.160 --> 00:31:03.480
<v Speaker 2>Yeah, they have their quirks all the all the little

639
00:31:03.559 --> 00:31:07.400
<v Speaker 2>they do. So switch statements are basically a classic way

640
00:31:07.480 --> 00:31:10.599
<v Speaker 2>to like, you know, compare a value. It's a bunch

641
00:31:10.640 --> 00:31:11.400
<v Speaker 2>of different cases.

642
00:31:11.480 --> 00:31:15.240
<v Speaker 1>So it's like a more concise way of like a yeah,

643
00:31:15.319 --> 00:31:17.119
<v Speaker 1>doing a bunch of IFL statement.

644
00:31:16.799 --> 00:31:18.880
<v Speaker 2>More organized way okay to do a bunch of ifls.

645
00:31:19.119 --> 00:31:21.000
<v Speaker 1>All right, but they have some quirks. What do I

646
00:31:21.000 --> 00:31:21.720
<v Speaker 1>need to watch out for.

647
00:31:21.839 --> 00:31:24.640
<v Speaker 2>Okay. So the first thing is the matching that happens

648
00:31:25.200 --> 00:31:30.079
<v Speaker 2>between the switch expression right and the cases uses strict equality.

649
00:31:30.440 --> 00:31:34.160
<v Speaker 2>Oh so the types have to match, so no coercion,

650
00:31:34.279 --> 00:31:36.160
<v Speaker 2>no coercion shenanigans.

651
00:31:35.559 --> 00:31:37.799
<v Speaker 1>Allowed, and switch statements.

652
00:31:37.359 --> 00:31:38.519
<v Speaker 2>Not by default no.

653
00:31:38.559 --> 00:31:41.359
<v Speaker 1>Okay, strict matching. God, what else?

654
00:31:41.599 --> 00:31:47.440
<v Speaker 2>Okay? So another interesting quirk is that case clauses. Yeah,

655
00:31:47.519 --> 00:31:50.160
<v Speaker 2>they kind of fall through to the next one unless

656
00:31:50.200 --> 00:31:53.519
<v Speaker 2>you explicitly use a brake right statement.

657
00:31:53.599 --> 00:31:56.799
<v Speaker 1>Oh I've been bitten by that one, forgotten to break.

658
00:31:57.039 --> 00:31:58.079
<v Speaker 2>Yeah, it's a classic.

659
00:31:58.279 --> 00:32:00.000
<v Speaker 1>And then like weird things have.

660
00:32:00.359 --> 00:32:02.799
<v Speaker 2>Yeah, it can lead to some really unexpected behavior.

661
00:32:03.119 --> 00:32:05.920
<v Speaker 1>Okay. So so strict matching.

662
00:32:05.720 --> 00:32:08.160
<v Speaker 2>Strict matching all through, because all through yep.

663
00:32:08.720 --> 00:32:09.519
<v Speaker 1>Okay, what else?

664
00:32:09.559 --> 00:32:12.680
<v Speaker 2>Okay, here's one that might surprise you. Okay, the default

665
00:32:12.720 --> 00:32:14.920
<v Speaker 2>clause doesn't have to be the last one.

666
00:32:16.680 --> 00:32:16.880
<v Speaker 1>What.

667
00:32:17.279 --> 00:32:17.759
<v Speaker 2>Yeah, it can.

668
00:32:17.839 --> 00:32:19.440
<v Speaker 1>I always thought default had to go at the end.

669
00:32:19.480 --> 00:32:21.519
<v Speaker 2>A lot of people think that, Yeah, but it can

670
00:32:21.559 --> 00:32:23.319
<v Speaker 2>actually appear anywhere.

671
00:32:23.400 --> 00:32:27.839
<v Speaker 1>JavaScript always keep me on my toes full of surprises. Okay, Well,

672
00:32:27.839 --> 00:32:31.759
<v Speaker 1>we've we've talked a lot about like the the internals

673
00:32:31.799 --> 00:32:35.160
<v Speaker 1>of JavaScript, like how the engine sees things, but we

674
00:32:35.599 --> 00:32:37.119
<v Speaker 1>can't forget about the environment.

675
00:32:37.359 --> 00:32:39.640
<v Speaker 2>Oh yeah, the environment is key.

676
00:32:39.799 --> 00:32:41.799
<v Speaker 1>That are code's actually running in.

677
00:32:42.079 --> 00:32:44.400
<v Speaker 2>This is where things get really interesting.

678
00:32:44.000 --> 00:32:47.000
<v Speaker 1>Right, It's like we've been practicing in a nice, safe

679
00:32:47.240 --> 00:32:49.759
<v Speaker 1>environment and now we're going out into the real world

680
00:32:50.160 --> 00:32:51.279
<v Speaker 1>where anything can happen.

681
00:32:51.440 --> 00:32:51.920
<v Speaker 2>That's right.

682
00:32:52.240 --> 00:32:54.960
<v Speaker 1>So where do we even begin with that?

683
00:32:55.599 --> 00:32:59.359
<v Speaker 2>Well, you mentioned ANNEXB earlier ANNXB. Yeah, that's a that's

684
00:32:59.400 --> 00:33:00.279
<v Speaker 2>a good place to start.

685
00:33:00.440 --> 00:33:02.599
<v Speaker 1>I know it's got something to do with how JavaScript

686
00:33:02.599 --> 00:33:05.799
<v Speaker 1>works in browsers, but honestly, it's always been a little

687
00:33:05.839 --> 00:33:07.519
<v Speaker 1>mysterious to me, like what is ANNXB.

688
00:33:07.960 --> 00:33:14.319
<v Speaker 2>So NXB is this uh, really fascinating part of the

689
00:33:14.519 --> 00:33:18.079
<v Speaker 2>ekmascript specification, which is, you know, the official document that

690
00:33:18.119 --> 00:33:23.079
<v Speaker 2>defines the javasup language, And ANXB is basically a collection

691
00:33:23.160 --> 00:33:31.039
<v Speaker 2>of rules describe how JavaScript should behave, specifically in web browsers. Okay,

692
00:33:31.279 --> 00:33:35.039
<v Speaker 2>because you know, over the years, browsers implemented all sorts

693
00:33:35.039 --> 00:33:38.359
<v Speaker 2>of like features and behaviors that weren't actually part of

694
00:33:38.359 --> 00:33:39.079
<v Speaker 2>the standards.

695
00:33:39.119 --> 00:33:44.240
<v Speaker 1>So it's it's JavaScript's collection of like unofficial rules.

696
00:33:44.680 --> 00:33:46.319
<v Speaker 2>That's a good way to put it. Yeah, okay, And

697
00:33:46.359 --> 00:33:50.119
<v Speaker 2>eventually those unofficial rules they became so widespread that they

698
00:33:50.160 --> 00:33:52.559
<v Speaker 2>had to be like officially recognized.

699
00:33:52.720 --> 00:33:56.759
<v Speaker 1>So ANXB is like the rule book for its.

700
00:33:57.920 --> 00:34:01.119
<v Speaker 2>It's like the official acknowledgement all those quirks.

701
00:34:01.240 --> 00:34:04.319
<v Speaker 1>Okay, I like that. Give me some examples. What what

702
00:34:04.440 --> 00:34:05.559
<v Speaker 1>kind of rules are we talking about?

703
00:34:05.599 --> 00:34:09.440
<v Speaker 2>Okay? So one example is regular expressions. Okay, So browsers

704
00:34:09.639 --> 00:34:13.400
<v Speaker 2>have for a long time supported these extensions to the

705
00:34:13.480 --> 00:34:18.400
<v Speaker 2>regular expression syntax that weren't part of the original EKMA

706
00:34:18.400 --> 00:34:23.320
<v Speaker 2>script standard, and but they became so common that they

707
00:34:23.320 --> 00:34:26.199
<v Speaker 2>were eventually like incorporated into ANXP.

708
00:34:26.719 --> 00:34:30.320
<v Speaker 1>So that's like the the reg XP dot one dollar thing.

709
00:34:30.639 --> 00:34:32.480
<v Speaker 2>That's that's ANNXB in action.

710
00:34:32.920 --> 00:34:35.679
<v Speaker 1>I've seen in people's code. That's right, that's that's ANNXB.

711
00:34:35.960 --> 00:34:39.840
<v Speaker 2>Okay. Another example is the extensions to function dot prototype

712
00:34:40.320 --> 00:34:44.159
<v Speaker 2>like arguments and color wait arguments. I know, I know,

713
00:34:44.440 --> 00:34:47.559
<v Speaker 2>I thought that was like it was deprecated. It is

714
00:34:49.199 --> 00:34:52.480
<v Speaker 2>generally discouraged these days, but it's still part of anx

715
00:34:52.559 --> 00:34:55.920
<v Speaker 2>B because it was so widely used, you know, legacy code,

716
00:34:55.920 --> 00:34:58.760
<v Speaker 2>bolder code basis. Yeah, so it's like a it's a

717
00:34:59.000 --> 00:35:00.159
<v Speaker 2>historical artific.

718
00:35:00.159 --> 00:35:02.280
<v Speaker 1>Historical artifact that's still hanging around.

719
00:35:02.119 --> 00:35:02.920
<v Speaker 2>Still hanging around.

720
00:35:02.920 --> 00:35:07.440
<v Speaker 1>So annex B is, yeah, it's like this Museum of

721
00:35:07.519 --> 00:35:08.599
<v Speaker 1>JavaScript quirks.

722
00:35:08.760 --> 00:35:14.000
<v Speaker 2>It's a it's a testament to how JavaScript has evolved, Yeah,

723
00:35:14.039 --> 00:35:14.880
<v Speaker 2>evolved over time.

724
00:35:14.920 --> 00:35:17.159
<v Speaker 1>Okay. I like that analogy a lot.

725
00:35:17.239 --> 00:35:17.519
<v Speaker 2>Yeah.

726
00:35:17.559 --> 00:35:21.480
<v Speaker 1>So ANNEXB that's that's. That's all about how JavaScript works

727
00:35:21.679 --> 00:35:25.719
<v Speaker 1>specifically inm browsers, in browsers, okay, what about subjects? Host objects?

728
00:35:25.760 --> 00:35:25.960
<v Speaker 2>Yeah?

729
00:35:25.960 --> 00:35:30.039
<v Speaker 1>So host objects are another key part of how JavaScript

730
00:35:30.280 --> 00:35:32.559
<v Speaker 1>interacts with its environment. Okay.

731
00:35:32.599 --> 00:35:36.400
<v Speaker 2>And they're objects that are provided, okay, by the host

732
00:35:36.480 --> 00:35:39.679
<v Speaker 2>environment itself. It's not the JavaScript.

733
00:35:39.079 --> 00:35:43.119
<v Speaker 1>Engine in a browser. We're talking about things like the document.

734
00:35:42.760 --> 00:35:45.679
<v Speaker 2>Object, document object, the window object.

735
00:35:45.320 --> 00:35:46.760
<v Speaker 1>The window object, yeah.

736
00:35:46.599 --> 00:35:49.480
<v Speaker 2>All the dom elements, right right, yeah, all that stuff Okay,

737
00:35:49.559 --> 00:35:52.880
<v Speaker 2>that's that's provided by the browser. Okay, and those give

738
00:35:52.960 --> 00:35:57.840
<v Speaker 2>JavaScript the power to manipulate the browser, interact with web pages, right,

739
00:35:57.920 --> 00:36:00.679
<v Speaker 2>respond to events, respond to events, all good stuff.

740
00:36:00.840 --> 00:36:03.519
<v Speaker 1>Okay, but I have a feeling. But here this is

741
00:36:03.519 --> 00:36:04.519
<v Speaker 1>where things get tricky.

742
00:36:04.599 --> 00:36:08.800
<v Speaker 2>Here's the tricky part. Host objects don't always play by

743
00:36:08.800 --> 00:36:09.800
<v Speaker 2>the same rules.

744
00:36:09.559 --> 00:36:12.920
<v Speaker 1>Right, of course not. It wouldn't be JavaScript.

745
00:36:12.400 --> 00:36:16.000
<v Speaker 2>If it was that simple, right, got to have those okay,

746
00:36:16.039 --> 00:36:18.840
<v Speaker 2>So they might have properties that you can't change, even

747
00:36:18.880 --> 00:36:24.239
<v Speaker 2>though they look like regular JavaScript properties and their methods

748
00:36:24.360 --> 00:36:28.199
<v Speaker 2>might behave differently did you'd expect based on the standard

749
00:36:28.320 --> 00:36:29.599
<v Speaker 2>JavaScript object model.

750
00:36:29.719 --> 00:36:32.880
<v Speaker 1>So we have to learn like a whole separate set

751
00:36:32.920 --> 00:36:34.960
<v Speaker 1>of rules.

752
00:36:34.280 --> 00:36:38.760
<v Speaker 2>It's definitely a learning curve, and it's really important to

753
00:36:38.960 --> 00:36:41.159
<v Speaker 2>like consult the browser's documentation.

754
00:36:41.519 --> 00:36:42.920
<v Speaker 1>So when in doubt, check the docs.

755
00:36:43.039 --> 00:36:45.920
<v Speaker 2>Yeah, when in doubt, our TFM R TFM, got it

756
00:36:46.119 --> 00:36:49.800
<v Speaker 2>all right. Now, there's one other topic that I think

757
00:36:49.840 --> 00:36:54.800
<v Speaker 2>we should touch on, which is extending native prototypes.

758
00:36:55.519 --> 00:36:59.800
<v Speaker 1>Extending native prototypes, Yeah, this is this is one where

759
00:36:59.800 --> 00:37:03.039
<v Speaker 1>I feel like there's a lot of a lot of

760
00:37:03.079 --> 00:37:05.760
<v Speaker 1>strong opinions. Oh yeah, So we're talking about.

761
00:37:05.480 --> 00:37:09.079
<v Speaker 2>Adding adding methods to like to like a ray dot

762
00:37:09.119 --> 00:37:13.320
<v Speaker 2>prototype or ray dot prototype, a string dot prototype.

763
00:37:12.800 --> 00:37:16.159
<v Speaker 1>String dot prototype. Yeah, it's tempting, right, right, it seems

764
00:37:16.159 --> 00:37:18.320
<v Speaker 1>so convenient. Just I'll just add.

765
00:37:18.079 --> 00:37:20.360
<v Speaker 2>This, right, just add my add my one method, add

766
00:37:20.360 --> 00:37:22.719
<v Speaker 2>this one little method, right, and then all a rays

767
00:37:22.800 --> 00:37:23.519
<v Speaker 2>can use it.

768
00:37:23.519 --> 00:37:24.599
<v Speaker 1>It'll be available everywhere.

769
00:37:24.679 --> 00:37:29.679
<v Speaker 2>It's so clean, so elegant. Yeah, but then I've heard

770
00:37:29.679 --> 00:37:33.039
<v Speaker 2>it's a bad idea. Yeah, it's it's generally frowned upon,

771
00:37:33.440 --> 00:37:36.840
<v Speaker 2>and for good reason, because the main issue is it

772
00:37:36.880 --> 00:37:40.159
<v Speaker 2>can lead to conflicts and unexpected.

773
00:37:39.559 --> 00:37:41.519
<v Speaker 1>Behavior, especially as the language is.

774
00:37:41.559 --> 00:37:44.880
<v Speaker 2>The language evolves changes. Yeah, because JavaScript is not standing

775
00:37:44.920 --> 00:37:47.679
<v Speaker 2>still right, right, there's always new features coming out and

776
00:37:47.719 --> 00:37:52.599
<v Speaker 2>sometimes like the behavior of existing features changes. So imagine

777
00:37:52.639 --> 00:37:56.559
<v Speaker 2>you add a custom method called I don't know fubar

778
00:37:57.280 --> 00:38:00.400
<v Speaker 2>fubar to a ray dot prototype. Right, and it's great,

779
00:38:00.440 --> 00:38:04.119
<v Speaker 2>your coate is cleaner, you're happy. Everything's good. But then

780
00:38:04.519 --> 00:38:07.920
<v Speaker 2>you know, a new version of JavaScript comes out. Oh

781
00:38:07.960 --> 00:38:12.280
<v Speaker 2>and it introduces a built in fou bar on a race. Okay,

782
00:38:12.440 --> 00:38:14.960
<v Speaker 2>but it behaves differently from your custom one.

783
00:38:15.079 --> 00:38:18.280
<v Speaker 1>That sounds like a nightmare to debug.

784
00:38:18.719 --> 00:38:21.360
<v Speaker 2>It can be a nightmare, yeah, because your custom method

785
00:38:21.440 --> 00:38:24.360
<v Speaker 2>might override the new one or vice versa.

786
00:38:24.440 --> 00:38:26.519
<v Speaker 1>And then yeah, my code's broken and I don't know

787
00:38:26.599 --> 00:38:27.480
<v Speaker 1>why exactly.

788
00:38:27.519 --> 00:38:29.119
<v Speaker 2>Yeah, it can be really hard to track down. So

789
00:38:29.199 --> 00:38:30.960
<v Speaker 2>it's uh, it's best to.

790
00:38:32.559 --> 00:38:34.800
<v Speaker 1>Those treat those native prototypes as sacred.

791
00:38:34.880 --> 00:38:37.639
<v Speaker 2>Yeah, don't mess with them, don't touch. Yeah you can look,

792
00:38:37.840 --> 00:38:38.480
<v Speaker 2>but don't touch.

793
00:38:38.599 --> 00:38:42.000
<v Speaker 1>Got it? Yeah, all right, So no more extending native

794
00:38:42.039 --> 00:38:45.039
<v Speaker 1>prototypes for me. But what if what if I need

795
00:38:45.079 --> 00:38:50.840
<v Speaker 1>to like add some functionality that's missing in older browsers,

796
00:38:50.880 --> 00:38:51.880
<v Speaker 1>Like how do I do that?

797
00:38:52.119 --> 00:38:53.880
<v Speaker 2>Yeah, that's where polyphils and shims come in.

798
00:38:54.039 --> 00:38:57.000
<v Speaker 1>Okay, poly fills and shims. I've heard of these.

799
00:38:57.159 --> 00:38:59.159
<v Speaker 2>Yeah, they're they're really useful, but.

800
00:38:59.119 --> 00:39:01.159
<v Speaker 1>I don't I'm not really sure what they are.

801
00:39:01.280 --> 00:39:04.559
<v Speaker 2>Okay. So a polyphyll is basically a piece of code

802
00:39:05.480 --> 00:39:11.960
<v Speaker 2>that provides a modern JavaScript feature in older environments that

803
00:39:12.079 --> 00:39:15.679
<v Speaker 2>don't support it. Yeah, so I'm raising like filling in

804
00:39:15.719 --> 00:39:18.039
<v Speaker 2>the gaps, hence the name polyphill.

805
00:39:19.039 --> 00:39:22.280
<v Speaker 1>So I'm making my code work consistently across all these

806
00:39:22.280 --> 00:39:23.000
<v Speaker 1>different browsers.

807
00:39:23.039 --> 00:39:26.440
<v Speaker 2>That's exactly right, yeah, okay. And a shim is a

808
00:39:26.480 --> 00:39:27.480
<v Speaker 2>little more specialized.

809
00:39:27.519 --> 00:39:27.800
<v Speaker 1>Okay.

810
00:39:28.039 --> 00:39:31.519
<v Speaker 2>It's a piece of code that modifies existing behavior to

811
00:39:31.559 --> 00:39:35.039
<v Speaker 2>work around like a bug or incompatibility.

812
00:39:34.840 --> 00:39:38.920
<v Speaker 1>So polyphills, polyphils fill in the missing features.

813
00:39:38.559 --> 00:39:39.880
<v Speaker 2>Yeah, fill in the missing stuff.

814
00:39:39.880 --> 00:39:41.760
<v Speaker 1>Shims like smooth over.

815
00:39:41.800 --> 00:39:42.880
<v Speaker 2>Smooth over rough edges.

816
00:39:42.960 --> 00:39:44.320
<v Speaker 1>Yeah, that's a great way to put it.

817
00:39:44.400 --> 00:39:46.000
<v Speaker 2>Okay. And both of those are good, right.

818
00:39:45.960 --> 00:39:46.679
<v Speaker 1>Like those are good.

819
00:39:46.760 --> 00:39:48.440
<v Speaker 2>Yeah, it's good practice to use those.

820
00:39:48.480 --> 00:39:52.400
<v Speaker 1>It's the best practice because they don't, you know, pollute

821
00:39:52.639 --> 00:39:57.280
<v Speaker 1>the global name space potentially conflict with other code.

822
00:39:57.400 --> 00:40:02.039
<v Speaker 2>Okay. Yeah, So polyphills and shims, they are your friends.

823
00:40:02.079 --> 00:40:04.480
<v Speaker 1>There are my friends, okay, a yeah, I'm going to

824
00:40:04.840 --> 00:40:05.480
<v Speaker 1>keep them close.

825
00:40:05.519 --> 00:40:06.639
<v Speaker 2>I'm going to make friends with those.

826
00:40:06.800 --> 00:40:07.559
<v Speaker 1>Yeah.

827
00:40:07.599 --> 00:40:10.519
<v Speaker 2>All right. Well there's there's one other thing that Simpson

828
00:40:10.679 --> 00:40:15.360
<v Speaker 2>mentions about JavaScript in browsers. Yeah, that I think is

829
00:40:15.400 --> 00:40:16.760
<v Speaker 2>worth worth bringing up.

830
00:40:16.840 --> 00:40:20.360
<v Speaker 1>Okay, yeah, so he points out that when we're writing

831
00:40:20.639 --> 00:40:22.400
<v Speaker 1>JavaScript for browsers.

832
00:40:21.920 --> 00:40:26.000
<v Speaker 2>We're actually dealing with multiple, okay, separate JavaScript programs.

833
00:40:26.039 --> 00:40:28.519
<v Speaker 1>Wait, wait, multiple programs. I thought it was just one

834
00:40:28.599 --> 00:40:29.960
<v Speaker 1>big JavaScript program.

835
00:40:30.000 --> 00:40:34.039
<v Speaker 2>It seems that way. Yeah, but it's actually there are subtleties. Okay,

836
00:40:34.079 --> 00:40:38.559
<v Speaker 2>so each script tagh in your HTML represents a separate

837
00:40:39.079 --> 00:40:40.000
<v Speaker 2>JavaScript program.

838
00:40:40.199 --> 00:40:43.760
<v Speaker 1>Oh so it's like each script tag is its own.

839
00:40:43.639 --> 00:40:46.800
<v Speaker 2>Is its own little universe universe. Yeah, and this has

840
00:40:46.840 --> 00:40:50.679
<v Speaker 2>implications for things like, okay, variable scoping, error handling.

841
00:40:50.840 --> 00:40:51.880
<v Speaker 1>Okay, give me an example.

842
00:40:51.920 --> 00:40:55.960
<v Speaker 2>Okay, so, for example, variable hoisting. Oh right, that thing

843
00:40:56.000 --> 00:41:00.239
<v Speaker 2>where variable declarations get kind of conceptually moved to the

844
00:41:00.239 --> 00:41:04.400
<v Speaker 2>top of their scope. That only happens within each individual's

845
00:41:04.679 --> 00:41:05.519
<v Speaker 2>script program.

846
00:41:06.000 --> 00:41:09.239
<v Speaker 1>Oh so it's not across, not across, not across multiple

847
00:41:09.239 --> 00:41:09.880
<v Speaker 1>script tags.

848
00:41:09.880 --> 00:41:13.519
<v Speaker 2>So if I declare a variable in one script tag,

849
00:41:14.000 --> 00:41:15.639
<v Speaker 2>I can't use it in another one, not.

850
00:41:15.679 --> 00:41:20.639
<v Speaker 1>Unless you're using global variables, which is generally a bad idea. Yeah,

851
00:41:20.760 --> 00:41:21.559
<v Speaker 1>globals are bad.

852
00:41:21.760 --> 00:41:24.800
<v Speaker 2>Yeah, keep your scripts nice and self contained.

853
00:41:24.920 --> 00:41:28.519
<v Speaker 1>Okay, so keep it, keep it contained. What about error handling?

854
00:41:28.760 --> 00:41:32.039
<v Speaker 2>Air handling? Yeah, so errors were actually isolated to the

855
00:41:32.119 --> 00:41:33.320
<v Speaker 2>script program.

856
00:41:33.000 --> 00:41:36.000
<v Speaker 1>Or they occur. So if one of my script tags

857
00:41:36.119 --> 00:41:37.760
<v Speaker 1>has an error.

858
00:41:38.159 --> 00:41:39.920
<v Speaker 2>Yeah, it's not necessarily going.

859
00:41:39.719 --> 00:41:42.239
<v Speaker 1>To it won't crash everything.

860
00:41:42.440 --> 00:41:45.079
<v Speaker 2>Yeah, it won't bring down the whole page, It won't

861
00:41:45.079 --> 00:41:46.159
<v Speaker 2>prevent other scripts.

862
00:41:46.239 --> 00:41:48.159
<v Speaker 1>So javascripts got like built in.

863
00:41:48.519 --> 00:41:52.840
<v Speaker 2>Yeah, it's it's designed to be fault tolerance. Fault tolerance. Yeah, Okay,

864
00:41:52.960 --> 00:41:54.199
<v Speaker 2>keep the web running smoothly.

865
00:41:54.760 --> 00:41:58.000
<v Speaker 1>Well, the WIB is a chaotic place, it is. JavaScript

866
00:41:58.000 --> 00:42:00.280
<v Speaker 1>has to be able to handle all of it.

867
00:42:00.400 --> 00:42:01.440
<v Speaker 2>Resilience is key.

868
00:42:01.559 --> 00:42:05.360
<v Speaker 1>Resilience is key. Right, Well, I think we've we've reached

869
00:42:05.360 --> 00:42:10.679
<v Speaker 1>the end of our deep dive here into JavaScript types

870
00:42:10.760 --> 00:42:14.039
<v Speaker 1>and grammar. We did, Yeah, we've really got We've gone

871
00:42:14.199 --> 00:42:18.639
<v Speaker 1>deep dive into into how the language works, uncovered.

872
00:42:18.119 --> 00:42:22.159
<v Speaker 2>Some quirks, some quirks, some gotcha and yeah.

873
00:42:21.800 --> 00:42:26.159
<v Speaker 1>And really seeing how JavaScript has to deal with right

874
00:42:26.639 --> 00:42:30.199
<v Speaker 1>these different Yeah, what are the key takeaways?

875
00:42:30.840 --> 00:42:33.679
<v Speaker 2>I think you know. The main takeaway is JavaScript is

876
00:42:33.719 --> 00:42:35.320
<v Speaker 2>a language that's very.

877
00:42:36.840 --> 00:42:38.519
<v Speaker 1>H deeply connect.

878
00:42:38.199 --> 00:42:43.880
<v Speaker 2>Yeah, intertwined with its environment and understanding that. Okay, it crucial.

879
00:42:44.000 --> 00:42:47.679
<v Speaker 1>It's not just about the rules of the language.

880
00:42:47.760 --> 00:42:48.760
<v Speaker 2>It's not just the language.

881
00:42:48.760 --> 00:42:51.840
<v Speaker 1>Itsel how the language fits into the bigger picture.

882
00:42:51.880 --> 00:42:52.920
<v Speaker 2>The whole ecosystem.

883
00:42:53.119 --> 00:42:56.920
<v Speaker 1>Yeah all right, well, listeners, that's it for our deep

884
00:42:57.079 --> 00:43:03.480
<v Speaker 1>dive into JavaScript types and grammar. Absolutely, we really appreciate

885
00:43:03.480 --> 00:43:04.880
<v Speaker 1>you coming along with us on this.

886
00:43:05.199 --> 00:43:05.440
<v Speaker 2>Yeah.

887
00:43:05.760 --> 00:43:11.119
<v Speaker 1>Sometimes confusing, Yeah, hope, hopefully enlightening enlightened journey. Remember, the

888
00:43:11.199 --> 00:43:14.760
<v Speaker 1>learning never stops. JavaScript is always changing, so stay curious,

889
00:43:14.920 --> 00:43:18.400
<v Speaker 1>keep exploring, and don't be afraid to really dive deep

890
00:43:18.440 --> 00:43:21.599
<v Speaker 1>into the documentation. Until next time, happy coding, everybody,