1
00:00:00,000 --> 00:00:02,465
[MUSIC PLAYING]

2
00:00:02,465 --> 00:00:18,241


3
00:00:18,241 --> 00:00:21,040
DAVID MALAN: All right, welcome
everyone to Mobile App Development

4
00:00:21,040 --> 00:00:21,970
with React Native.

5
00:00:21,970 --> 00:00:24,010
My name is David Malan,
and this here is--

6
00:00:24,010 --> 00:00:24,970
JORDAN HAYASHI: Jordan Hayashi.

7
00:00:24,970 --> 00:00:26,970
DAVID MALAN: --and this
is a course that assumes

8
00:00:26,970 --> 00:00:29,174
as background only
something like CS50, which

9
00:00:29,174 --> 00:00:31,090
is Harvard's Introduction
to Computer Science.

10
00:00:31,090 --> 00:00:33,756
But more generally, if you haven't
taken that particular course,

11
00:00:33,756 --> 00:00:37,180
prior programming experience in
most any language should suffice.

12
00:00:37,180 --> 00:00:39,640
The focus of this class, of course, is
going to be on mobile app development.

13
00:00:39,640 --> 00:00:41,390
And the interesting
thing about this space

14
00:00:41,390 --> 00:00:43,327
is that it's been
changing pretty rapidly.

15
00:00:43,327 --> 00:00:45,160
It wasn't all that long
ago where none of us

16
00:00:45,160 --> 00:00:47,119
actually had smartphones in our pockets.

17
00:00:47,119 --> 00:00:49,660
And so the landscape has been
changing, particularly quickly.

18
00:00:49,660 --> 00:00:51,190
And it's getting better and better.

19
00:00:51,190 --> 00:00:55,540
If you've done any app developments on
mobile devices or any web development

20
00:00:55,540 --> 00:00:57,670
on mobile devices,
early on we pretty much

21
00:00:57,670 --> 00:01:01,720
just had HTML and CSS, maybe some
JavaScript for interactivity.

22
00:01:01,720 --> 00:01:03,590
Then lots of libraries
came onto the scenes.

23
00:01:03,590 --> 00:01:07,450
They, via CSS and JavaScript,
gave the appearance

24
00:01:07,450 --> 00:01:10,300
that you had a mobile-like
application on your phone,

25
00:01:10,300 --> 00:01:12,310
but the user interface
wasn't all that good.

26
00:01:12,310 --> 00:01:14,620
And you can tell that this
isn't really "native".

27
00:01:14,620 --> 00:01:20,380
That is, code that's in Objective-C or
Swift on iOS or in Java for Android.

28
00:01:20,380 --> 00:01:22,050
And something always felt a bit off.

29
00:01:22,050 --> 00:01:23,980
So you could learn any
one of those languages

30
00:01:23,980 --> 00:01:27,610
or pick up the various tool kits
that exist to write native software.

31
00:01:27,610 --> 00:01:29,030
But it's a decent learning curve.

32
00:01:29,030 --> 00:01:30,880
And if you're running a
company or writing an app,

33
00:01:30,880 --> 00:01:32,350
you have to generally pick and choose.

34
00:01:32,350 --> 00:01:33,550
Do I want to target Android?

35
00:01:33,550 --> 00:01:37,120
Do I want to do iOS, or do I essentially
want to do twice as much work?

36
00:01:37,120 --> 00:01:39,732
And so that alone could
be a potential hurdle.

37
00:01:39,732 --> 00:01:41,440
And then there were
these other libraries

38
00:01:41,440 --> 00:01:46,300
that allowed you to approximate the
experience of writing your code once,

39
00:01:46,300 --> 00:01:48,080
and then run it on both platforms.

40
00:01:48,080 --> 00:01:51,310
But there, too, you could always
tell that something wasn't quite

41
00:01:51,310 --> 00:01:53,234
natural for the particular device.

42
00:01:53,234 --> 00:01:55,150
And then more recently
has come onto the scene

43
00:01:55,150 --> 00:01:58,950
a number of new frameworks,
particularly React Native,

44
00:01:58,950 --> 00:02:01,390
an open source framework
popularized by Facebook

45
00:02:01,390 --> 00:02:06,730
that really actually now enables truly
native cross-platform developments

46
00:02:06,730 --> 00:02:09,380
while using JavaScript to
rather stitch things together

47
00:02:09,380 --> 00:02:11,380
and then leaning on the
framework to provide you

48
00:02:11,380 --> 00:02:14,740
with those truly native user interface
widgets and other features that

49
00:02:14,740 --> 00:02:17,061
would come to expect from
those various languages.

50
00:02:17,061 --> 00:02:19,060
So what we'll do over the
course of the semester

51
00:02:19,060 --> 00:02:21,640
is really dive in deeply
to mobile app development,

52
00:02:21,640 --> 00:02:24,220
specifically building on top
of this popular framework.

53
00:02:24,220 --> 00:02:26,514
You might have heard of
Reacht Native or React

54
00:02:26,514 --> 00:02:29,680
in the context of web browsers, which
has been around for some time as well.

55
00:02:29,680 --> 00:02:32,763
And to a lot of those paradigms that
folks have been using for a few years

56
00:02:32,763 --> 00:02:36,010
now on laptops and desktops is now
available with additional features

57
00:02:36,010 --> 00:02:37,780
in a mobile context, especially.

58
00:02:37,780 --> 00:02:40,960
So today we're going to dive in
quite quickly to JavaScript itself.

59
00:02:40,960 --> 00:02:43,210
If you have a bit of background
in that, that's great.

60
00:02:43,210 --> 00:02:45,010
We'll hopefully fill in
some gaps along the way.

61
00:02:45,010 --> 00:02:47,926
And we'll also look at some of the
more advanced features both tonight

62
00:02:47,926 --> 00:02:51,640
and next week as well,
particularly ES6 6 or ECMAScript 6,

63
00:02:51,640 --> 00:02:54,060
which is essentially the
latest version of JavaScript,

64
00:02:54,060 --> 00:02:58,084
and with it some new syntactic
features and programmatic capabilities.

65
00:02:58,084 --> 00:03:00,250
A week after that, we'll
take a look at React itself

66
00:03:00,250 --> 00:03:04,510
and JSX, which rather comingles
code with XML or a markup language,

67
00:03:04,510 --> 00:03:05,540
if you're familiar.

68
00:03:05,540 --> 00:03:07,960
And then look at some of
the particular features

69
00:03:07,960 --> 00:03:11,080
and UI features that you get
with a framework like React JS.

70
00:03:11,080 --> 00:03:13,450
Components, props, how
you deal with states,

71
00:03:13,450 --> 00:03:17,260
how you can actually stylize things,
get user input, and create views,

72
00:03:17,260 --> 00:03:20,940
if you're familiar with paradigms
like MVC, model view controller.

73
00:03:20,940 --> 00:03:24,070
Review governs what it is the user
is seeing and interacting with.

74
00:03:24,070 --> 00:03:25,820
We'll take a look at
debugging techniques,

75
00:03:25,820 --> 00:03:28,900
particularly for a mobile platform,
which might not necessarily be obvious

76
00:03:28,900 --> 00:03:31,941
if the device you're working on is
here, and the device you're testing on

77
00:03:31,941 --> 00:03:32,490
is here.

78
00:03:32,490 --> 00:03:34,470
We'll give you some tools
and techniques for that.

79
00:03:34,470 --> 00:03:37,240
Focusing ultimately on data and
navigation, how you can actually

80
00:03:37,240 --> 00:03:39,310
get users around in your applications.

81
00:03:39,310 --> 00:03:41,920
And then looking at a popular
third party tool and framework

82
00:03:41,920 --> 00:03:44,340
called Expo, which actually
makes it even easier

83
00:03:44,340 --> 00:03:46,090
to develop for this
particular environment

84
00:03:46,090 --> 00:03:48,010
and get started and
get worked on quickly.

85
00:03:48,010 --> 00:03:50,530
Looking at Redux and state
management again more generally.

86
00:03:50,530 --> 00:03:52,624
Performance tuning of your applications.

87
00:03:52,624 --> 00:03:54,790
And then finally how you
actually get this thing off

88
00:03:54,790 --> 00:03:58,000
of your laptop or desktop
and off of just your phone

89
00:03:58,000 --> 00:04:00,547
and on to other phones
and mobile devices.

90
00:04:00,547 --> 00:04:02,380
And we'll apply all of
these lessons learned

91
00:04:02,380 --> 00:04:05,088
and the real challenges, and the
hands dirty portion of the class

92
00:04:05,088 --> 00:04:07,000
will be by way of the course's projects.

93
00:04:07,000 --> 00:04:10,750
Three of them assign specifications from
us that spec out exactly what it is you

94
00:04:10,750 --> 00:04:12,070
should aspire to build.

95
00:04:12,070 --> 00:04:14,830
And then the class will culminate
with the final project, where

96
00:04:14,830 --> 00:04:20,110
it will be up to you to propose, to
design, and ultimately implement most

97
00:04:20,110 --> 00:04:24,490
any mobile application a top
React Native, as you might like.

98
00:04:24,490 --> 00:04:28,510
Without further ado, let's dive
into an overview of the class itself

99
00:04:28,510 --> 00:04:29,560
as well as, then.

100
00:04:29,560 --> 00:04:30,060
JavaScript.

101
00:04:30,060 --> 00:04:31,570
Let me turn things
over already to Jordan.

102
00:04:31,570 --> 00:04:32,736
JORDAN HAYASHI: Great, yeah.

103
00:04:32,736 --> 00:04:34,840
Thanks for the great intro, David.

104
00:04:34,840 --> 00:04:39,270
So a few things about
the course itself, you

105
00:04:39,270 --> 00:04:40,770
can find information on the website.

106
00:04:40,770 --> 00:04:43,570
I e-mailed you all the
link earlier today.

107
00:04:43,570 --> 00:04:46,030
On it, there's a link
to the Slack, which

108
00:04:46,030 --> 00:04:49,212
is what we're going to use for
pretty instant communication.

109
00:04:49,212 --> 00:04:50,920
You can create groups
amongst yourselves,

110
00:04:50,920 --> 00:04:55,082
and we'll use that for any quick
tidbits when we have to send out.

111
00:04:55,082 --> 00:04:57,040
And then, additionally,
we have our staff email

112
00:04:57,040 --> 00:05:01,870
that's linked as well, which is how
you can just email the staff directly.

113
00:05:01,870 --> 00:05:04,000
And so a little bit about lectures.

114
00:05:04,000 --> 00:05:05,625
We'll have a short break about halfway.

115
00:05:05,625 --> 00:05:09,700
You can get up, you can use the
bathroom, go rest your legs.

116
00:05:09,700 --> 00:05:12,130
If you have a question at
all during the lecture,

117
00:05:12,130 --> 00:05:15,472
feel free to just shoot up your
hand or interrupt me directly.

118
00:05:15,472 --> 00:05:18,180
Concepts constantly build on each
other, so it's pretty important

119
00:05:18,180 --> 00:05:20,180
to learn everything
up to a certain point

120
00:05:20,180 --> 00:05:22,882
in order to build off of it later on.

121
00:05:22,882 --> 00:05:25,340
And if something isn't super
important to know when you ask

122
00:05:25,340 --> 00:05:26,964
a question about it, I'll let you know.

123
00:05:26,964 --> 00:05:29,300
So don't worry about
asking dumb questions.

124
00:05:29,300 --> 00:05:32,930
And the staff will be monitoring
the Slack during lecture.

125
00:05:32,930 --> 00:05:36,080
So if people online have any
questions, feel free to post there,

126
00:05:36,080 --> 00:05:38,790
and the staff will interrupt me.

127
00:05:38,790 --> 00:05:41,240
Another thing, I love live examples.

128
00:05:41,240 --> 00:05:43,520
I think the best examples
are created on the spot.

129
00:05:43,520 --> 00:05:46,350
And with that comes
a little bit of risk.

130
00:05:46,350 --> 00:05:47,780
So live coding does have risks.

131
00:05:47,780 --> 00:05:50,030
If I make a mistake,
feel free to correct me.

132
00:05:50,030 --> 00:05:52,422
I have some candy in the lectern.

133
00:05:52,422 --> 00:05:54,380
So if you correct me,
I'll give you some candy.

134
00:05:54,380 --> 00:05:59,270
For those online, sorry you don't get
candy, but you can have some glory.

135
00:05:59,270 --> 00:06:00,759
Cool.

136
00:06:00,759 --> 00:06:02,300
Let's start talking about JavaScript.

137
00:06:02,300 --> 00:06:04,595
So JavaScript is an
interpretive language.

138
00:06:04,595 --> 00:06:06,470
So I posted a little
bit in the Slack earlier

139
00:06:06,470 --> 00:06:08,480
asking about most comfortable languages.

140
00:06:08,480 --> 00:06:10,970
Most of you guys were
saying JavaScript, but I

141
00:06:10,970 --> 00:06:14,840
know those of you who took CS50
might have some experience with CE,

142
00:06:14,840 --> 00:06:17,300
which is a compiled language.

143
00:06:17,300 --> 00:06:20,107
So JavaScript is not compiled.

144
00:06:20,107 --> 00:06:22,940
It's actually interpreted, so an
interpreter will read line by line,

145
00:06:22,940 --> 00:06:24,950
execute that code line by line.

146
00:06:24,950 --> 00:06:28,885
Each browser has built into
it its own JavaScript engine,

147
00:06:28,885 --> 00:06:30,260
which either interprets the code.

148
00:06:30,260 --> 00:06:33,017
It might do some magic with
some just-in-time compilation,

149
00:06:33,017 --> 00:06:35,600
but for the most part it's just
reading your code line by line

150
00:06:35,600 --> 00:06:37,130
and executing it.

151
00:06:37,130 --> 00:06:40,220
Each browser actually has its
own engine, and there are names.

152
00:06:40,220 --> 00:06:42,590
So chrome is called V8.

153
00:06:42,590 --> 00:06:47,400
If you've heard of Node.js at all, it
also uses that same node v8 engine.

154
00:06:47,400 --> 00:06:48,650
Firefox has SpiderMonkey.

155
00:06:48,650 --> 00:06:50,250
Safari has JavaScriptCore.

156
00:06:50,250 --> 00:06:52,700
Chakra for Microsoft Edge
and Internet Explorer.

157
00:06:52,700 --> 00:06:54,450
You don't really need
to know these names,

158
00:06:54,450 --> 00:06:57,740
but it's a little bit important just
to know that different ones exist,

159
00:06:57,740 --> 00:07:01,460
because JavaScript actually
is built off of a standard.

160
00:07:01,460 --> 00:07:05,060
The standard is put out by ECMA,
which stands for the European Computer

161
00:07:05,060 --> 00:07:06,950
Manufacturers Association.

162
00:07:06,950 --> 00:07:13,142
And that association is in charge of
just putting out a spec, meaning hey,

163
00:07:13,142 --> 00:07:14,600
I know you guys have this language.

164
00:07:14,600 --> 00:07:16,725
But this is exactly what
this language needs to do.

165
00:07:16,725 --> 00:07:19,310
And for every single
function, this is exactly how

166
00:07:19,310 --> 00:07:20,960
this function should behave.

167
00:07:20,960 --> 00:07:22,690
So each of these browsers--

168
00:07:22,690 --> 00:07:24,140
the engines in the browsers--

169
00:07:24,140 --> 00:07:26,130
actually implement the standard.

170
00:07:26,130 --> 00:07:29,270
But there are some functions where
the standard is a little bit hazy on,

171
00:07:29,270 --> 00:07:32,640
or maybe it doesn't even define
this particular function.

172
00:07:32,640 --> 00:07:37,340
And there's no hard line in exactly
what that function should do.

173
00:07:37,340 --> 00:07:40,520
So they may differ for anything
not defined by that standard.

174
00:07:40,520 --> 00:07:43,370


175
00:07:43,370 --> 00:07:45,780
And some syntax.

176
00:07:45,780 --> 00:07:49,590
Let's actually hop into
code directly for this.

177
00:07:49,590 --> 00:07:53,940
So let's do-- cool.

178
00:07:53,940 --> 00:07:56,580
And the way that you declare
variables in JavaScript,

179
00:07:56,580 --> 00:07:58,510
there's actually three different ways.

180
00:07:58,510 --> 00:08:00,259
We'll talk about that
a little more later.

181
00:08:00,259 --> 00:08:02,661
But for now, we'll just use
this keyword called const.

182
00:08:02,661 --> 00:08:04,850
So if I want to declare a
variable, I'd say const.

183
00:08:04,850 --> 00:08:06,610
So give me a variable called first name.

184
00:08:06,610 --> 00:08:11,890


185
00:08:11,890 --> 00:08:14,440
And I can give it any value I want.

186
00:08:14,440 --> 00:08:16,100
So let's just call it my first name.

187
00:08:16,100 --> 00:08:19,400


188
00:08:19,400 --> 00:08:21,290
So you notice I have a
string literal there.

189
00:08:21,290 --> 00:08:27,530
It's using double quotes, and then I
end that statement with a semi-colon.

190
00:08:27,530 --> 00:08:28,730
I can also do a last name.

191
00:08:28,730 --> 00:08:33,736


192
00:08:33,736 --> 00:08:36,360
And if you notice, this time, I
still have that string literal,

193
00:08:36,360 --> 00:08:37,799
but this time I'm using single quotes.

194
00:08:37,799 --> 00:08:39,882
Because in JavaScript
there's really no difference

195
00:08:39,882 --> 00:08:41,280
between double and single quotes.

196
00:08:41,280 --> 00:08:45,000
You also notice I omitted that
semi-colon, which in JavaScript is OK.

197
00:08:45,000 --> 00:08:46,470
So my colons are actually optional.

198
00:08:46,470 --> 00:08:49,440


199
00:08:49,440 --> 00:08:52,320
So say I wanted something
that was not a string.

200
00:08:52,320 --> 00:08:55,950
I can just give it a value, like 42.

201
00:08:55,950 --> 00:08:59,580
So in C, you might see
something like, give me an int,

202
00:08:59,580 --> 00:09:04,202
or give me a string or a char star.

203
00:09:04,202 --> 00:09:05,910
You're declaring types
right away with C,

204
00:09:05,910 --> 00:09:10,690
but for something like JavaScript,
you actually don't have to do that.

205
00:09:10,690 --> 00:09:12,000
We can also do arrays.

206
00:09:12,000 --> 00:09:14,654


207
00:09:14,654 --> 00:09:17,320
And we can just declare them in
line like this, and I can have--

208
00:09:17,320 --> 00:09:34,730


209
00:09:34,730 --> 00:09:38,450
So, if you notice, I actually have
three different types all in this array.

210
00:09:38,450 --> 00:09:41,275
So I have a string, I have a
number, and I have a function.

211
00:09:41,275 --> 00:09:42,400
And this is perfectly fine.

212
00:09:42,400 --> 00:09:44,816
JavaScript doesn't really care
what you throw in an array.

213
00:09:44,816 --> 00:09:48,000
You can have all sorts of
different variable types.

214
00:09:48,000 --> 00:09:50,597
And so say we want to access
those things in an array.

215
00:09:50,597 --> 00:09:52,680
Anybody care to guess
exactly how I would do that?

216
00:09:52,680 --> 00:09:55,000
So say I want to execute that function.

217
00:09:55,000 --> 00:09:56,620
How might I go about doing that?

218
00:09:56,620 --> 00:09:58,160
Any guesses?

219
00:09:58,160 --> 00:09:59,727
Yeah.

220
00:09:59,727 --> 00:10:00,310
Yeah, exactly.

221
00:10:00,310 --> 00:10:01,018
The array of two.

222
00:10:01,018 --> 00:10:03,610
So if you're familiar with
other languages, a lot of them

223
00:10:03,610 --> 00:10:06,180
have the same syntax for
indexing into an array.

224
00:10:06,180 --> 00:10:08,890
And so since we have three
things in this array,

225
00:10:08,890 --> 00:10:12,430
we do what's called zero indexing,
whereby the first index in that array

226
00:10:12,430 --> 00:10:14,080
is called the zeroth index.

227
00:10:14,080 --> 00:10:15,490
And then you count from there.

228
00:10:15,490 --> 00:10:18,710
So we have zeroth here,
first, and second here.

229
00:10:18,710 --> 00:10:20,800
And so say I want to
access that function.

230
00:10:20,800 --> 00:10:23,740
I just do array 2, and
I get that function.

231
00:10:23,740 --> 00:10:26,170
And say I now wanted to
execute that function.

232
00:10:26,170 --> 00:10:27,912
I can, say, execute it like that.

233
00:10:27,912 --> 00:10:30,370
So this is something that you
might see in other languages,

234
00:10:30,370 --> 00:10:32,230
but JavaScript you can do it as well.

235
00:10:32,230 --> 00:10:37,890
You can just grab that function out of
that array and execute it like that.

236
00:10:37,890 --> 00:10:41,140
Say I wanted a for loop, and I wanted
to console log everything in that array.

237
00:10:41,140 --> 00:10:46,840
I can do it just almost
like C. So I can do for--

238
00:10:46,840 --> 00:10:48,970
this time we'll use
let for the variable.

239
00:10:48,970 --> 00:10:51,060
We'll talk a little
more about that later.

240
00:10:51,060 --> 00:10:52,387
So I start at zero.

241
00:10:52,387 --> 00:10:53,970
Well i is less than the raised length.

242
00:10:53,970 --> 00:10:56,400
[TYPING]

243
00:10:56,400 --> 00:11:08,080


244
00:11:08,080 --> 00:11:08,980
You might see me--

245
00:11:08,980 --> 00:11:11,830
my personal preference is
to omit the semicolons,

246
00:11:11,830 --> 00:11:14,290
but you might read something
online that has them.

247
00:11:14,290 --> 00:11:16,410
It really doesn't matter all that much.

248
00:11:16,410 --> 00:11:17,660
And so this line of code here.

249
00:11:17,660 --> 00:11:20,200
You might have seen a for loop in
other languages that you've used.

250
00:11:20,200 --> 00:11:22,780
So this one is just saying
for give me a variable that's

251
00:11:22,780 --> 00:11:24,700
called i that starts at zero.

252
00:11:24,700 --> 00:11:27,670
And while it's less than the
number of values in the array--

253
00:11:27,670 --> 00:11:29,800
array.length-- just
keep incrementing it.

254
00:11:29,800 --> 00:11:32,650
And then every single
time console.log, which

255
00:11:32,650 --> 00:11:37,720
is JavaScript's print function,
whatever that value in that array is.

256
00:11:37,720 --> 00:11:38,950
So we can actually run this.

257
00:11:38,950 --> 00:11:42,920


258
00:11:42,920 --> 00:11:51,280
And as you see the first
time, line 12, where

259
00:11:51,280 --> 00:11:56,020
we say index into that array to
the second value, and call it.

260
00:11:56,020 --> 00:11:57,490
That's what's printing high.

261
00:11:57,490 --> 00:12:00,670
And this for loop here will now
print string 42 and this thing called

262
00:12:00,670 --> 00:12:03,900
function, which is this function.

263
00:12:03,900 --> 00:12:06,220
Cool, any questions on syntax?

264
00:12:06,220 --> 00:12:06,820
Yeah.

265
00:12:06,820 --> 00:12:09,900
AUDIENCE: In your array
there, does it matter if you

266
00:12:09,900 --> 00:12:11,560
have that third comma after your--

267
00:12:11,560 --> 00:12:13,018
JORDAN HAYASHI: It does not matter.

268
00:12:13,018 --> 00:12:17,310
So the question was, does it matter on
line 9 that comment at the very end?

269
00:12:17,310 --> 00:12:20,770
And so JavaScript allows you to have
trailing commas, meaning in arrays,

270
00:12:20,770 --> 00:12:22,512
objects, or even function calls.

271
00:12:22,512 --> 00:12:25,720
You can actually have extra commas, and
it doesn't matter whether you have it

272
00:12:25,720 --> 00:12:26,350
or not.

273
00:12:26,350 --> 00:12:28,720
It's optional just
like the semicolon is.

274
00:12:28,720 --> 00:12:31,660
But were I to omit
the comma here and try

275
00:12:31,660 --> 00:12:36,520
to run that, I'm going to get
a syntax error as expected.

276
00:12:36,520 --> 00:12:40,200


277
00:12:40,200 --> 00:12:43,334
Cool, any other questions?

278
00:12:43,334 --> 00:12:44,810
Great.

279
00:12:44,810 --> 00:12:45,560
So back to slides.

280
00:12:45,560 --> 00:12:46,154
So types.

281
00:12:46,154 --> 00:12:48,070
So we talked about types
a little bit earlier,

282
00:12:48,070 --> 00:12:50,750
and I'm just going to talk a
little bit more about them.

283
00:12:50,750 --> 00:12:54,880
So JavaScript has what's called dynamic
typing, meaning given a variable,

284
00:12:54,880 --> 00:12:56,930
it has no type associated with it.

285
00:12:56,930 --> 00:13:00,520
So just like I said, give me
a variable called first name

286
00:13:00,520 --> 00:13:02,440
and set it equal to a string.

287
00:13:02,440 --> 00:13:04,900
I could actually change
that later to, say, a type

288
00:13:04,900 --> 00:13:07,120
number or a Boolean
or anything like that.

289
00:13:07,120 --> 00:13:11,290
And JavaScript is fine with that just
because it has those dynamic types.

290
00:13:11,290 --> 00:13:13,420
And there a certain
number of primitive types.

291
00:13:13,420 --> 00:13:17,780
Primitive types are types that have
no methods, and they're immutable.

292
00:13:17,780 --> 00:13:20,320
And so undefined, null are two of them.

293
00:13:20,320 --> 00:13:21,130
Boolean.

294
00:13:21,130 --> 00:13:23,990
Everybody should know
Boolean true or false.

295
00:13:23,990 --> 00:13:27,540
Number 1, 2, 3, negative 1, 2, 3.

296
00:13:27,540 --> 00:13:34,330
It has no float, so 0 and
0.1 are both of type number.

297
00:13:34,330 --> 00:13:40,780
String, which are the
things between the quotes.

298
00:13:40,780 --> 00:13:43,210
And then symbol, which is
something that's new in ES6,

299
00:13:43,210 --> 00:13:48,340
but we're not going to talk about
it, nor are we going to use it,

300
00:13:48,340 --> 00:13:51,722
and then everything else is an object,
and we'll talk a little bit more

301
00:13:51,722 --> 00:13:52,430
about that later.

302
00:13:52,430 --> 00:13:56,240


303
00:13:56,240 --> 00:14:01,730
Cool and so a lot of languages
have this thing where

304
00:14:01,730 --> 00:14:03,600
you change one type to another type.

305
00:14:03,600 --> 00:14:05,780
So since JavaScript
is dynamically typed,

306
00:14:05,780 --> 00:14:08,800
we have this thing called typecasting.

307
00:14:08,800 --> 00:14:12,470
So coercion is the act of changing
one type to a different type,

308
00:14:12,470 --> 00:14:15,350
and there's two different ways
you can coerce these variables.

309
00:14:15,350 --> 00:14:18,530
So say, as an example, we
have this const called x

310
00:14:18,530 --> 00:14:20,570
and we give it a value 42.

311
00:14:20,570 --> 00:14:22,790
Say I wanted to change
that value to a string.

312
00:14:22,790 --> 00:14:24,030
There are a couple
different ways I can do it.

313
00:14:24,030 --> 00:14:25,790
There's explicit coercion.

314
00:14:25,790 --> 00:14:27,090
There's implicit coercion.

315
00:14:27,090 --> 00:14:29,660
So explicit is, hey, I'm
just going to tell you

316
00:14:29,660 --> 00:14:33,950
exactly what I want by wrapping
it with the type that I want,

317
00:14:33,950 --> 00:14:35,120
and give it to me.

318
00:14:35,120 --> 00:14:37,310
And so that's being very
explicit with what I want.

319
00:14:37,310 --> 00:14:39,140
And so the example of
that would be say I

320
00:14:39,140 --> 00:14:41,360
want to get a string from that value x.

321
00:14:41,360 --> 00:14:46,750
I just wrap it with capital string,
and it pops out 42 with a string.

322
00:14:46,750 --> 00:14:48,500
There's also a way of
doing it implicitly,

323
00:14:48,500 --> 00:14:51,740
which is I'm going to rely
on the behavior of JavaScript

324
00:14:51,740 --> 00:14:53,430
in order to get this to a string.

325
00:14:53,430 --> 00:14:58,289
And so say I want to
add 42 to empty string.

326
00:14:58,289 --> 00:15:00,830
That wouldn't really make sense
if I wanted to have a number,

327
00:15:00,830 --> 00:15:03,320
but since 42 is easily
castable to a string,

328
00:15:03,320 --> 00:15:06,710
I can say, hey, give me
42, add an empty string,

329
00:15:06,710 --> 00:15:09,560
and I expect to get back
something of type string.

330
00:15:09,560 --> 00:15:13,170
That is called implicit coercion.

331
00:15:13,170 --> 00:15:15,336
And so how might we go
about comparing-- oh, yeah.

332
00:15:15,336 --> 00:15:15,836
Question.

333
00:15:15,836 --> 00:15:19,589
AUDIENCE: Is the string passing
behind the same ex.2 string?

334
00:15:19,589 --> 00:15:22,130
JORDAN HAYASHI: Yeah, so another
way would be to invoke that.

335
00:15:22,130 --> 00:15:24,920


336
00:15:24,920 --> 00:15:28,760
So the question was,
what about ex.2 string?

337
00:15:28,760 --> 00:15:32,450
And so yes, another way to
get from a number to a string

338
00:15:32,450 --> 00:15:37,440
would be to invoke that method on
the string or on the number, sorry.

339
00:15:37,440 --> 00:15:41,600
Cool, and so how might we
go about comparing values?

340
00:15:41,600 --> 00:15:44,990
So in most languages you can compare
values with the double equals,

341
00:15:44,990 --> 00:15:47,751
but JavaScript has this
thing called triple equals.

342
00:15:47,751 --> 00:15:50,000
So there are two different
ways of comparing equality.

343
00:15:50,000 --> 00:15:52,260
There's double equals and
there's triple equals,

344
00:15:52,260 --> 00:15:54,740
where double equals will
actually coerce the types,

345
00:15:54,740 --> 00:15:58,790
and triple equals require
that the types match.

346
00:15:58,790 --> 00:16:00,695
And so let's play with
that a little bit.

347
00:16:00,695 --> 00:16:06,880


348
00:16:06,880 --> 00:16:16,390
So say I have this value, and I want
to know exactly what type that is.

349
00:16:16,390 --> 00:16:21,010
So there's this operator called typeof
in JavaScript where I can invoke this.

350
00:16:21,010 --> 00:16:28,770


351
00:16:28,770 --> 00:16:37,760
And that will give me the type
of whatever that variable holds.

352
00:16:37,760 --> 00:16:43,810
So if I were to run this code,
then it would say number,

353
00:16:43,810 --> 00:16:45,610
because that is the type.

354
00:16:45,610 --> 00:16:47,590
So right now in order to
execute my JavaScript,

355
00:16:47,590 --> 00:16:51,040
I'm using this thing called node,
which, as mentioned earlier,

356
00:16:51,040 --> 00:16:56,240
is basically a command line runtime for
JavaScript, which is built off of V8.

357
00:16:56,240 --> 00:16:59,740


358
00:16:59,740 --> 00:17:02,830
Any browser has a console where you
can also just type JavaScript directly

359
00:17:02,830 --> 00:17:03,880
in there.

360
00:17:03,880 --> 00:17:10,849
So if I were to open up the tools on
Chrome, which is my browser of choice,

361
00:17:10,849 --> 00:17:20,290
I actually get this, which
is a JavaScript console built

362
00:17:20,290 --> 00:17:21,903
into all of these browsers.

363
00:17:21,903 --> 00:17:24,819
So if you guys are using Chrome at
home, and you want to follow along,

364
00:17:24,819 --> 00:17:28,810
you're welcome to open up
the developer tools here.

365
00:17:28,810 --> 00:17:32,740
Go to console, and you have your
own JavaScript interpreter here.

366
00:17:32,740 --> 00:17:38,684
So say I wanted to do that thing
where I do const x equals 42,

367
00:17:38,684 --> 00:17:40,600
and I wanted to get the
type of that variable.

368
00:17:40,600 --> 00:17:45,220
I can just do typeof x, and
it will output that number.

369
00:17:45,220 --> 00:17:52,740


370
00:17:52,740 --> 00:17:57,260
So there's a little bit of a caveat with
this, where this might surprise you.

371
00:17:57,260 --> 00:18:03,330


372
00:18:03,330 --> 00:18:07,570
So who thinks they can
guess what this will output?

373
00:18:07,570 --> 00:18:09,295
First of all, what should it output?

374
00:18:09,295 --> 00:18:12,710


375
00:18:12,710 --> 00:18:19,110
So if we remember back a few slides, we
talked about all the different types.

376
00:18:19,110 --> 00:18:21,290
One of them is undefined,
one of them is null.

377
00:18:21,290 --> 00:18:28,280
And say I want to get typeof null.

378
00:18:28,280 --> 00:18:31,471
So what should it output?

379
00:18:31,471 --> 00:18:31,970
Yes?

380
00:18:31,970 --> 00:18:32,815
AUDIENCE: String.

381
00:18:32,815 --> 00:18:34,856
JORDAN HAYASHI: String,
why would you say string?

382
00:18:34,856 --> 00:18:36,902


383
00:18:36,902 --> 00:18:38,870
AUDIENCE: Because [INAUDIBLE].

384
00:18:38,870 --> 00:18:44,530


385
00:18:44,530 --> 00:18:46,030
JORDAN HAYASHI: That's a good guess.

386
00:18:46,030 --> 00:18:51,370
So basically, the answer was so if you
can console log it must be a string.

387
00:18:51,370 --> 00:18:59,770
And while that is correct, most of these
types can actually be cast to string.

388
00:18:59,770 --> 00:19:02,890
So we talked about implicit
versus explicit coercion.

389
00:19:02,890 --> 00:19:05,530
And the way that console
log works is it actually

390
00:19:05,530 --> 00:19:10,210
will turn these values into a
string in order to console.log them,

391
00:19:10,210 --> 00:19:15,200
but it doesn't necessarily mean the
typeof that value itself is a string.

392
00:19:15,200 --> 00:19:16,680
Yeah?

393
00:19:16,680 --> 00:19:18,760
Yeah, so the null.

394
00:19:18,760 --> 00:19:22,330
So we would expect the typeof null
to be null, since null is actually

395
00:19:22,330 --> 00:19:24,020
a primitive type.

396
00:19:24,020 --> 00:19:28,630
However, this actually returns object.

397
00:19:28,630 --> 00:19:32,270
So JavaScript does have
some strange behaviors.

398
00:19:32,270 --> 00:19:34,330
This is one of them.

399
00:19:34,330 --> 00:19:37,810
And people often ask,
hey, we're on ES6 now.

400
00:19:37,810 --> 00:19:40,720
There have been six different
versions of JavaScript.

401
00:19:40,720 --> 00:19:45,590
Why don't you just
change this to be null?

402
00:19:45,590 --> 00:19:50,580
And the answer that ECMA gives is,
well, the whole internet would break.

403
00:19:50,580 --> 00:19:54,970
And so each new version of
ECMAScript should definitely

404
00:19:54,970 --> 00:19:57,340
be backwards compatible
with the previous versions.

405
00:19:57,340 --> 00:20:00,700
Otherwise, say I put
out a website tomorrow.

406
00:20:00,700 --> 00:20:03,610
If somebody comes down and
changes the JavaScript spec,

407
00:20:03,610 --> 00:20:04,990
then my website might break.

408
00:20:04,990 --> 00:20:09,250
And so a lot of websites
actually rely on this to be true.

409
00:20:09,250 --> 00:20:13,720
And, therefore, if a breaking
version of ECMAScript is released,

410
00:20:13,720 --> 00:20:16,397
it might actually just have
unforeseen consequences.

411
00:20:16,397 --> 00:20:18,730
So this is just one of those
strange JavaScript gotchas.

412
00:20:18,730 --> 00:20:23,620


413
00:20:23,620 --> 00:20:28,780
Cool, so another good question would
be so when should I use double equals

414
00:20:28,780 --> 00:20:30,740
versus triple equals?

415
00:20:30,740 --> 00:20:35,170
And people generally say you
should never use double equals,

416
00:20:35,170 --> 00:20:39,889
because that means you have to know
exactly how every single thing coerces.

417
00:20:39,889 --> 00:20:42,430
And not only you, but every
single person who reads your code

418
00:20:42,430 --> 00:20:45,400
should know what all
these values coerce do.

419
00:20:45,400 --> 00:20:47,600
And some of them might
be somewhat surprising.

420
00:20:47,600 --> 00:20:52,030
So we have a chart here that talks
about the JavaScript equality table.

421
00:20:52,030 --> 00:20:55,040
For those of you who have the slides
opened, you can click on that link,

422
00:20:55,040 --> 00:20:57,280
and it will bring you to
the repo that has this.

423
00:20:57,280 --> 00:21:00,460
Basically, some of these
strings are somewhat strange.

424
00:21:00,460 --> 00:21:08,200
Like how empty array is double
equals to false, which doesn't really

425
00:21:08,200 --> 00:21:09,632
make a ton of sense.

426
00:21:09,632 --> 00:21:11,590
A lot of these don't
really make a ton of sense

427
00:21:11,590 --> 00:21:15,580
and, basically, never use
that double equals because it

428
00:21:15,580 --> 00:21:17,535
might have some strange behaviors.

429
00:21:17,535 --> 00:21:21,156


430
00:21:21,156 --> 00:21:22,280
So moving on with coercion.

431
00:21:22,280 --> 00:21:25,220


432
00:21:25,220 --> 00:21:28,870
So we talked about coercing
things into other types,

433
00:21:28,870 --> 00:21:31,090
but how about if we're getting to bools?

434
00:21:31,090 --> 00:21:35,080
So JavaScript has these
things called falsy values.

435
00:21:35,080 --> 00:21:38,470
Who can name a falsy value?

436
00:21:38,470 --> 00:21:44,858
So falsy value is any value that,
if cast to bool, becomes false.

437
00:21:44,858 --> 00:21:45,770
AUDIENCE: Two.

438
00:21:45,770 --> 00:21:47,180
JORDAN HAYASHI: Two?

439
00:21:47,180 --> 00:21:49,310
So two is actually truthy.

440
00:21:49,310 --> 00:21:53,510
So every number except for one number
is truthy, well two numbers actually.

441
00:21:53,510 --> 00:21:54,370
AUDIENCE: Zero.

442
00:21:54,370 --> 00:21:57,300
JORDAN HAYASHI: Zero would
be one of them, yeah.

443
00:21:57,300 --> 00:22:03,530
Not a number which is actually a number,
of type number, is also a falsy value.

444
00:22:03,530 --> 00:22:05,674
Who can name another falsy value?

445
00:22:05,674 --> 00:22:06,650
AUDIENCE: Blank?

446
00:22:06,650 --> 00:22:07,340
JORDAN HAYASHI: Blank what?

447
00:22:07,340 --> 00:22:08,180
AUDIENCE: Or empty.

448
00:22:08,180 --> 00:22:08,870
JORDAN HAYASHI: Empty what?

449
00:22:08,870 --> 00:22:10,152
AUDIENCE: Empty array.

450
00:22:10,152 --> 00:22:12,110
JORDAN HAYASHI: Empty
array is actually truthy.

451
00:22:12,110 --> 00:22:16,020


452
00:22:16,020 --> 00:22:18,540
False is another one.

453
00:22:18,540 --> 00:22:19,560
Undefined, null.

454
00:22:19,560 --> 00:22:22,590


455
00:22:22,590 --> 00:22:25,320
So those are the five falsy values.

456
00:22:25,320 --> 00:22:27,090
So who can name some truthy values?

457
00:22:27,090 --> 00:22:29,780


458
00:22:29,780 --> 00:22:32,170
Somebody said two, which is a valid one.

459
00:22:32,170 --> 00:22:38,150
Three, four, every other number other
than zero, negative zero, not a number.

460
00:22:38,150 --> 00:22:40,580
Empty array is also another truthy.

461
00:22:40,580 --> 00:22:43,850
Empty object and
literally everything else.

462
00:22:43,850 --> 00:22:47,600
So anything other than those
values right there are truthy.

463
00:22:47,600 --> 00:22:51,730


464
00:22:51,730 --> 00:22:55,147
Cool, so objects, arrays,
functions, objects.

465
00:22:55,147 --> 00:22:58,230
It looks like I put objects twice
there, but I actually put it four times.

466
00:22:58,230 --> 00:23:01,790
So JavaScript has this weird
thing where if it's not

467
00:23:01,790 --> 00:23:03,710
one of those primitive
values, it's an object.

468
00:23:03,710 --> 00:23:06,637


469
00:23:06,637 --> 00:23:08,720
And so we'll talk about
this thing in a little bit

470
00:23:08,720 --> 00:23:11,090
called prototype
inheritance, which talks

471
00:23:11,090 --> 00:23:13,730
about how these objects
inherit from each other

472
00:23:13,730 --> 00:23:15,560
and how they actually
work under the hood.

473
00:23:15,560 --> 00:23:17,450
But first let's compare those two types.

474
00:23:17,450 --> 00:23:19,700
So we talked about primitives
earlier, which is--

475
00:23:19,700 --> 00:23:23,225
who can name some of the primitives?

476
00:23:23,225 --> 00:23:24,120
AUDIENCE: Null.

477
00:23:24,120 --> 00:23:27,360
JORDAN HAYASHI: Null, undefined.

478
00:23:27,360 --> 00:23:28,200
AUDIENCE: Number.

479
00:23:28,200 --> 00:23:29,594
JORDAN HAYASHI: Number.

480
00:23:29,594 --> 00:23:30,510
AUDIENCE: Boolean.

481
00:23:30,510 --> 00:23:30,960
JORDAN HAYASHI: Boolean.

482
00:23:30,960 --> 00:23:31,880
AUDIENCE: String.

483
00:23:31,880 --> 00:23:32,838
JORDAN HAYASHI: String.

484
00:23:32,838 --> 00:23:41,530


485
00:23:41,530 --> 00:23:42,267
And simple.

486
00:23:42,267 --> 00:23:43,350
So good, you got them all.

487
00:23:43,350 --> 00:23:43,850
Nice.

488
00:23:43,850 --> 00:23:48,317


489
00:23:48,317 --> 00:23:51,150
So everything other than those
primitive types are actually objects.

490
00:23:51,150 --> 00:23:53,727
So primitives are immutable,
which means if you

491
00:23:53,727 --> 00:23:56,560
want to change them, you're actually
replacing them with a new value

492
00:23:56,560 --> 00:24:00,610
rather than actually changing them
themselves, whereas objects are not.

493
00:24:00,610 --> 00:24:02,530
They're actually mutable.

494
00:24:02,530 --> 00:24:07,300
So who knows what storing
by reference means?

495
00:24:07,300 --> 00:24:09,580
So storing by reference
means we actually

496
00:24:09,580 --> 00:24:12,940
store a reference to this object
thing, and we can actually

497
00:24:12,940 --> 00:24:15,730
change what is held there
without actually changing

498
00:24:15,730 --> 00:24:18,280
where that thing is located in memory.

499
00:24:18,280 --> 00:24:22,340
We'll talk a little bit
more about that in a second.

500
00:24:22,340 --> 00:24:25,570
But the opposite of that
would be storing something

501
00:24:25,570 --> 00:24:28,330
by a value, which is what
happens when you have primitives.

502
00:24:28,330 --> 00:24:30,590
So, like I said earlier,
primitives are immutable,

503
00:24:30,590 --> 00:24:33,790
which means once you create a
primitive, it can't actually be changed.

504
00:24:33,790 --> 00:24:37,420
And when you want to change something,
you actually create a new primitive

505
00:24:37,420 --> 00:24:40,930
and replace the old one, whereas
mutable things are actually

506
00:24:40,930 --> 00:24:44,802
stored by reference, and you
can actually change that object.

507
00:24:44,802 --> 00:24:46,510
And so let's play with
that a little bit.

508
00:24:46,510 --> 00:24:57,680


509
00:24:57,680 --> 00:24:59,930
So there are a few different
ways to create an object.

510
00:24:59,930 --> 00:25:01,990
One would be this way.

511
00:25:01,990 --> 00:25:06,010


512
00:25:06,010 --> 00:25:07,780
So just saying, give me a new object.

513
00:25:07,780 --> 00:25:10,400


514
00:25:10,400 --> 00:25:14,952
And so now o is this a new object thing.

515
00:25:14,952 --> 00:25:16,910
And say we want to start
populating the object.

516
00:25:16,910 --> 00:25:23,940
We can do o.firstname
and assign that a value.

517
00:25:23,940 --> 00:25:26,640


518
00:25:26,640 --> 00:25:31,064
o.lastname, assign
that a different value.

519
00:25:31,064 --> 00:25:33,730
Notice that I have strings with
double quotes and single quotes.

520
00:25:33,730 --> 00:25:36,256
It doesn't matter.

521
00:25:36,256 --> 00:25:37,630
So something other than a string.

522
00:25:37,630 --> 00:25:42,520
We can do a Boolean, so isTeaching.

523
00:25:42,520 --> 00:25:45,570
We can assign that to true.

524
00:25:45,570 --> 00:25:49,825
o.greet, and we can
give that a function.

525
00:25:49,825 --> 00:25:52,090
[TYPING]

526
00:25:52,090 --> 00:26:02,904


527
00:26:02,904 --> 00:26:05,070
So that would be one way
of creating a new object is

528
00:26:05,070 --> 00:26:07,752
to use this new keyword
along with capital objects.

529
00:26:07,752 --> 00:26:09,460
And that says, hey,
give me a new object.

530
00:26:09,460 --> 00:26:13,449
And I'm just going to fill it up with
these values using this dot notation.

531
00:26:13,449 --> 00:26:16,115
Another way to do that would be
what's called an object literal.

532
00:26:16,115 --> 00:26:18,660


533
00:26:18,660 --> 00:26:22,290
So I can just do open
curly, close curly, and that

534
00:26:22,290 --> 00:26:24,840
gives me basically a new object.

535
00:26:24,840 --> 00:26:30,300
This is actually the preferred way
over that old new key word with object,

536
00:26:30,300 --> 00:26:33,510
mostly because a, it's easier
to read, and well mostly just

537
00:26:33,510 --> 00:26:35,950
because it's easier to read.

538
00:26:35,950 --> 00:26:39,025
And so I can start filling those
values in with o.firstname.

539
00:26:39,025 --> 00:26:43,210


540
00:26:43,210 --> 00:26:48,800
And another way to index into
these objects is to do o.lastname.

541
00:26:48,800 --> 00:26:51,320


542
00:26:51,320 --> 00:26:54,720
So notice I use brackets there,
which means inside this bracket,

543
00:26:54,720 --> 00:26:56,750
I'm going to have some
value, and that value

544
00:26:56,750 --> 00:26:58,680
is going to be that key of that object.

545
00:26:58,680 --> 00:27:00,530
So I can do the same thing here.

546
00:27:00,530 --> 00:27:04,730


547
00:27:04,730 --> 00:27:11,360
And say I actually wanted to use not a
string literal inside these brackets.

548
00:27:11,360 --> 00:27:12,720
I could also do that.

549
00:27:12,720 --> 00:27:24,500
So I could do isTeaching and do
o and then pass in this variable

550
00:27:24,500 --> 00:27:32,190
here with a value of isTeaching,
and that will set that key.

551
00:27:32,190 --> 00:27:35,260


552
00:27:35,260 --> 00:27:41,270
And then say I wanted to do o of
greet and give that same function.

553
00:27:41,270 --> 00:27:51,070


554
00:27:51,070 --> 00:27:55,640
Call and so those objects
are basically the same.

555
00:27:55,640 --> 00:27:57,900
And last, we can actually
put everything in line.

556
00:27:57,900 --> 00:28:00,840
So we can do this.

557
00:28:00,840 --> 00:28:02,816
[TYPING]

558
00:28:02,816 --> 00:28:35,470


559
00:28:35,470 --> 00:28:39,330
Cool, and so those three objects
are basically the same thing.

560
00:28:39,330 --> 00:28:43,260
It's just three different
ways of declaring objects.

561
00:28:43,260 --> 00:28:44,480
You can also nest objects.

562
00:28:44,480 --> 00:28:46,910
So say I wanted an
object within an object.

563
00:28:46,910 --> 00:28:49,965
That's also fine.

564
00:28:49,965 --> 00:28:51,590
Say I wanted to do something like this.

565
00:28:51,590 --> 00:28:53,542
[TYPING]

566
00:28:53,542 --> 00:29:02,830


567
00:29:02,830 --> 00:29:03,554
That's also fine.

568
00:29:03,554 --> 00:29:05,095
So that's an object within an object.

569
00:29:05,095 --> 00:29:08,100


570
00:29:08,100 --> 00:29:09,130
Any questions with that?

571
00:29:09,130 --> 00:29:12,995


572
00:29:12,995 --> 00:29:13,495
Cool.

573
00:29:13,495 --> 00:29:16,900


574
00:29:16,900 --> 00:29:20,394
That's actually--

575
00:29:20,394 --> 00:29:21,560
AUDIENCE: I have a question.

576
00:29:21,560 --> 00:29:22,358
JORDAN: Yeah.

577
00:29:22,358 --> 00:29:28,832
AUDIENCE: Do the elements of the objects
all have to be labeled with strings?

578
00:29:28,832 --> 00:29:32,816
Like if a key were numbered,
say, would that work?

579
00:29:32,816 --> 00:29:38,950
JORDAN: Um, So anything, so anything
here, is interpreted as a string.

580
00:29:38,950 --> 00:29:44,460
So say, we were to do, like this,

581
00:29:44,460 --> 00:29:47,050
That would be, basically,
one as a string.

582
00:29:47,050 --> 00:29:49,550
So that, this value here
will be cast as a string.

583
00:29:49,550 --> 00:29:52,060
And that's what will be used as the key.

584
00:29:52,060 --> 00:29:54,310
So the question was, can
we use numbers, or anything

585
00:29:54,310 --> 00:29:56,560
other than strings as keys in objects?

586
00:29:56,560 --> 00:29:59,380
And the answer is, kind of,
because everything will just

587
00:29:59,380 --> 00:30:01,190
be cast to a string.

588
00:30:01,190 --> 00:30:02,920
Yeah, great question.

589
00:30:02,920 --> 00:30:06,902
Let's actually copy and
paste this into our browser.

590
00:30:06,902 --> 00:30:08,110
And we confirm that it works.

591
00:30:08,110 --> 00:30:14,240


592
00:30:14,240 --> 00:30:18,230
And so, how might we go about
getting those values back out?

593
00:30:18,230 --> 00:30:20,360
So, it's basically the
same way we got them in.

594
00:30:20,360 --> 00:30:24,700
So if we do dot, we can see, oh, these
are all, this is the browser saying,

595
00:30:24,700 --> 00:30:26,750
oh, these are all the
keys of the object.

596
00:30:26,750 --> 00:30:31,562
So I can do o3.address, and it
will give me back the object.

597
00:30:31,562 --> 00:30:33,520
And say we want to get
this number out of here.

598
00:30:33,520 --> 00:30:34,395
How might we do that?

599
00:30:34,395 --> 00:30:37,198
[TYPING]

600
00:30:37,198 --> 00:30:38,610
AUDIENCE: Dot and the number.

601
00:30:38,610 --> 00:30:41,400
JORDAN: Exactly, dot number.

602
00:30:41,400 --> 00:30:43,320
Alternatively, we could
have also done this.

603
00:30:43,320 --> 00:30:45,660
[TYPING]

604
00:30:45,660 --> 00:30:48,390
And gotten the same thing.

605
00:30:48,390 --> 00:30:49,590
Any questions with objects?

606
00:30:49,590 --> 00:30:52,031


607
00:30:52,031 --> 00:30:52,530
Yeah.

608
00:30:52,530 --> 00:30:55,855
AUDIENCE: Is there a
conventional way to do that?

609
00:30:55,855 --> 00:30:58,459
Or is it kind of like reference?

610
00:30:58,459 --> 00:30:59,250
JORDAN: To do what?

611
00:30:59,250 --> 00:31:03,498
AUDIENCE: Just between dot
number and [INAUDIBLE]..

612
00:31:03,498 --> 00:31:05,750


613
00:31:05,750 --> 00:31:08,250
JORDAN: Yes, so the question
is, is there a conventional way

614
00:31:08,250 --> 00:31:11,730
to get values out of objects?

615
00:31:11,730 --> 00:31:14,250
Generally the convention is
to use that dot notation.

616
00:31:14,250 --> 00:31:19,650
So say we wanted
o3.address.number, the convention

617
00:31:19,650 --> 00:31:22,430
would be to use the dot
both of these times.

618
00:31:22,430 --> 00:31:26,250
But say we didn't know exactly
what we wanted out of it.

619
00:31:26,250 --> 00:31:29,500
We could, so say we had this--

620
00:31:29,500 --> 00:31:33,000
[TYPING]

621
00:31:33,000 --> 00:31:35,994


622
00:31:35,994 --> 00:31:38,160
Something like that, where
we have some dynamic key.

623
00:31:38,160 --> 00:31:40,050
Where the key we didn't
actually know, that's

624
00:31:40,050 --> 00:31:43,560
when you actually have to
use the bracket notation.

625
00:31:43,560 --> 00:31:51,690
Where we have o3.address, and
then we pass into it that key.

626
00:31:51,690 --> 00:31:53,620
Since key is a dynamic,
since it's a variable,

627
00:31:53,620 --> 00:31:56,703
we don't know what it is, we have to
then use that bracket notation rather

628
00:31:56,703 --> 00:31:57,980
than the dot.

629
00:31:57,980 --> 00:31:58,940
Great question.

630
00:31:58,940 --> 00:31:59,621
Yeah.

631
00:31:59,621 --> 00:32:03,389
AUDIENCE: Um-- You cannot
do 0.1 for example.

632
00:32:03,389 --> 00:32:06,690
[INAUDIBLE]

633
00:32:06,690 --> 00:32:11,910
JORDAN: So, if we did o.1, yeah,
so, o.1, 1 here, since we're

634
00:32:11,910 --> 00:32:14,070
typing it here, is a number.

635
00:32:14,070 --> 00:32:16,740
And we cannot set keys to numbers.

636
00:32:16,740 --> 00:32:18,900
But if it were an object
literal like this,

637
00:32:18,900 --> 00:32:21,060
[TYPING]

638
00:32:21,060 --> 00:32:25,770
JORDAN: It considers this not to
be a number, but rather a string.

639
00:32:25,770 --> 00:32:30,720
AUDIENCE: You can the array assignment
by putting brackets around the one

640
00:32:30,720 --> 00:32:33,195
and passing it as a
string, so you can do 0 dot

641
00:32:33,195 --> 00:32:34,680
[TYPING]

642
00:32:34,680 --> 00:32:40,372
AUDIENCE: Our brackets
around [INAUDIBLE] o

643
00:32:40,372 --> 00:32:47,055
dot open bracket, open
braces, and then, quotes, one.

644
00:32:47,055 --> 00:32:51,060
And then set that to a value.

645
00:32:51,060 --> 00:32:52,910
JORDAN: So, I think you mean this?

646
00:32:52,910 --> 00:32:57,910
[TYPING]

647
00:32:57,910 --> 00:32:58,410
Yep.

648
00:32:58,410 --> 00:33:01,362


649
00:33:01,362 --> 00:33:02,820
And I believe you can also do this.

650
00:33:02,820 --> 00:33:04,440
[TYPING]

651
00:33:04,440 --> 00:33:06,590
Because that will get cast to a number.

652
00:33:06,590 --> 00:33:09,380
I mean a string.

653
00:33:09,380 --> 00:33:12,795
Any other questions?

654
00:33:12,795 --> 00:33:13,751
Cool-- yeah?

655
00:33:13,751 --> 00:33:19,508
AUDIENCE: If you have want the number
one inside the bracket notation,

656
00:33:19,508 --> 00:33:22,791
versus the string one
inside the bracket notation,

657
00:33:22,791 --> 00:33:24,670
it will be treated as the same keys?

658
00:33:24,670 --> 00:33:28,460
JORDAN: Yeah, so the question is, what
is the difference between this here,

659
00:33:28,460 --> 00:33:30,160
and this here?

660
00:33:30,160 --> 00:33:34,280
The difference is, anything
between the brackets

661
00:33:34,280 --> 00:33:36,270
will get coerced into a string.

662
00:33:36,270 --> 00:33:40,026
And so, since this is already a
string, it's just that string one.

663
00:33:40,026 --> 00:33:41,900
Since this is not of
type string, it actually

664
00:33:41,900 --> 00:33:44,940
gets implicitly coerced into a string.

665
00:33:44,940 --> 00:33:49,100
And so, like we saw earlier, if
we did one plus some empty string,

666
00:33:49,100 --> 00:33:50,690
we get back the string one.

667
00:33:50,690 --> 00:33:53,750
So this becomes a string one,
and it will index into that.

668
00:33:53,750 --> 00:33:57,177
Whereas, this number
here, so if we did o3.1,

669
00:33:57,177 --> 00:34:00,840
[TYPING]

670
00:34:00,840 --> 00:34:07,140
That one does not actually get coerced,
like it does between the brackets here.

671
00:34:07,140 --> 00:34:11,130
So JavaScript is basically saying,
hey, this doesn't really make sense.

672
00:34:11,130 --> 00:34:14,830
I need a string here, not a number.

673
00:34:14,830 --> 00:34:16,362
Cool, any other questions?

674
00:34:16,362 --> 00:34:23,742


675
00:34:23,742 --> 00:34:28,639
Great-- So, let's talk a little
bit about this thing, where

676
00:34:28,639 --> 00:34:33,766
I was talking about mutating objects.

677
00:34:33,766 --> 00:34:34,265
So say--

678
00:34:34,265 --> 00:34:37,490
[TYPING]

679
00:34:37,490 --> 00:34:43,380


680
00:34:43,380 --> 00:34:45,604
So, say I had this object, so--

681
00:34:45,604 --> 00:34:49,540


682
00:34:49,540 --> 00:34:54,820
In it we had, a gets a, b gets b.

683
00:34:54,820 --> 00:34:57,420


684
00:34:57,420 --> 00:35:01,000
So say I wanted to change
a to be something else?

685
00:35:01,000 --> 00:35:02,020
How might I do that?

686
00:35:02,020 --> 00:35:05,950


687
00:35:05,950 --> 00:35:06,460
Yes.

688
00:35:06,460 --> 00:35:07,460
AUDIENCE: dot a equals--

689
00:35:07,460 --> 00:35:09,920
JORDAN: Yes, so I can update
this to be anything else.

690
00:35:09,920 --> 00:35:13,160
[TYPING]

691
00:35:13,160 --> 00:35:15,035
Cool, but say I actually did this.

692
00:35:15,035 --> 00:35:17,750
[TYPING]

693
00:35:17,750 --> 00:35:28,590


694
00:35:28,590 --> 00:35:31,430
Anybody care to guess what
would be console logged here?

695
00:35:31,430 --> 00:35:33,990


696
00:35:33,990 --> 00:35:36,710
So basically, what he's doing
is, we're creating a new object.

697
00:35:36,710 --> 00:35:37,670
And storing it in o.

698
00:35:37,670 --> 00:35:42,080
This object has two keys, a and b, where
their values are a and b respectively.

699
00:35:42,080 --> 00:35:47,570
I'm creating this new object
called o2, and assign a value of o.

700
00:35:47,570 --> 00:35:50,030
I then go reset o.

701
00:35:50,030 --> 00:35:52,700
Not o2 but o.a to be a new value.

702
00:35:52,700 --> 00:35:55,580
And I'm going to console log o2.a.

703
00:35:55,580 --> 00:35:58,170
Anybody care to guess what
this is going to console log?

704
00:35:58,170 --> 00:35:58,670
Yeah.

705
00:35:58,670 --> 00:36:00,170
AUDIENCE: a?

706
00:36:00,170 --> 00:36:01,880
JORDAN: So, a guess is a.

707
00:36:01,880 --> 00:36:04,817
What would be the alternative guess?

708
00:36:04,817 --> 00:36:05,650
AUDIENCE: New value.

709
00:36:05,650 --> 00:36:07,763
JORDAN: New value--

710
00:36:07,763 --> 00:36:09,630
[INAUDIBLE]

711
00:36:09,630 --> 00:36:11,900
JORDAN: Yeah, so let's run that.

712
00:36:11,900 --> 00:36:12,830
So you get new value.

713
00:36:12,830 --> 00:36:15,371
And so I talked about this thing
called passing by reference,

714
00:36:15,371 --> 00:36:18,030
and passing by value.

715
00:36:18,030 --> 00:36:24,110
So, basically what's happening
here, is that o is being said,

716
00:36:24,110 --> 00:36:28,250
hey, give me a new object, somewhere.

717
00:36:28,250 --> 00:36:30,890
And then store inside of it, a and b.

718
00:36:30,890 --> 00:36:35,000
And then o2 says hey, give me
another object and set it to o.

719
00:36:35,000 --> 00:36:38,330
And rather then creating a new
object, with the same keys and values,

720
00:36:38,330 --> 00:36:40,609
it's actually pointing
to that same object.

721
00:36:40,609 --> 00:36:42,650
So this is a case where
things are getting stored

722
00:36:42,650 --> 00:36:44,800
by reference, rather than by value.

723
00:36:44,800 --> 00:36:48,020
Meaning, so in CS50, we talked
a little bit about pointers,

724
00:36:48,020 --> 00:36:50,390
and this is the exact same concept.

725
00:36:50,390 --> 00:36:55,350
Where these objects are not stored
as entire serialized objects,

726
00:36:55,350 --> 00:36:58,880
but rather as references
to these objects in memory.

727
00:36:58,880 --> 00:37:02,580
So o and o2 are both referencing
that same exact object.

728
00:37:02,580 --> 00:37:07,290
So when we go back and say,
hey update o.a to be new value,

729
00:37:07,290 --> 00:37:09,350
it's changing this
object here, and still

730
00:37:09,350 --> 00:37:12,780
o and o2 are both pointing
to that same object.

731
00:37:12,780 --> 00:37:19,520
So if I were to have updated 02
here, and console logged o.a,

732
00:37:19,520 --> 00:37:23,780
we would get that same result. Because o
and o2 are still both referring to that

733
00:37:23,780 --> 00:37:27,750
same object in memory, and we're
still updating that object here.

734
00:37:27,750 --> 00:37:30,400
Does that make sense?

735
00:37:30,400 --> 00:37:31,010
Yeah.

736
00:37:31,010 --> 00:37:33,218
AUDIENCE: So what if you
wanted them to be different.

737
00:37:33,218 --> 00:37:35,880
Like, what if you wanted them
to not point to the same thing?

738
00:37:35,880 --> 00:37:37,830
JORDAN: Yeah, so the
question is, what if we

739
00:37:37,830 --> 00:37:41,010
wanted them to have the same
value but be different references?

740
00:37:41,010 --> 00:37:42,270
How might we do that?

741
00:37:42,270 --> 00:37:44,410
There are two different ways.

742
00:37:44,410 --> 00:37:48,990
One, the more annoying way, would just
be to type the whole thing out again.

743
00:37:48,990 --> 00:37:51,906
[TYPING]

744
00:37:51,906 --> 00:37:54,002


745
00:37:54,002 --> 00:37:55,710
So now we're guaranteed
that o and o2 are

746
00:37:55,710 --> 00:38:02,130
going to be different references to
an object that is basically the same.

747
00:38:02,130 --> 00:38:03,730
And another way would be --

748
00:38:03,730 --> 00:38:05,980
there are multiple
different ways to do this.

749
00:38:05,980 --> 00:38:09,570
The most common way in pure
JavaScript, would be to do this--

750
00:38:09,570 --> 00:38:13,056
[TYPING]

751
00:38:13,056 --> 00:38:17,540


752
00:38:17,540 --> 00:38:21,855
Whereby, object assigned is
basically saying, hey, pass in to me

753
00:38:21,855 --> 00:38:22,730
a bunch of arguments.

754
00:38:22,730 --> 00:38:26,060
And every single argument, I'm going
to merge into the previous one,

755
00:38:26,060 --> 00:38:27,760
those lose keys and values.

756
00:38:27,760 --> 00:38:30,900
And so this is saying,
give me a brand new object.

757
00:38:30,900 --> 00:38:33,950
So I'm using the object literal
here to mean a new object.

758
00:38:33,950 --> 00:38:38,350
And then merge into it, of the keys
and values of this object called o.

759
00:38:38,350 --> 00:38:41,430
And so this is basically
saying, give me new object,

760
00:38:41,430 --> 00:38:45,350
and then set all of the keys
and values of o to be in there.

761
00:38:45,350 --> 00:38:48,950
So this is the way of cloning an object.

762
00:38:48,950 --> 00:38:50,260
But say we actually did this

763
00:38:50,260 --> 00:38:53,746
[TYPING]

764
00:38:53,746 --> 00:39:29,170


765
00:39:29,170 --> 00:39:31,070
So, what do we expect
this to now print out?

766
00:39:31,070 --> 00:39:34,310


767
00:39:34,310 --> 00:39:41,690
So, we mentioned that line nine,
we're taking the keys and values of o,

768
00:39:41,690 --> 00:39:45,890
and merging those into a new object.

769
00:39:45,890 --> 00:39:49,820
And then that line 11 we're
taking o2, getting the dot object,

770
00:39:49,820 --> 00:39:52,760
so accessing the value
with the key called object.

771
00:39:52,760 --> 00:39:57,230
And then setting that object's
key called key to new value.

772
00:39:57,230 --> 00:40:01,330
And then now console
logging o to object dot key.

773
00:40:01,330 --> 00:40:02,770
Yeah.

774
00:40:02,770 --> 00:40:05,580
AUDIENCE: So, new value?

775
00:40:05,580 --> 00:40:07,580
JORDAN: Yes, so this, so
the guess is new value,

776
00:40:07,580 --> 00:40:10,370
and that is absolutely correct.

777
00:40:10,370 --> 00:40:14,990
So this, so-- line nine here is
doing what's called a shallow copy.

778
00:40:14,990 --> 00:40:18,080
Which is just grabbing the
keys and values of some object,

779
00:40:18,080 --> 00:40:21,410
and just setting those blindly
into some other object.

780
00:40:21,410 --> 00:40:24,650
As opposed to what would
be called a deep copy.

781
00:40:24,650 --> 00:40:27,472
Where that would take
the keys and values.

782
00:40:27,472 --> 00:40:29,180
And then if the values
are objects, you'd

783
00:40:29,180 --> 00:40:30,846
also take those objects keys and values.

784
00:40:30,846 --> 00:40:36,080
Do that recursively, and basically
get every single layer deep cloned.

785
00:40:36,080 --> 00:40:40,310
But since object assigned just
takes the keys and values dumbly,

786
00:40:40,310 --> 00:40:45,650
if we have an object in there,
update that object's key.

787
00:40:45,650 --> 00:40:50,030
o.obj and o2.obj are still referencing
that same object in memory,

788
00:40:50,030 --> 00:40:51,260
so since we updated--

789
00:40:51,260 --> 00:40:56,390
we mutated that object, it
would update in both o2 and o.

790
00:40:56,390 --> 00:40:59,775
Does that makes sense?

791
00:40:59,775 --> 00:41:03,270
Great, any questions about this?

792
00:41:03,270 --> 00:41:03,770
Yeah.

793
00:41:03,770 --> 00:41:05,510
AUDIENCE: How would you do a deep copy?

794
00:41:05,510 --> 00:41:07,670
JORDAN: So, how would you do deep copy?

795
00:41:07,670 --> 00:41:08,670
That's a great question.

796
00:41:08,670 --> 00:41:11,580
There are multiple different ways.

797
00:41:11,580 --> 00:41:14,900
So most people would say use a library.

798
00:41:14,900 --> 00:41:17,750
Meaning, rather than implementing
this thing on your own,

799
00:41:17,750 --> 00:41:21,380
just take somebody
else's implementation.

800
00:41:21,380 --> 00:41:22,940
But lets, let's actually do that.

801
00:41:22,940 --> 00:41:24,000
That's a good question.

802
00:41:24,000 --> 00:41:26,116
So, how would we do a deep copy?

803
00:41:26,116 --> 00:41:29,448
[TYPING]

804
00:41:29,448 --> 00:41:30,880


805
00:41:30,880 --> 00:41:33,880
So, I know we haven't talked
a ton about JavaScript yet,

806
00:41:33,880 --> 00:41:36,230
but lets actually tried
to do this together.

807
00:41:36,230 --> 00:41:40,447
So, let's call a function, deep copy.

808
00:41:40,447 --> 00:41:42,280
And we're going to pass
into it some object.

809
00:41:42,280 --> 00:41:46,170


810
00:41:46,170 --> 00:41:49,270
And how would we implement
this, if we're guaranteed

811
00:41:49,270 --> 00:41:53,770
that no objects have values of objects?

812
00:41:53,770 --> 00:41:58,205
Meaning we are guaranteed not
to have objects within objects.

813
00:41:58,205 --> 00:41:59,080
How might we do this?

814
00:41:59,080 --> 00:42:01,500
AUDIENCE: Check for the type of the key.

815
00:42:01,500 --> 00:42:03,791
JORDAN: Yes, so we can check
for the type of every key.

816
00:42:03,791 --> 00:42:06,730
But if we're guaranteed that no
values are going to be objects,

817
00:42:06,730 --> 00:42:10,540
we can just do a shallow copy right?

818
00:42:10,540 --> 00:42:12,171
Yeah.

819
00:42:12,171 --> 00:42:13,662
AUDIENCE: So check every value?

820
00:42:13,662 --> 00:42:19,140
And if it's, the value is [INAUDIBLE]
we have to recursively deep copy that.

821
00:42:19,140 --> 00:42:19,720
JORDAN: Yeah.

822
00:42:19,720 --> 00:42:20,594
So hold that thought.

823
00:42:20,594 --> 00:42:24,190
Let's actually implement
this as if we know that there

824
00:42:24,190 --> 00:42:26,330
are no objects inside of objects.

825
00:42:26,330 --> 00:42:29,550
So if that were true, we could
just return the shallow copy right?

826
00:42:29,550 --> 00:42:32,065
So object.assign

827
00:42:32,065 --> 00:42:35,188
[TYPING]

828
00:42:35,188 --> 00:42:37,527


829
00:42:37,527 --> 00:42:39,610
So this would be a perfectly
valid implementation,

830
00:42:39,610 --> 00:42:43,690
if we knew that there's no such
thing as objects within objects.

831
00:42:43,690 --> 00:42:48,350
But since there are, we're going
to have to do some magic here.

832
00:42:48,350 --> 00:42:52,466
So, can you repeat your
recommendation again?

833
00:42:52,466 --> 00:42:56,458
AUDIENCE: So, check if the--

834
00:42:56,458 --> 00:43:00,450
any of the values is an object.

835
00:43:00,450 --> 00:43:05,939
Then you can't just take
that value into a new object,

836
00:43:05,939 --> 00:43:13,923
just to reference the same object,
we need to deep copy that object,

837
00:43:13,923 --> 00:43:17,915
instead of just taking [INAUDIBLE].

838
00:43:17,915 --> 00:43:32,960


839
00:43:32,960 --> 00:43:36,497
JORDAN: So basically, so
check every single value,

840
00:43:36,497 --> 00:43:37,580
and see if it's an object.

841
00:43:37,580 --> 00:43:40,880
If it is an object, then go
ahead and deep copy that object.

842
00:43:40,880 --> 00:43:44,086
Otherwise, return that value.

843
00:43:44,086 --> 00:43:45,402
Cool.

844
00:43:45,402 --> 00:43:46,110
So let's do that.

845
00:43:46,110 --> 00:43:52,760
So-- the way to get the keys of
an object, is this function called

846
00:43:52,760 --> 00:43:53,870
object.keys

847
00:43:53,870 --> 00:43:57,188
[TYPING]

848
00:43:57,188 --> 00:44:01,460


849
00:44:01,460 --> 00:44:04,850
So, so by doing object.keys
and passing in the object,

850
00:44:04,850 --> 00:44:10,530
we now have an array full of the string
values of the keys in that object.

851
00:44:10,530 --> 00:44:13,920
And so what we're going to do is, we're
going to iterate through those keys.

852
00:44:13,920 --> 00:44:17,210
Check to see if the
value is of an object.

853
00:44:17,210 --> 00:44:19,220
If so, we'll go ahead and clone that.

854
00:44:19,220 --> 00:44:23,180
Let's not worry about functions, or
any of those other things for now.

855
00:44:23,180 --> 00:44:26,790
Otherwise, just return that value.

856
00:44:26,790 --> 00:44:28,040
So, let's have this for loop--

857
00:44:28,040 --> 00:44:31,519
[TYPING]

858
00:44:31,519 --> 00:44:40,470


859
00:44:40,470 --> 00:44:40,990
And do that.

860
00:44:40,990 --> 00:44:42,480
So first, let's define--

861
00:44:42,480 --> 00:44:45,726
[TYPING]

862
00:44:45,726 --> 00:44:49,449


863
00:44:49,449 --> 00:44:51,240
The new objects that
we're going to return.

864
00:44:51,240 --> 00:44:55,420
And let's just start with
an empty object for now.

865
00:44:55,420 --> 00:44:59,490
And so, now we have to check to see
if each of these values is an object.

866
00:44:59,490 --> 00:45:01,600
If so, copy it, otherwise return.

867
00:45:01,600 --> 00:45:06,945
So how are we going to check
the type of a particular key?

868
00:45:06,945 --> 00:45:08,070
AUDIENCE: Type of operator.

869
00:45:08,070 --> 00:45:09,945
JORDAN: Yeah, exactly,
that type of operator.

870
00:45:09,945 --> 00:45:16,822
So we can do if the type of
obj, and then pass in by keys.

871
00:45:16,822 --> 00:45:19,714
[TYPING]

872
00:45:19,714 --> 00:45:24,331


873
00:45:24,331 --> 00:45:25,830
So what do we want to check against?

874
00:45:25,830 --> 00:45:29,029
[TYPING]

875
00:45:29,029 --> 00:45:30,400


876
00:45:30,400 --> 00:45:32,522
All right, what am I doing wrong here?

877
00:45:32,522 --> 00:45:34,130
AUDIENCE: Three equals.

878
00:45:34,130 --> 00:45:35,660
JORDAN: Yeah, we should always
use that three equal signs.

879
00:45:35,660 --> 00:45:36,868
In this case it would matter.

880
00:45:36,868 --> 00:45:39,380
But, we should just get in
the habit of doing that.

881
00:45:39,380 --> 00:45:42,470
I mean so if you notice here, we
actually have bracket notation

882
00:45:42,470 --> 00:45:43,550
within bracket notation.

883
00:45:43,550 --> 00:45:45,911
That is totally fine.

884
00:45:45,911 --> 00:45:46,410
Cool.

885
00:45:46,410 --> 00:45:49,910
So, if something is an object
to what are we going to turn?

886
00:45:49,910 --> 00:45:56,500
We can do object, new
object with that key.

887
00:45:56,500 --> 00:45:59,958
[TYPING]

888
00:45:59,958 --> 00:46:06,390


889
00:46:06,390 --> 00:46:07,870
Equals-- what?

890
00:46:07,870 --> 00:46:14,110


891
00:46:14,110 --> 00:46:15,550
AUDIENCE: The value?

892
00:46:15,550 --> 00:46:17,000
Oh no, I'm sorry, deep copy.

893
00:46:17,000 --> 00:46:19,374
JORDAN: Yeah, let's actually
deep copy that value to two.

894
00:46:19,374 --> 00:46:22,580
[TYPING]

895
00:46:22,580 --> 00:46:27,421


896
00:46:27,421 --> 00:46:27,920
Otherwise--

897
00:46:27,920 --> 00:46:31,110
[TYPING]

898
00:46:31,110 --> 00:46:33,010


899
00:46:33,010 --> 00:46:35,482
We can just set it
equal to the other key.

900
00:46:35,482 --> 00:46:38,779
[TYPING]

901
00:46:38,779 --> 00:46:41,610


902
00:46:41,610 --> 00:46:45,050
And then at the very end, we
can just return that new object.

903
00:46:45,050 --> 00:46:48,333
[TYPING]

904
00:46:48,333 --> 00:46:52,560


905
00:46:52,560 --> 00:46:54,220
Cool.

906
00:46:54,220 --> 00:46:56,510
Anybody see any bugs?

907
00:46:56,510 --> 00:46:59,026
Candy opportunity.

908
00:46:59,026 --> 00:47:02,740
All right, let's just
go ahead and test this.

909
00:47:02,740 --> 00:47:07,000
So-- let's do--

910
00:47:07,000 --> 00:47:13,776


911
00:47:13,776 --> 00:47:14,710
Do copy o--

912
00:47:14,710 --> 00:47:18,646


913
00:47:18,646 --> 00:47:21,106
Then update o--

914
00:47:21,106 --> 00:47:24,550
[TYPING]

915
00:47:24,550 --> 00:47:26,030


916
00:47:26,030 --> 00:47:30,390
o.obj.key Let's say of to new key.

917
00:47:30,390 --> 00:47:33,820
[TYPING]

918
00:47:33,820 --> 00:47:36,760


919
00:47:36,760 --> 00:47:37,740
o3.obj.key.

920
00:47:37,740 --> 00:47:43,820


921
00:47:43,820 --> 00:47:44,570
Get rid of that.

922
00:47:44,570 --> 00:47:48,380


923
00:47:48,380 --> 00:47:50,543
All right, so moment of truth--

924
00:47:50,543 --> 00:47:53,790
[TYPING]

925
00:47:53,790 --> 00:47:54,850
Key, rather than new key.

926
00:47:54,850 --> 00:47:57,525
So we did it.

927
00:47:57,525 --> 00:47:59,400
Whew.

928
00:47:59,400 --> 00:48:01,260
All right, any other questions about--

929
00:48:01,260 --> 00:48:03,900


930
00:48:03,900 --> 00:48:06,870
objects, mutating,
references, any of that stuff?

931
00:48:06,870 --> 00:48:10,550


932
00:48:10,550 --> 00:48:11,580
No, great.

933
00:48:11,580 --> 00:48:15,880
So, arrays as well, are
also stored by reference.

934
00:48:15,880 --> 00:48:17,890
So if we were to do
the same exact example,

935
00:48:17,890 --> 00:48:21,944
and rather than updating the
object, we updated that array,

936
00:48:21,944 --> 00:48:23,610
we'd end up with the same exact results.

937
00:48:23,610 --> 00:48:29,190
And so, if we were to update our
deep copy function to also take

938
00:48:29,190 --> 00:48:32,951
care of arrays, all we have to
do is also check, rather than

939
00:48:32,951 --> 00:48:35,700
checking object, also check against
arrays or any other data types

940
00:48:35,700 --> 00:48:36,783
that we're going to check.

941
00:48:36,783 --> 00:48:40,500


942
00:48:40,500 --> 00:48:44,070
Let's move on to prototype inheritance.

943
00:48:44,070 --> 00:48:46,030
So what exactly is
prototype inheritance?

944
00:48:46,030 --> 00:48:49,290
Well, so non-primitive types
have a few properties and methods

945
00:48:49,290 --> 00:48:50,970
associated with them.

946
00:48:50,970 --> 00:48:53,550
So, array, we have this
thing called array.push,

947
00:48:53,550 --> 00:48:55,090
which will add values to an array.

948
00:48:55,090 --> 00:48:57,166
So, say we have something like--

949
00:48:57,166 --> 00:48:59,460
[TYPING]

950
00:48:59,460 --> 00:49:02,190
An empty array, if we did array.push--

951
00:49:02,190 --> 00:49:07,821
some value, then array
now has something in it.

952
00:49:07,821 --> 00:49:09,570
If we were to push
another value into it--

953
00:49:09,570 --> 00:49:12,435


954
00:49:12,435 --> 00:49:13,750
It now has two values in it.

955
00:49:13,750 --> 00:49:17,520
So array.prototype.push
is a method that we

956
00:49:17,520 --> 00:49:22,480
have available on all arrays, that
just adds new values to an array.

957
00:49:22,480 --> 00:49:25,655
Another one would be like,
string.prototype.toUpperCase.

958
00:49:25,655 --> 00:49:28,200
So, say we were to
have some string, so--

959
00:49:28,200 --> 00:49:30,791
[TYPING]

960
00:49:30,791 --> 00:49:31,290


961
00:49:31,290 --> 00:49:35,150
If you do str.toUpperCase--

962
00:49:35,150 --> 00:49:38,600
Now we, we're left with a new
string with all uppercase.

963
00:49:38,600 --> 00:49:42,910
So, these are just functions that we
can invoke on any non-primitive that

964
00:49:42,910 --> 00:49:45,550
gives us something else.

965
00:49:45,550 --> 00:49:50,680
That is available to all
non-primitives of a given type.

966
00:49:50,680 --> 00:49:53,170
So each object stores a
reference to its prototype.

967
00:49:53,170 --> 00:49:57,550
Meaning, it has all the-- it
knows about all of these methods.

968
00:49:57,550 --> 00:50:04,060
And it stores a reference to the object
in order to know where these methods--

969
00:50:04,060 --> 00:50:08,470
the code to actually the run that lies.

970
00:50:08,470 --> 00:50:12,250
And say we have a
prototype chain where there

971
00:50:12,250 --> 00:50:14,710
are a bunch of different
methods of the same name.

972
00:50:14,710 --> 00:50:19,010
Whichever one is bound most tightly
to the instance has the priority.

973
00:50:19,010 --> 00:50:28,690
So say we have an object in
an array, where array is the--

974
00:50:28,690 --> 00:50:31,990
So say we have a value that is of
type array, up the prototype chain

975
00:50:31,990 --> 00:50:36,950
we have arrays, its prototype is
array, that prototype is object.

976
00:50:36,950 --> 00:50:39,667
Say we have the same named
method on both of these.

977
00:50:39,667 --> 00:50:42,250
If we call that method, the one
that's bound most tightly the,

978
00:50:42,250 --> 00:50:44,330
array will take priority.

979
00:50:44,330 --> 00:50:45,580
So let's actually show that.

980
00:50:45,580 --> 00:50:48,220
So, say we have something like--

981
00:50:48,220 --> 00:50:52,690


982
00:50:52,690 --> 00:50:56,690
So array, it has a
reference to its prototypes.

983
00:50:56,690 --> 00:51:01,990
So if you did array dot, double
underscore, proto, double underscore,

984
00:51:01,990 --> 00:51:07,990
we see this large object with
a bunch of different functions.

985
00:51:07,990 --> 00:51:15,440
And so we see down here, push, which
is that one that we invoked earlier.

986
00:51:15,440 --> 00:51:19,570
So this is exactly how it knows
where that push implementation is.

987
00:51:19,570 --> 00:51:25,250
And so we can do
arr.__proto__.__proto__,

988
00:51:25,250 --> 00:51:27,400
and go even farther up the chain.

989
00:51:27,400 --> 00:51:32,060
So this one has a bunch of other
ones toString value of, whatever.

990
00:51:32,060 --> 00:51:38,200
And if you notice, both the arrays
prototype, and it's arrays prototypes

991
00:51:38,200 --> 00:51:42,520
prototype, have this
method called toString.

992
00:51:42,520 --> 00:51:47,740
And if I were to invoke
arr.toString which one of these

993
00:51:47,740 --> 00:51:49,210
is going to actually get called?

994
00:51:49,210 --> 00:51:53,575


995
00:51:53,575 --> 00:51:54,862
AUDIENCE: The second one.

996
00:51:54,862 --> 00:51:55,820
JORDAN: The second one?

997
00:51:55,820 --> 00:51:56,780
Which one is the second one?

998
00:51:56,780 --> 00:51:58,071
AUDIENCE: Dot proto, dot proto.

999
00:51:58,071 --> 00:51:58,702
[INAUDIBLE]

1000
00:51:58,702 --> 00:51:59,910
JORDAN: Dot proto, dot proto.

1001
00:51:59,910 --> 00:52:02,080
So, actually the opposite.

1002
00:52:02,080 --> 00:52:08,060
So, since the toString,
on the array prototype,

1003
00:52:08,060 --> 00:52:12,200
is more specific than the toSting
method on the object prototype,

1004
00:52:12,200 --> 00:52:15,410
this one is going to get invoked.

1005
00:52:15,410 --> 00:52:17,900
Because its, just because
its more specific.

1006
00:52:17,900 --> 00:52:21,566
Because an array is an
array and its an object.

1007
00:52:21,566 --> 00:52:24,440
But its more specific to call it an
array, than to call it an object.

1008
00:52:24,440 --> 00:52:27,194
So its going to invoke
the one on the array.

1009
00:52:27,194 --> 00:52:28,110
Does that makes sense?

1010
00:52:28,110 --> 00:52:30,392


1011
00:52:30,392 --> 00:52:31,850
Anybody have a question about that?

1012
00:52:31,850 --> 00:52:35,310
It's an important concept, and
a little bit confusing at first.

1013
00:52:35,310 --> 00:52:40,400


1014
00:52:40,400 --> 00:52:40,900
Cool.

1015
00:52:40,900 --> 00:52:43,810
Most primitive types
had object wrappers.

1016
00:52:43,810 --> 00:52:47,050
And so we talked about
how primitive types don't

1017
00:52:47,050 --> 00:52:51,510
have any methods associated with them.

1018
00:52:51,510 --> 00:52:53,950
But primitive types
also have wrappers that

1019
00:52:53,950 --> 00:52:57,730
have prototypes associated with them.

1020
00:52:57,730 --> 00:52:59,000
What the heck does that mean?

1021
00:52:59,000 --> 00:53:02,189
So if I were to do
42.toString, It's going

1022
00:53:02,189 --> 00:53:03,730
to be like what the heck do you mean?

1023
00:53:03,730 --> 00:53:04,271
42.toString--

1024
00:53:04,271 --> 00:53:06,580
[TYPING]

1025
00:53:06,580 --> 00:53:12,430
Right I told you that these
primitive values don't have methods.

1026
00:53:12,430 --> 00:53:15,680
And so 42.toString
doesn't really make sense.

1027
00:53:15,680 --> 00:53:21,010
But say I were to do this thing
const num = 42 and did num.toString,

1028
00:53:21,010 --> 00:53:22,060
[TYPING]

1029
00:53:22,060 --> 00:53:23,467
That will actually do something.

1030
00:53:23,467 --> 00:53:24,800
And that's a little bit strange.

1031
00:53:24,800 --> 00:53:29,470
This is another one of those
JavaScript interesting behaviors.

1032
00:53:29,470 --> 00:53:32,920
Because all of the primitive
values have wrappers

1033
00:53:32,920 --> 00:53:36,610
that give them access
to a bunch of methods.

1034
00:53:36,610 --> 00:53:40,590
And JavaScript will automatically
do what's called boxing for you.

1035
00:53:40,590 --> 00:53:43,812
Which it says, hey, like
I know 42 is a primitive,

1036
00:53:43,812 --> 00:53:46,270
but if you call this toString
method, I know what you mean.

1037
00:53:46,270 --> 00:53:50,200
I'm going to box this 42
number with this prototype that

1038
00:53:50,200 --> 00:53:52,472
has a bunch of these methods on it.

1039
00:53:52,472 --> 00:53:54,680
So if I were to do 42.toString
that would make sense.

1040
00:53:54,680 --> 00:53:57,490
And if I num.__proto__,

1041
00:53:57,490 --> 00:54:00,620
[TYPING]

1042
00:54:00,620 --> 00:54:01,930
That actually exists.

1043
00:54:01,930 --> 00:54:02,680
But 42.__proto__

1044
00:54:02,680 --> 00:54:05,980
[TYPING]

1045
00:54:05,980 --> 00:54:06,858
Does not.

1046
00:54:06,858 --> 00:54:08,322
Does that make sense?

1047
00:54:08,322 --> 00:54:16,140


1048
00:54:16,140 --> 00:54:21,370
Another way to find out if a
value is an instance of some type,

1049
00:54:21,370 --> 00:54:24,424
you can do this thing
called x instance of number.

1050
00:54:24,424 --> 00:54:25,590
And that would return false.

1051
00:54:25,590 --> 00:54:28,460
Because x is actually not
of type capital number,

1052
00:54:28,460 --> 00:54:35,366
it's just boxed around that
number object for your reference.

1053
00:54:35,366 --> 00:54:36,240
Does that make sense?

1054
00:54:36,240 --> 00:54:39,966


1055
00:54:39,966 --> 00:54:42,840
Again not something you're going to
use everyday, just something that

1056
00:54:42,840 --> 00:54:45,548
is helpful to know in case you
run into the strange corner cases.

1057
00:54:45,548 --> 00:54:49,520


1058
00:54:49,520 --> 00:54:50,430
Cool.

1059
00:54:50,430 --> 00:54:53,640
So why would we use a
reference to the prototype?

1060
00:54:53,640 --> 00:54:55,380
And what is the alternative there?

1061
00:54:55,380 --> 00:54:56,880
Anybody care to give a shot at that?

1062
00:54:56,880 --> 00:55:06,600


1063
00:55:06,600 --> 00:55:10,500
So this is going back a little bit too
deep copying versus shallow copying.

1064
00:55:10,500 --> 00:55:14,300
AUDIENCE: So, maybe if the
initial object is massive.

1065
00:55:14,300 --> 00:55:18,580
And then you just want to do
something, like, after it?

1066
00:55:18,580 --> 00:55:22,710
JORDAN: Yeah, so if the initial object
is massive, like, what happens then?

1067
00:55:22,710 --> 00:55:26,405
So the alternative is basically
to clone every single--

1068
00:55:26,405 --> 00:55:29,070
to deep copy every single
prototype every single time

1069
00:55:29,070 --> 00:55:30,360
you couldn't new value.

1070
00:55:30,360 --> 00:55:35,430
Which is, safe, because that
number and all of its methods

1071
00:55:35,430 --> 00:55:39,120
are all encapsulated within
that specific variable.

1072
00:55:39,120 --> 00:55:41,760
But it's also a little bit
expensive in both performance,

1073
00:55:41,760 --> 00:55:44,190
because you have to do that
deep copy every single time.

1074
00:55:44,190 --> 00:55:47,350
And also of memory, because the
object starts to get pretty large.

1075
00:55:47,350 --> 00:55:50,280
And if you have an array of
like 100 different things,

1076
00:55:50,280 --> 00:55:54,180
all hundreds of those, deep copying
every single prototype gets pretty big.

1077
00:55:54,180 --> 00:55:56,750


1078
00:55:56,750 --> 00:55:59,940
And so what is the danger of storing
a reference to the prototype,

1079
00:55:59,940 --> 00:56:05,545
rather than copying the whole thing?

1080
00:56:05,545 --> 00:56:09,530
AUDIENCE: I guess if
change it, [INAUDIBLE]..

1081
00:56:09,530 --> 00:56:10,640
JORDAN: Yeah exactly.

1082
00:56:10,640 --> 00:56:14,300
If you change it, then it changes
for every single value of that type.

1083
00:56:14,300 --> 00:56:16,830


1084
00:56:16,830 --> 00:56:18,350
So let's do that really quick.

1085
00:56:18,350 --> 00:56:26,280
So, so say we have, so we solved
num, which is equal to 42, right?

1086
00:56:26,280 --> 00:56:30,770
And if you do num.toString,
what so we expect to come out?

1087
00:56:30,770 --> 00:56:32,440
42 is a string right?

1088
00:56:32,440 --> 00:56:35,247
But say, some devious
programmer was doing this thing

1089
00:56:35,247 --> 00:56:36,830
where he did number.prototype.toString

1090
00:56:36,830 --> 00:56:39,474
[TYPING]

1091
00:56:39,474 --> 00:56:42,700


1092
00:56:42,700 --> 00:56:52,700
And you actually override that to be
some function that will return 100.

1093
00:56:52,700 --> 00:56:56,060
Now what happens if I
call a num.toString?

1094
00:56:56,060 --> 00:56:57,090
Wait a second.

1095
00:56:57,090 --> 00:56:58,997
[TYPING]

1096
00:56:58,997 --> 00:57:01,080
So that could have some
dangerous penalties right?

1097
00:57:01,080 --> 00:57:04,750
So if I were to change the
prototype of the number class,

1098
00:57:04,750 --> 00:57:10,950
even though num was declared 100
lines prior to be the number 42.

1099
00:57:10,950 --> 00:57:14,760
And we tried num.toString
here and it returned 42.

1100
00:57:14,760 --> 00:57:16,860
If we were to change
the prototype later,

1101
00:57:16,860 --> 00:57:19,830
it affects everything
that has ever happened.

1102
00:57:19,830 --> 00:57:22,200
So num.toString now
starts returning 100.

1103
00:57:22,200 --> 00:57:23,560
And everything that will happen.

1104
00:57:23,560 --> 00:57:24,393
So if I were to do--

1105
00:57:24,393 --> 00:57:27,681
[TYPING]

1106
00:57:27,681 --> 00:57:32,040


1107
00:57:32,040 --> 00:57:34,900
Everything in the future
also has those consequences.

1108
00:57:34,900 --> 00:57:37,890
So changing the prototype is
something that is very dangerous,

1109
00:57:37,890 --> 00:57:40,922
and is recommended against doing.

1110
00:57:40,922 --> 00:57:42,410
Does that make sense?

1111
00:57:42,410 --> 00:57:46,374


1112
00:57:46,374 --> 00:57:46,874
Cool.

1113
00:57:46,874 --> 00:57:52,830


1114
00:57:52,830 --> 00:57:55,930
So let's actually take a short break.

1115
00:57:55,930 --> 00:57:57,710
All right welcome back.

1116
00:57:57,710 --> 00:58:01,180
So let's talk about scope now.

1117
00:58:01,180 --> 00:58:02,380
So what the heck is scope?

1118
00:58:02,380 --> 00:58:05,800
So Scope is a term that's
talking about variable lifetime,

1119
00:58:05,800 --> 00:58:07,675
and how long these
variables actually exist.

1120
00:58:07,675 --> 00:58:10,162


1121
00:58:10,162 --> 00:58:12,370
And so there are a couple
different types of scoping.

1122
00:58:12,370 --> 00:58:15,220
There's lexical scoping, which is
that keyword var that you might

1123
00:58:15,220 --> 00:58:18,060
see if you're reading old JavaScript.

1124
00:58:18,060 --> 00:58:23,290
And there's block scoping, which
refers to how things like const or let

1125
00:58:23,290 --> 00:58:24,340
are scoped.

1126
00:58:24,340 --> 00:58:28,610
So lexical scoping is basically
saying, hey, give me a variable

1127
00:58:28,610 --> 00:58:30,880
and it will exist for
as long as since it

1128
00:58:30,880 --> 00:58:35,680
was declared all the way until the
end of a function ends or the file

1129
00:58:35,680 --> 00:58:37,180
if it's in a file.

1130
00:58:37,180 --> 00:58:39,100
Whereas the analog
would be block scoping

1131
00:58:39,100 --> 00:58:42,720
where it behaves a lot like
something behaves in C.

1132
00:58:42,720 --> 00:58:45,910
Where basically a
variable will be around

1133
00:58:45,910 --> 00:58:50,510
from when it's declared until the
next end curly brace is reached.

1134
00:58:50,510 --> 00:58:54,160
And so that there is the big difference
between var and const and let.

1135
00:58:54,160 --> 00:58:56,170
And the difference
between const and let is

1136
00:58:56,170 --> 00:58:58,870
that const is something
that can't be updated,

1137
00:58:58,870 --> 00:59:01,690
meaning if I set a variable
to be a constant, it

1138
00:59:01,690 --> 00:59:05,200
means I'm not going to
update that reference later,

1139
00:59:05,200 --> 00:59:07,210
whereas let can be updated.

1140
00:59:07,210 --> 00:59:14,020
So if I were to do const thisIsAConst
and set about equal to something

1141
00:59:14,020 --> 00:59:22,810
like 50, if I were to say thisIsAConst
and try to update that to be 51,

1142
00:59:22,810 --> 00:59:27,300
I'm going to get an error actually
that says, hey, you call that a const?

1143
00:59:27,300 --> 00:59:28,790
But you're trying to change it.

1144
00:59:28,790 --> 00:59:30,620
That's not OK.

1145
00:59:30,620 --> 00:59:32,370
And so no matter how
I want to change it--

1146
00:59:32,370 --> 00:59:36,110
say I do that plus-plus or
something, that's also going to fail.

1147
00:59:36,110 --> 00:59:43,370
Whereas if I did something like
let thisIsALet equal to 50,

1148
00:59:43,370 --> 00:59:47,690
I can go ahead-- or 51, I made
a typo, but I can just say,

1149
00:59:47,690 --> 00:59:55,050
hey, it was a typo, thisIsALet, let me
change that to 50 and we're all good.

1150
00:59:55,050 --> 00:59:58,170
I mean, I can also do that plus-plus
or change it however I want

1151
00:59:58,170 --> 01:00:04,330
and it will actually update that.

1152
01:00:04,330 --> 01:00:08,764
Note that I said the
reference can't be updated.

1153
01:00:08,764 --> 01:00:10,930
I did not say anything about
things being immutable.

1154
01:00:10,930 --> 01:00:20,640
So if I get const obj equals
this empty object, if I then--

1155
01:00:20,640 --> 01:00:22,830
I can't update it to be--

1156
01:00:22,830 --> 01:00:24,060
point to a different object.

1157
01:00:24,060 --> 01:00:28,380
If I try to do obj is something
else, I'm going to say,

1158
01:00:28,380 --> 01:00:32,160
hey, you call this a const and
you're trying to change it.

1159
01:00:32,160 --> 01:00:38,550
But I can still do obj.a and set
that equal to a, because why?

1160
01:00:38,550 --> 01:00:40,200
Anybody care to tell me why?

1161
01:00:40,200 --> 01:00:46,950


1162
01:00:46,950 --> 01:00:47,520
Exactly.

1163
01:00:47,520 --> 01:00:49,950
So the pointer is still
pointing to the same object.

1164
01:00:49,950 --> 01:00:52,780
The reference has not changed.

1165
01:00:52,780 --> 01:00:55,357
So we mutated that
object, but it's still

1166
01:00:55,357 --> 01:00:56,940
pointing to that same place in memory.

1167
01:00:56,940 --> 01:01:00,200
It's still pointing to the
object that exists over here

1168
01:01:00,200 --> 01:01:02,640
and that reference has not been changed.

1169
01:01:02,640 --> 01:01:05,014
Does that distinction
make sense to people?

1170
01:01:05,014 --> 01:01:06,180
It's a pretty important one.

1171
01:01:06,180 --> 01:01:09,130


1172
01:01:09,130 --> 01:01:14,083
Cool So let's play a little bit
with these variable lifetimes.

1173
01:01:14,083 --> 01:01:29,880


1174
01:01:29,880 --> 01:01:41,920
So I said before that if I tried to do
something like this, what happens here?

1175
01:01:41,920 --> 01:01:46,275


1176
01:01:46,275 --> 01:01:46,775
Error.

1177
01:01:46,775 --> 01:01:49,540


1178
01:01:49,540 --> 01:01:50,040
Why?

1179
01:01:50,040 --> 01:01:53,240
Because it's a constant and
we can't update a constant.

1180
01:01:53,240 --> 01:01:55,958
And we can confirm this.

1181
01:01:55,958 --> 01:01:57,062
Oh.

1182
01:01:57,062 --> 01:01:58,770
It'll actually tell
us, hey, a TypeError.

1183
01:01:58,770 --> 01:02:01,140
You call this a constant variable
but you're trying assign it.

1184
01:02:01,140 --> 01:02:01,723
That's not OK.

1185
01:02:01,723 --> 01:02:08,510


1186
01:02:08,510 --> 01:02:09,330
But if we did--

1187
01:02:09,330 --> 01:02:21,050


1188
01:02:21,050 --> 01:02:24,630
this is OK because the reference
to that object did not change,

1189
01:02:24,630 --> 01:02:26,450
it's just mutated it.

1190
01:02:26,450 --> 01:02:34,370
On the other side, if we did something
like let thisIsALet A Let equal to 51,

1191
01:02:34,370 --> 01:02:40,410
and then want to change that
later, we go 50, that's totally OK.

1192
01:02:40,410 --> 01:02:43,300


1193
01:02:43,300 --> 01:02:49,170
But if I actually tried to
reassign-- so let thisIsALet.

1194
01:02:49,170 --> 01:02:52,950
If I tried to do this again, it's going
to yell at me because it's saying, hey,

1195
01:02:52,950 --> 01:02:55,170
you already declared
something called thisIsALet.

1196
01:02:55,170 --> 01:02:57,810
You cannot declare that again.

1197
01:02:57,810 --> 01:02:59,520
And so const and let
actually protect you

1198
01:02:59,520 --> 01:03:04,320
from declaring something with the same
variable name twice, which is something

1199
01:03:04,320 --> 01:03:05,290
that var does not do.

1200
01:03:05,290 --> 01:03:24,370


1201
01:03:24,370 --> 01:03:25,060
Cool.

1202
01:03:25,060 --> 01:03:27,476
What do you guys think would
happen if I tried to do this?

1203
01:03:27,476 --> 01:03:37,830


1204
01:03:37,830 --> 01:03:38,860
Anybody care to guess?

1205
01:03:38,860 --> 01:03:41,850


1206
01:03:41,850 --> 01:03:43,510
Undefined?

1207
01:03:43,510 --> 01:03:46,310
So let's try to run it.

1208
01:03:46,310 --> 01:03:47,340
Error.

1209
01:03:47,340 --> 01:03:49,890
So since these things
are block scoped, it

1210
01:03:49,890 --> 01:03:54,480
means the variable is declared
at the line that it is written.

1211
01:03:54,480 --> 01:03:58,120
And if we try to use it before then,
it actually does not even exist at all.

1212
01:03:58,120 --> 01:04:01,260
So if I tried to console.log something
called thisIsAConst here, remember,

1213
01:04:01,260 --> 01:04:04,500
the JavaScript interpreter
is just reading down

1214
01:04:04,500 --> 01:04:06,920
and it won't see like, hey,
what the heck is thisIsAConst?

1215
01:04:06,920 --> 01:04:09,420
I have no idea what that is so
I'm just going to Error here.

1216
01:04:09,420 --> 01:04:12,660


1217
01:04:12,660 --> 01:04:16,260
Same thing if I tried to
do this as a let here.

1218
01:04:16,260 --> 01:04:18,506
That will also Error
with the same error.

1219
01:04:18,506 --> 01:04:22,950
AUDIENCE: So what's line 14 error on?

1220
01:04:22,950 --> 01:04:25,110
JORDAN: Why does it error?

1221
01:04:25,110 --> 01:04:29,700
Because we're trying to declare two
variables with the same variable

1222
01:04:29,700 --> 01:04:30,720
name twice.

1223
01:04:30,720 --> 01:04:34,320
So we have let thisIsALet equal
51 here, and we try to do it again

1224
01:04:34,320 --> 01:04:37,380
and it's saying, hey, you already
have a variable called thisIsALet,

1225
01:04:37,380 --> 01:04:39,880
so I'm not going to allow
you to do that again.

1226
01:04:39,880 --> 01:04:43,278
So it's going to be
this error right here.

1227
01:04:43,278 --> 01:04:46,169
AUDIENCE: So it's the
instantiation of it?

1228
01:04:46,169 --> 01:04:46,710
JORDAN: Yeah.

1229
01:04:46,710 --> 01:04:49,929
It's saying like-- basically I'm
saying, hey, give me a variable to call,

1230
01:04:49,929 --> 01:04:52,470
this is a let here, and then a
couple lines later I'm saying,

1231
01:04:52,470 --> 01:04:54,240
hey, give me a variable
called thisIsALet,

1232
01:04:54,240 --> 01:04:56,430
and JavaScript says,
hey, like, you already

1233
01:04:56,430 --> 01:05:00,660
have a block scope
variable called thisIsALet,

1234
01:05:00,660 --> 01:05:04,019
so I can't give you another one.

1235
01:05:04,019 --> 01:05:06,810
However, if I tried to just update
it like this, that's totally OK.

1236
01:05:06,810 --> 01:05:09,489


1237
01:05:09,489 --> 01:05:10,530
Any other questions here?

1238
01:05:10,530 --> 01:05:13,790


1239
01:05:13,790 --> 01:05:17,060
So the other thing we said, we can
have these things called a var.

1240
01:05:17,060 --> 01:05:25,070
If I did var thisIsAVar equal to
50, that's fine, I can update it.

1241
01:05:25,070 --> 01:05:29,210


1242
01:05:29,210 --> 01:05:30,080
That's also fine.

1243
01:05:30,080 --> 01:05:38,430
I can also do this, and
that won't yell at me.

1244
01:05:38,430 --> 01:05:42,867
So vars are older ways
to declare variables

1245
01:05:42,867 --> 01:05:45,450
and they don't have the same
protection that let and const do.

1246
01:05:45,450 --> 01:05:49,982
You can override them like
this and it's totally OK.

1247
01:05:49,982 --> 01:05:53,190
And you can actually declare a whole
new variable with the same variable name

1248
01:05:53,190 --> 01:05:55,860
and that's also OK.

1249
01:05:55,860 --> 01:05:56,851
And something-- yeah?

1250
01:05:56,851 --> 01:06:00,080


1251
01:06:00,080 --> 01:06:03,190
It just-- yeah, so that's--

1252
01:06:03,190 --> 01:06:23,270


1253
01:06:23,270 --> 01:06:27,290
So if I try to run this,
it will update the old one.

1254
01:06:27,290 --> 01:06:28,540
It'll just replace that value.

1255
01:06:28,540 --> 01:06:31,250
It's actually called shadowing,
where you create a new variable

1256
01:06:31,250 --> 01:06:34,130
with the same variable name
which basically just overshadows

1257
01:06:34,130 --> 01:06:34,790
that old one.

1258
01:06:34,790 --> 01:06:36,560
So it's as if the
other one didn't exist.

1259
01:06:36,560 --> 01:06:42,630


1260
01:06:42,630 --> 01:06:43,800
Cool, so check this out.

1261
01:06:43,800 --> 01:06:48,220


1262
01:06:48,220 --> 01:06:51,090
So this errors and we know this errors.

1263
01:06:51,090 --> 01:06:54,820
But say I were to do this.

1264
01:06:54,820 --> 01:07:00,930
You'd expect this to also
error, but actually it does not.

1265
01:07:00,930 --> 01:07:03,291
It returns undefined.

1266
01:07:03,291 --> 01:07:05,290
So this is another weird
thing about JavaScript.

1267
01:07:05,290 --> 01:07:07,419
This is called hoisting.

1268
01:07:07,419 --> 01:07:09,210
And so certain things
are hoisted, which it

1269
01:07:09,210 --> 01:07:12,840
means basically it takes
the definition of something

1270
01:07:12,840 --> 01:07:15,900
and hoists it to the very top
of the file and does that first.

1271
01:07:15,900 --> 01:07:19,070


1272
01:07:19,070 --> 01:07:19,812
Get

1273
01:07:19,812 --> 01:07:21,460
And a few things are hoisted.

1274
01:07:21,460 --> 01:07:26,500
Var the-- actually, the declaration
of the creation of an empty variable

1275
01:07:26,500 --> 01:07:27,880
are hoisted.

1276
01:07:27,880 --> 01:07:31,160
Function definitions are hoisted
as well, but const and let

1277
01:07:31,160 --> 01:07:35,170
are not, as we saw if we tried to access
the variable name of the const or let,

1278
01:07:35,170 --> 01:07:36,030
then it errors.

1279
01:07:36,030 --> 01:07:41,319
But with a var, the declaration of
that variable is actually hoisted.

1280
01:07:41,319 --> 01:07:44,110
And we can talk a little bit more
about how that works in a second,

1281
01:07:44,110 --> 01:07:46,340
but let's actually play
with it a little bit more.

1282
01:07:46,340 --> 01:07:48,670
So function definitions are hoisted.

1283
01:07:48,670 --> 01:07:52,590
So let's clean up this
file a little bit.

1284
01:07:52,590 --> 01:07:59,332


1285
01:07:59,332 --> 01:08:01,040
So let's call this
new function, called--

1286
01:08:01,040 --> 01:08:07,262


1287
01:08:07,262 --> 01:08:09,030
so this is console.log.

1288
01:08:09,030 --> 01:08:24,302


1289
01:08:24,302 --> 01:08:26,260
So I defined this function
called thisIsHoisted

1290
01:08:26,260 --> 01:08:27,760
at the very bottom of the file.

1291
01:08:27,760 --> 01:08:30,160
And all it does is it
console.logs, there's

1292
01:08:30,160 --> 01:08:32,170
a function declared at
the bottom of the file.

1293
01:08:32,170 --> 01:08:35,859
But something very interesting is at the
very top of this file, I can call it.

1294
01:08:35,859 --> 01:08:40,884


1295
01:08:40,884 --> 01:08:42,050
And that will actually work.

1296
01:08:42,050 --> 01:08:45,229


1297
01:08:45,229 --> 01:08:50,109
And so that is what's
called function hoisting.

1298
01:08:50,109 --> 01:08:53,330
The behavior whereby
a function definition

1299
01:08:53,330 --> 01:08:57,170
declared at the very bottom of a
file is actually available for use

1300
01:08:57,170 --> 01:08:58,670
at the very top of the file as well.

1301
01:08:58,670 --> 01:09:01,340


1302
01:09:01,340 --> 01:09:03,863
But this does not work in other cases.

1303
01:09:03,863 --> 01:09:05,529
So say I were to do something like this.

1304
01:09:05,529 --> 01:09:26,260


1305
01:09:26,260 --> 01:09:30,745
So who can tell me what the difference
is between line 21 and line 25?

1306
01:09:30,745 --> 01:09:33,420


1307
01:09:33,420 --> 01:09:34,979
They look pretty similar, right?

1308
01:09:34,979 --> 01:09:35,478
Yeah?

1309
01:09:35,478 --> 01:09:40,620


1310
01:09:40,620 --> 01:09:41,120
OK.

1311
01:09:41,120 --> 01:09:49,279


1312
01:09:49,279 --> 01:09:49,779
Yep.

1313
01:09:49,779 --> 01:09:54,700
So repeating for the camera, line 25,
thisIsHoisted is declared as a constant

1314
01:09:54,700 --> 01:09:59,830
so it cannot be changed, whereas line 21
is declared as a function and so it can

1315
01:09:59,830 --> 01:10:02,420
be changed, which is absolutely correct.

1316
01:10:02,420 --> 01:10:04,400
What happens if I try
to do this up here?

1317
01:10:04,400 --> 01:10:12,740


1318
01:10:12,740 --> 01:10:17,120
Yeah, so we're going to get an error.

1319
01:10:17,120 --> 01:10:21,320
thisIsHoisted is not defined, but why?

1320
01:10:21,320 --> 01:10:23,510
Because as we talked about
earlier, these things

1321
01:10:23,510 --> 01:10:28,250
called consts are not available for
use until they're actually declared.

1322
01:10:28,250 --> 01:10:30,360
So certain things are hoisted.

1323
01:10:30,360 --> 01:10:31,010
Var.

1324
01:10:31,010 --> 01:10:33,710
So the declaration of these
variables are hoisted.

1325
01:10:33,710 --> 01:10:37,100
Function definitions if they're
declared like this are hoisted.

1326
01:10:37,100 --> 01:10:39,380
But if we create what's
called an anonymous function,

1327
01:10:39,380 --> 01:10:44,270
a function without any name,
and set that equal to--

1328
01:10:44,270 --> 01:10:51,350
or assign that to be a constant,
then that constant is not created.

1329
01:10:51,350 --> 01:10:54,600
Does that make sense?

1330
01:10:54,600 --> 01:10:58,290
So what happens if I try to do this?

1331
01:10:58,290 --> 01:11:00,275
Yeah, so same thing.

1332
01:11:00,275 --> 01:11:03,335
It errors.

1333
01:11:03,335 --> 01:11:04,710
What happens if I try to do this?

1334
01:11:04,710 --> 01:11:08,165


1335
01:11:08,165 --> 01:11:08,790
What's hoisted?

1336
01:11:08,790 --> 01:11:19,038


1337
01:11:19,038 --> 01:11:31,100
So notice-- so notice the
difference in the two errors.

1338
01:11:31,100 --> 01:11:34,170
They're actually not
the exact same error.

1339
01:11:34,170 --> 01:11:38,620
So who wants to give a guess
at what's going on here?

1340
01:11:38,620 --> 01:11:42,150
So when I declared it with a let
that's saying reference error,

1341
01:11:42,150 --> 01:11:45,370
thisIsHoisted is not defined,
whereas when I use a var,

1342
01:11:45,370 --> 01:11:49,241
it says TypeError,
thisIsHoisted is not a function.

1343
01:11:49,241 --> 01:11:49,990
Why might that be?

1344
01:11:49,990 --> 01:11:50,490
Yeah?

1345
01:11:50,490 --> 01:11:57,070


1346
01:11:57,070 --> 01:11:58,060
Uh huh.

1347
01:11:58,060 --> 01:12:04,020


1348
01:12:04,020 --> 01:12:05,286
Exactly.

1349
01:12:05,286 --> 01:12:07,994
So repeating for the camera., and
I'll bring up the code as well.

1350
01:12:07,994 --> 01:12:13,910


1351
01:12:13,910 --> 01:12:18,680
So down here, so the first time
when we declared this with the let,

1352
01:12:18,680 --> 01:12:21,150
it's not declared at all.

1353
01:12:21,150 --> 01:12:23,130
This variable does not exist at all.

1354
01:12:23,130 --> 01:12:25,940
So this is not hoisted,
the JavaScript does not

1355
01:12:25,940 --> 01:12:28,470
know what that means on line 1.

1356
01:12:28,470 --> 01:12:31,730
But when I use a var
here, remember, it hoists

1357
01:12:31,730 --> 01:12:33,170
the declaration of this variable.

1358
01:12:33,170 --> 01:12:35,750
So it creates a variable
called thisIsHoisted.

1359
01:12:35,750 --> 01:12:39,800
However, it does not assign it a
value until line 25 is executed.

1360
01:12:39,800 --> 01:12:43,130
And so at line 1, thisIsHoisted exists.

1361
01:12:43,130 --> 01:12:45,000
It's just equal to undefined.

1362
01:12:45,000 --> 01:12:47,200
And if I try to invoke
it like a function,

1363
01:12:47,200 --> 01:12:49,820
it says, hey, this is
an undefined variable,

1364
01:12:49,820 --> 01:12:53,030
I can't invoke it like a
function, this is a TypeError.

1365
01:12:53,030 --> 01:12:57,140
And so even though both of these things
errored, the reason that they errored

1366
01:12:57,140 --> 01:12:58,250
is slightly different.

1367
01:12:58,250 --> 01:13:02,290
In case one when they're
declared using a const or a let,

1368
01:13:02,290 --> 01:13:04,740
that variable just
does not exist at all.

1369
01:13:04,740 --> 01:13:08,570
However, when we declared
using var, the variable exists.

1370
01:13:08,570 --> 01:13:11,750
It's just undefined, and so if we
try to invoke it like a function,

1371
01:13:11,750 --> 01:13:15,830
and it says, hey, like, this is
undefined, it's not a function.

1372
01:13:15,830 --> 01:13:17,909
Does that make sense to everyone?

1373
01:13:17,909 --> 01:13:21,290


1374
01:13:21,290 --> 01:13:24,130
So why does this happen?

1375
01:13:24,130 --> 01:13:26,160
How does this happen?

1376
01:13:26,160 --> 01:13:29,870
And the reason is actually
how JavaScript is executed.

1377
01:13:29,870 --> 01:13:34,760
So there's two phases in the
execution of a JavaScript file.

1378
01:13:34,760 --> 01:13:39,230
So before executing any code, it
has all of the text in front of it,

1379
01:13:39,230 --> 01:13:43,067
but it hasn't executed anything,
it just reads the entire file.

1380
01:13:43,067 --> 01:13:44,150
And what's it looking for?

1381
01:13:44,150 --> 01:13:47,060
Well one, it's looking for
anything wrong with the file.

1382
01:13:47,060 --> 01:13:52,280
So say like my very first example
when I had an array and it was missing

1383
01:13:52,280 --> 01:13:55,010
a comma, that's something that's
caught in the first reading.

1384
01:13:55,010 --> 01:13:58,670
It says, hey, like, this looks like
an array but it's not quite right.

1385
01:13:58,670 --> 01:14:02,564
Like, I see this thing that I'm not
expecting, I'm respecting a comma here.

1386
01:14:02,564 --> 01:14:03,980
So that's one thing that's caught.

1387
01:14:03,980 --> 01:14:07,490
Other things, maybe it will
add some semi-colons for you

1388
01:14:07,490 --> 01:14:10,160
and stuff like that.

1389
01:14:10,160 --> 01:14:14,174
And then any function definitions
just get saved in memory.

1390
01:14:14,174 --> 01:14:16,590
It says, hey, this is a function,
let's put this in memory

1391
01:14:16,590 --> 01:14:20,690
so if somebody wants to use
it at line 1 they're able to.

1392
01:14:20,690 --> 01:14:25,040
Variable initializations, if
they're lexically scope-- or I mean,

1393
01:14:25,040 --> 01:14:27,560
if they're lexically-scoped
they will be declared,

1394
01:14:27,560 --> 01:14:29,120
but they will not be initialized.

1395
01:14:29,120 --> 01:14:31,880
Meaning anything
declared with var will be

1396
01:14:31,880 --> 01:14:34,160
declared-- like there's
a variable that exists,

1397
01:14:34,160 --> 01:14:38,870
but it's not going to be set
equal to anything until later.

1398
01:14:38,870 --> 01:14:42,440
And then there's a second phase called
the execution phase, whereby the code

1399
01:14:42,440 --> 01:14:44,330
is actually run, it's executed.

1400
01:14:44,330 --> 01:14:49,280
And so that is when things
like const or let get invoked--

1401
01:14:49,280 --> 01:14:53,420
or get both declared and initialized.

1402
01:14:53,420 --> 01:14:55,544
Does that make sense to everyone?

1403
01:14:55,544 --> 01:14:58,820


1404
01:14:58,820 --> 01:15:01,036
Anybody have any questions on scope?

1405
01:15:01,036 --> 01:15:05,900


1406
01:15:05,900 --> 01:15:09,343
So why might we take
advantage of this scoping?

1407
01:15:09,343 --> 01:15:11,634
Does it seem like a feature
or does it seem like a bug?

1408
01:15:11,634 --> 01:15:16,960


1409
01:15:16,960 --> 01:15:18,274
Anybody care to guess?

1410
01:15:18,274 --> 01:15:19,690
There's no correct answer to this.

1411
01:15:19,690 --> 01:15:21,070
It's completely opinion.

1412
01:15:21,070 --> 01:15:21,570
Yeah?

1413
01:15:21,570 --> 01:15:24,456
AUDIENCE: So you've got a controller
with math functions in it.

1414
01:15:24,456 --> 01:15:25,418
JORDAN: Uh huh.

1415
01:15:25,418 --> 01:15:27,502
AUDIENCE: You can call the
ones there and lay down

1416
01:15:27,502 --> 01:15:31,690
a file so that you can write all
your code in one giant function?

1417
01:15:31,690 --> 01:15:34,210
JORDAN: Yes So, one
thing might be we can

1418
01:15:34,210 --> 01:15:36,664
have these function
declarations at the very bottom

1419
01:15:36,664 --> 01:15:38,080
and then we can use it at the top.

1420
01:15:38,080 --> 01:15:40,960
And so that might be good
for code organization.

1421
01:15:40,960 --> 01:15:43,120
Like somebody reading
your code would know, hey,

1422
01:15:43,120 --> 01:15:45,130
if I'm looking for
these functions, they're

1423
01:15:45,130 --> 01:15:47,350
all going to be declared
together at the bottom.

1424
01:15:47,350 --> 01:15:50,410
And they might be used everywhere,
but all the function declarations

1425
01:15:50,410 --> 01:15:51,451
are all going to be here.

1426
01:15:51,451 --> 01:15:55,660
So that might be a feature because
it's good for organization.

1427
01:15:55,660 --> 01:15:58,570
So say we're to play devil's advocate.

1428
01:15:58,570 --> 01:16:00,916
Who might see this as a bug?

1429
01:16:00,916 --> 01:16:14,038


1430
01:16:14,038 --> 01:16:17,200
Uh huh.

1431
01:16:17,200 --> 01:16:17,700
OK.

1432
01:16:17,700 --> 01:16:20,572
So the question is, like, why
can we declare two variables

1433
01:16:20,572 --> 01:16:23,280
with the same name when they look
like they're in the same scope,

1434
01:16:23,280 --> 01:16:26,100
specifically with this var keyword?

1435
01:16:26,100 --> 01:16:31,760
Which is another thing where it's a
bug/feature that a lot of people use.

1436
01:16:31,760 --> 01:16:36,750
And so if JavaScript were to be updated
and that bug/feature were to disappear,

1437
01:16:36,750 --> 01:16:39,270
a lot of code would break.

1438
01:16:39,270 --> 01:16:41,250
So a lot of people have
took advantage of this.

1439
01:16:41,250 --> 01:16:43,862


1440
01:16:43,862 --> 01:16:46,820
And basically it's the same thing as
like, why is typeof a null object?

1441
01:16:46,820 --> 01:16:49,770


1442
01:16:49,770 --> 01:16:50,850
Just because it is.

1443
01:16:50,850 --> 01:16:55,240
And we can't change that because
people rely on that behavior.

1444
01:16:55,240 --> 01:16:59,100
I know it's kind of an anti-answer,
but does that kind of makes sense?

1445
01:16:59,100 --> 01:17:02,340


1446
01:17:02,340 --> 01:17:07,330
Yeah, you should-- so there's not
really a good reason to use var anymore.

1447
01:17:07,330 --> 01:17:11,300
With ES6, everything
supports const and let.

1448
01:17:11,300 --> 01:17:16,365
And so I've been using them in all
of the examples except for these.

1449
01:17:16,365 --> 01:17:18,490
And I think you should
definitely use them as well.

1450
01:17:18,490 --> 01:17:22,170
The reason I'm getting var
is one, so if you see this,

1451
01:17:22,170 --> 01:17:25,710
you know what's kind of going on, and
because a lot of legacy code-- a lot

1452
01:17:25,710 --> 01:17:28,890
of code written two, five
years ago, 10 years ago

1453
01:17:28,890 --> 01:17:30,810
uses var just because
it was the only option.

1454
01:17:30,810 --> 01:17:33,760


1455
01:17:33,760 --> 01:17:37,372
One thing that I didn't mention
earlier is that you can also

1456
01:17:37,372 --> 01:17:38,580
declare a variable like this.

1457
01:17:38,580 --> 01:17:48,470


1458
01:17:48,470 --> 01:17:52,550
So this is another way
of declaring a variable.

1459
01:17:52,550 --> 01:17:55,067
This creates a global variable.

1460
01:17:55,067 --> 01:17:57,650
It's something that you probably
won't see that often, there's

1461
01:17:57,650 --> 01:17:59,420
really no reason to do it.

1462
01:17:59,420 --> 01:18:03,690
But in case you ever see
that, that's what it is.

1463
01:18:03,690 --> 01:18:07,245
So if you declare a variable without
giving it a keyword like let, const,

1464
01:18:07,245 --> 01:18:09,425
or var, it creates it globally.

1465
01:18:09,425 --> 01:18:12,230


1466
01:18:12,230 --> 01:18:15,440
But there's no reason for
you to use this, really.

1467
01:18:15,440 --> 01:18:17,838
It's just if you ever see
it, that's what it is.

1468
01:18:17,838 --> 01:18:21,190


1469
01:18:21,190 --> 01:18:23,570
Any questions at all about scoping?

1470
01:18:23,570 --> 01:18:27,520
It's a pretty important concept.

1471
01:18:27,520 --> 01:18:30,700
And for online folks as well,
remember, you can post in Slack

1472
01:18:30,700 --> 01:18:35,546
and the staff will either field
those questions or pass them to me.

1473
01:18:35,546 --> 01:18:39,210


1474
01:18:39,210 --> 01:18:41,930
Cool So let's move on to
our final topic of the day.

1475
01:18:41,930 --> 01:18:46,370


1476
01:18:46,370 --> 01:18:48,480
So the global object.

1477
01:18:48,480 --> 01:18:55,940
So the way these things all work
is basically in any given runtime,

1478
01:18:55,940 --> 01:18:58,590
there's this thing
called a global object.

1479
01:18:58,590 --> 01:19:01,220
And so all variables, all
functions are actually

1480
01:19:01,220 --> 01:19:05,120
keys or parameters or
methods on the global object.

1481
01:19:05,120 --> 01:19:08,300
So in browser, there's
this thing called a window

1482
01:19:08,300 --> 01:19:10,050
which is a global object of a window.

1483
01:19:10,050 --> 01:19:15,830
So this is a browser environment.

1484
01:19:15,830 --> 01:19:19,750
And if I type window, I see this thing.

1485
01:19:19,750 --> 01:19:23,880
And it has a lot in it.

1486
01:19:23,880 --> 01:19:37,010


1487
01:19:37,010 --> 01:19:39,280
But basically the window
is this global object,

1488
01:19:39,280 --> 01:19:42,290
and on it there is all sorts of stuff.

1489
01:19:42,290 --> 01:19:45,460
So we see $0, $0a.

1490
01:19:45,460 --> 01:19:49,930
So these-- so any variable that
you declare in this console

1491
01:19:49,930 --> 01:19:53,890
gets put onto this global
object called window.

1492
01:19:53,890 --> 01:19:56,720
And so actually, let me open
a brand new browser tab.

1493
01:19:56,720 --> 01:20:03,212


1494
01:20:03,212 --> 01:20:05,170
And we'll get a little
bit of a cleaner window.

1495
01:20:05,170 --> 01:20:08,300
So the reason that we saw these
things called $0, $whatever,

1496
01:20:08,300 --> 01:20:15,330
is because I open these dev tools on
the same tab as my lecture slides.

1497
01:20:15,330 --> 01:20:21,120
And the way that Google
Slides works is since it's

1498
01:20:21,120 --> 01:20:24,210
something dynamic on the web,
it has to be using JavaScript.

1499
01:20:24,210 --> 01:20:26,220
And since it's using
JavaScript, obviously it's

1500
01:20:26,220 --> 01:20:28,970
creating a bunch of functions,
it's creating a bunch of variables.

1501
01:20:28,970 --> 01:20:31,290
And all of these things end
up on the window object.

1502
01:20:31,290 --> 01:20:33,990
And so when we check out--
when we inspected the window

1503
01:20:33,990 --> 01:20:36,780
object of that particular tab,
there was a bunch of stuff

1504
01:20:36,780 --> 01:20:40,500
on it because that's how
Google Slides is working.

1505
01:20:40,500 --> 01:20:47,160
And when we created a new
tab, this is a brand new tab

1506
01:20:47,160 --> 01:20:49,240
and therefore no JavaScript
has been executed,

1507
01:20:49,240 --> 01:20:54,940
so there's a lot fewer variables
and stuff on this new tab.

1508
01:20:54,940 --> 01:20:57,030
And so whenever we
create new variables-- so

1509
01:20:57,030 --> 01:21:05,010
say we do const x equals this is
a new variable, we see x is this.

1510
01:21:05,010 --> 01:21:08,770
We can also do this window.x--

1511
01:21:08,770 --> 01:21:10,270
I declare it as a const.

1512
01:21:10,270 --> 01:21:19,240


1513
01:21:19,240 --> 01:21:21,950
So the way that browser windows
handle these blocks of variables

1514
01:21:21,950 --> 01:21:23,860
is a little bit different.

1515
01:21:23,860 --> 01:21:26,780
So we'll use var for
the sake of explanation.

1516
01:21:26,780 --> 01:21:30,430
So when I create this new
variable called var y,

1517
01:21:30,430 --> 01:21:39,460
it is the exact same thing as window.y
And so if we inspect the window,

1518
01:21:39,460 --> 01:21:42,840
we see a bunch of things that are part
of the JavaScript API, the browser

1519
01:21:42,840 --> 01:21:45,070
API, all of these things.

1520
01:21:45,070 --> 01:21:52,100
And if we go all the
way to the very bottom,

1521
01:21:52,100 --> 01:21:57,358
so this is stuff that is
created in the new tab.

1522
01:21:57,358 --> 01:22:02,520
L, M, N, O, P, Q, R,
S. We see this y here.

1523
01:22:02,520 --> 01:22:05,930
So part of that window object
is that variable called y

1524
01:22:05,930 --> 01:22:07,480
that we stuck on the window.

1525
01:22:07,480 --> 01:22:10,790
And so even though we declared
it with var y equals something,

1526
01:22:10,790 --> 01:22:12,980
it ended up on that
global object, and that's

1527
01:22:12,980 --> 01:22:17,960
how JavaScript keeps track of
all of your valuables and stuff.

1528
01:22:17,960 --> 01:22:25,600
And so what happens when we're in the
node environment and we type window?

1529
01:22:25,600 --> 01:22:27,292
up window's not defined.

1530
01:22:27,292 --> 01:22:29,000
And it's because in
the node environment,

1531
01:22:29,000 --> 01:22:32,130
the global variable is not called
window, it's actually called global.

1532
01:22:32,130 --> 01:22:37,130
And if we type global, we
now see all of these things.

1533
01:22:37,130 --> 01:22:39,870


1534
01:22:39,870 --> 01:22:43,630
And a lot of this will overlap with
that window object in the browser,

1535
01:22:43,630 --> 01:22:47,630
but since the browser API has
things in it that is not necessarily

1536
01:22:47,630 --> 01:22:51,230
used in the command line
stuff like, give me a DOM node

1537
01:22:51,230 --> 01:22:56,240
or give me CSS on this DOM node,
stuff like that, that doesn't really

1538
01:22:56,240 --> 01:23:01,670
make sense in a command line
interface, therefore those things

1539
01:23:01,670 --> 01:23:05,930
are not on this global object.

1540
01:23:05,930 --> 01:23:11,960
And then if we try to type
global, here in the window,

1541
01:23:11,960 --> 01:23:15,380
that doesn't really make sense either.

1542
01:23:15,380 --> 01:23:18,050
There's another thing that's
just kind of important to know

1543
01:23:18,050 --> 01:23:21,639
but you might not ever
take advantage of it.

1544
01:23:21,639 --> 01:23:23,180
But does that-- does that make sense?

1545
01:23:23,180 --> 01:23:26,180


1546
01:23:26,180 --> 01:23:26,680
Cool.

1547
01:23:26,680 --> 01:23:29,620


1548
01:23:29,620 --> 01:23:33,800
So let's move onto something that we'll
discuss a lot more in the next lecture

1549
01:23:33,800 --> 01:23:36,610
but I'll go ahead and introduce
the concept in this lecture

1550
01:23:36,610 --> 01:23:39,130
and leave you with a
little bit of a teaser.

1551
01:23:39,130 --> 01:23:40,990
So who here has heard
of a closure before?

1552
01:23:40,990 --> 01:23:43,690


1553
01:23:43,690 --> 01:23:46,630
So closures are actually
one of the things

1554
01:23:46,630 --> 01:23:49,882
that JavaScript
programmers hate the most

1555
01:23:49,882 --> 01:23:52,090
because it's a very, very
difficult concept to learn.

1556
01:23:52,090 --> 01:23:55,120


1557
01:23:55,120 --> 01:24:00,190
Mostly because it's always
taught somewhat poorly.

1558
01:24:00,190 --> 01:24:02,990
And so next time I'm going to try
to do a good job of teaching you,

1559
01:24:02,990 --> 01:24:07,970
but I'm going to show you right now
the problem that a lot of people face.

1560
01:24:07,970 --> 01:24:10,710
And so what closures are are functions--

1561
01:24:10,710 --> 01:24:13,060
is a behavior whereby functions
that refer to variables

1562
01:24:13,060 --> 01:24:16,280
declared by a parent
function still exist,

1563
01:24:16,280 --> 01:24:18,872
and it's possibly because of scoping.

1564
01:24:18,872 --> 01:24:20,080
What the heck does that mean?

1565
01:24:20,080 --> 01:24:22,371
I'll explain it in the next
lecture, but let's go ahead

1566
01:24:22,371 --> 01:24:26,908
and explore what this actually means.

1567
01:24:26,908 --> 01:24:36,200


1568
01:24:36,200 --> 01:24:38,680
All right.

1569
01:24:38,680 --> 01:24:39,815
So let's do this.

1570
01:24:39,815 --> 01:24:55,714


1571
01:24:55,714 --> 01:24:57,505
So first thing I'm
going to do is I'm going

1572
01:24:57,505 --> 01:25:00,394
to declare an empty array
called array, and I'm

1573
01:25:00,394 --> 01:25:01,935
going to fill that with a few values.

1574
01:25:01,935 --> 01:25:07,600


1575
01:25:07,600 --> 01:25:12,954
That's And I'm using var intentionally.

1576
01:25:12,954 --> 01:25:17,070


1577
01:25:17,070 --> 01:25:20,290
And that's push on a
function that does this.

1578
01:25:20,290 --> 01:25:43,850


1579
01:25:43,850 --> 01:25:46,230
All right So what the
heck did I do here?

1580
01:25:46,230 --> 01:25:49,770
So I declared a function
called makeFunctionArray,

1581
01:25:49,770 --> 01:25:53,100
and all it does is it creates an
array, fill it with functions,

1582
01:25:53,100 --> 01:25:55,150
and then invoke one of them.

1583
01:25:55,150 --> 01:25:56,441
And so if I were to call this--

1584
01:25:56,441 --> 01:26:10,680


1585
01:26:10,680 --> 01:26:15,520
if I were to call this, I'd get back
an array full of functions, right?

1586
01:26:15,520 --> 01:26:18,574
And what do we expect those
functions to do? each of them?

1587
01:26:18,574 --> 01:26:22,560


1588
01:26:22,560 --> 01:26:23,490
Print a number, right?

1589
01:26:23,490 --> 01:26:26,612
And so what should
happen is I should just--

1590
01:26:26,612 --> 01:26:29,820
I should be able to march through this
array, invoke each of those functions,

1591
01:26:29,820 --> 01:26:32,680
and get back something
that counts, right?

1592
01:26:32,680 --> 01:26:34,227
Basically?

1593
01:26:34,227 --> 01:26:35,310
So let's see what happens.

1594
01:26:35,310 --> 01:26:38,530


1595
01:26:38,530 --> 01:26:41,430
So I'm just going to access
that first one and invoke it,

1596
01:26:41,430 --> 01:26:43,840
and we expect it to print out 0.

1597
01:26:43,840 --> 01:26:47,570


1598
01:26:47,570 --> 01:26:53,550
So that there is one, a JavaScript
programmer's worst enemy,

1599
01:26:53,550 --> 01:26:57,140
because it's somewhat unexpected,
and as we'll see in coming lectures,

1600
01:26:57,140 --> 01:26:59,890
that is actually as expected.

1601
01:26:59,890 --> 01:27:02,730
So I'll leave you guys on that
cliffhanger for next time,

1602
01:27:02,730 --> 01:27:05,330
and we'll go ahead and
officially end lecture.

1603
01:27:05,330 --> 01:27:08,600
I'll stick around if you any questions.

1604
01:27:08,600 --> 01:27:10,015