1
00:00:00,000 --> 00:00:03,600
Beau:  This is the Beginner’s Javascript course 
you are looking for.

2
00:00:03,600 --> 00:00:06,100
My name is Beau Carnes.

3
00:00:06,100 --> 00:00:08,700
And I’m with freeCodeCamp.org.

4
00:00:08,700 --> 00:00:15,700
In this full Javascript course you will learn everything 
you need to know to get started with Javascript.

5
00:00:15,700 --> 00:00:23,900
This course is perfect for beginners or anyone that 
just wants a refresher on basic Javascript syntax.

6
00:00:23,900 --> 00:00:29,300
This course actually goes along with the 
freeCodeCamp.org Javascript curriculum.

7
00:00:29,300 --> 00:00:34,200
So, if you want some live coding challenges 
to go along with every part of this course, 

8
00:00:34,200 --> 00:00:37,400
you can check the link in the description 
to that curriculum.

9
00:00:37,400 --> 00:00:40,400
But this is a completely standalone video.

10
00:00:40,400 --> 00:00:45,000
So, you don’t need to go through freeCodeCamp.org, 
but it could be helpful.

11
00:00:45,000 --> 00:00:51,800
Also, after this course, you’re going to want to 
complete some, or build some Javascript projects.

12
00:00:51,800 --> 00:00:55,900
So, I have a link in the description 
to some project tutorials.

13
00:00:55,900 --> 00:01:00,100
But then after that, you’re going to want to 
create some projects on your own.

14
00:01:00,100 --> 00:01:02,300
That’s how you really learn Javascript.

15
00:01:02,300 --> 00:01:05,300
You have to create things without going 
through a tutorial 

16
00:01:05,300 --> 00:01:09,400
and just use a search engine to find the things 
that you don’t know or need to learn.

17
00:01:09,400 --> 00:01:16,500
To go along with the freeCodeCamp curriculum, 
I have all the ES6 stuff in the second part of this course.

18
00:01:16,500 --> 00:01:18,600
That’s pretty much it.

19
00:01:18,600 --> 00:01:24,500
Let’s learn some Javascript.

20
00:01:24,500 --> 00:01:28,000
[Running Javascript]

21
00:01:28,000 --> 00:01:31,400
So, how exactly do you install Javascript?

22
00:01:31,400 --> 00:01:33,700
Well, for the most part, you don’t.

23
00:01:33,700 --> 00:01:37,400
Actually, all web browsers can run Javascript.

24
00:01:37,400 --> 00:01:41,900
Which is great because a lot of devices 
have web browsers on them.

25
00:01:41,900 --> 00:01:44,700
So, when you write something with Javascript, 

26
00:01:44,700 --> 00:01:48,800
it will run on all sorts of devices 
and operating systems.

27
00:01:48,800 --> 00:01:51,800
So, you have a few options for writing Javascript.

28
00:01:51,800 --> 00:01:56,300
Let me show you a few things you can do 
to follow along with this course.

29
00:01:56,300 --> 00:01:58,600
You could download a code editor.

30
00:01:58,600 --> 00:02:01,200
Here, I have Sublime Text.

31
00:02:01,200 --> 00:02:06,000
You can also use Visual Studio Code or Atom 
or any code editor.

32
00:02:06,000 --> 00:02:12,400
And I’ve created an HTML file because HTML files 
can be opened in web browsers.

33
00:02:12,400 --> 00:02:17,600
And I have these <script> tags – these are HTML tags.

34
00:02:17,600 --> 00:02:20,800
But within our <script> tags, we have our Javascript.

35
00:02:20,800 --> 00:02:24,700
So, if I open up this file in a web browser, 
it looks like this.

36
00:02:24,700 --> 00:02:28,200
Well, I can open up my Javascript console.

37
00:02:28,200 --> 00:02:33,000
And in the console, you can see it says “hello world.”

38
00:02:33,000 --> 00:02:35,900
That’s right from my Javascript program.

39
00:02:35,900 --> 00:02:39,900
So, whenever you do console.log, 
it’s going to show on the console here.

40
00:02:39,900 --> 00:02:45,100
You can also just use the code editor 
that’s included on freeCodeCamp.org.

41
00:02:45,100 --> 00:02:51,300
Like I mentioned, this course follows along with the Javascript curriculum on freeCodeCamp.org.

42
00:02:51,300 --> 00:02:55,000
And there’s a built-in Javascript editor right in here.

43
00:02:55,000 --> 00:02:58,400
And then it shows you the console down here.

44
00:02:58,400 --> 00:03:01,500
Another option would be to use CodePen.

45
00:03:01,500 --> 00:03:05,700
If you go to CodePen.io, going to go to Create Pen.

46
00:03:05,700 --> 00:03:09,600
And then there’s going to be three windows.

47
00:03:09,600 --> 00:03:11,600
HTML, CSS, and Javascript.

48
00:03:11,600 --> 00:03:13,900
Well, we just care about the Javascript.

49
00:03:13,900 --> 00:03:18,000
And in this course, we're not going to be doing 
anything with HTML and CSS.

50
00:03:18,000 --> 00:03:21,700
We just need the Javascript and the Javascript console.

51
00:03:21,700 --> 00:03:31,800
So, if I do console.log and then do (“Hello World”) 
then we can see right in the console "Hello world.”

52
00:03:31,800 --> 00:03:34,500
The final thing you can do would be use Scrimba.

53
00:03:34,500 --> 00:03:38,200
Most of the course I actually recorded 
using Scrimba.com.

54
00:03:38,200 --> 00:03:41,000
So, if you want, you can use Scrimba.com 
to follow along.

55
00:03:41,000 --> 00:03:45,000
Once you log in, just click the [Plus] button.

56
00:03:45,000 --> 00:03:48,800
I’m going to [Javascript] [Playground] 
and then [Confirm].

57
00:03:48,800 --> 00:03:51,800
And it’s going to open up a new Javascript window.

58
00:03:51,800 --> 00:03:54,800
Now, I can increase the font size here.

59
00:03:54,800 --> 00:03:58,400
And it already has console.log “Hello from Javascript.”

60
00:03:58,400 --> 00:04:01,400
And you can see in the console right here 
“Hello from Javascript.”

61
00:04:01,400 --> 00:04:04,900
Also, if you hit [Reload], it reloads everything.

62
00:04:04,900 --> 00:04:07,800
And you'll see this popup “Hello from Javascript.”

63
00:04:07,800 --> 00:04:14,200
So, that’s something interesting about Scrimba 
is that has two ways of logging in the console.

64
00:04:14,200 --> 00:04:17,400
We have the popup and then 
we have the console here.

65
00:04:17,400 --> 00:04:22,900
You’ll see that in this course too, 
the two different ways of logging to the console.

66
00:04:22,900 --> 00:04:26,400
[Comment Your Javascript Code]

67
00:04:26,400 --> 00:04:31,000
The first thing we'll talk about 
in Javascript is comments.

68
00:04:31,000 --> 00:04:35,100
Comments are lines of code 
that Javascript will intentionally ignore.

69
00:04:35,100 --> 00:04:37,200
They don’t do anything.

70
00:04:37,200 --> 00:04:42,900
They’re just used to create notes for yourself 
and others about what the code does.

71
00:04:42,900 --> 00:04:47,500
So, if you do a // you can make an in-line comment.

72
00:04:47,500 --> 00:04:52,100
An in-line comment means it’s at the end 
of a line of code.

73
00:04:52,100 --> 00:04:57,400
For instance, I can put var number = 5.

74
00:04:57,400 --> 00:04:59,400
That’s a way to declare a variable.

75
00:04:59,400 --> 00:05:01,900
And we'll talk more about that later.

76
00:05:01,900 --> 00:05:04,400
But right now we're just talking about comments.

77
00:05:04,400 --> 00:05:11,000
You can see that this code is in color because the code 
editor knows that that’s code that’s going to run.

78
00:05:11,000 --> 00:05:16,000
And the comment is automatically grayed out 
because it’s not going to run.

79
00:05:16,000 --> 00:05:20,200
We can also do an in-line comment 
or I mean a multi-line comment.

80
00:05:20,200 --> 00:05:27,400
If we do a /* and I can put "this is a,” 
and then I can put "multi-line comment.”

81
00:05:27,400 --> 00:05:31,800
And I'm going to end with a */.

82
00:05:31,800 --> 00:05:34,600
So, it begins with a /*
and ends with a */.

83
00:05:34,600 --> 00:05:38,400
And you can put as much text as you want 
in between these.

84
00:05:38,400 --> 00:05:42,300
And you can see this is all grayed out 
because it’s all a comment.

85
00:05:42,300 --> 00:05:50,100
And then afterwards I can put number = 9 

86
00:05:50,100 --> 00:05:55,400
and you can see it will be in color again 
because it’s no longer commented out.

87
00:05:55,400 --> 00:05:59,700
[Data Types and Variables]

88
00:05:59,700 --> 00:06:02,900
Now we're going to talk about 
data types and variables.

89
00:06:02,900 --> 00:06:07,200
In computer science, data is anything that is 
meaningful to the computer.

90
00:06:07,200 --> 00:06:12,500
And Javascript provides seven different data types 
that you can use within Javascript.

91
00:06:12,500 --> 00:06:17,500
Now, some of the more obvious and most common 
are strings and numbers.

92
00:06:17,500 --> 00:06:20,700
A string is just any sort of text.

93
00:06:20,700 --> 00:06:22,300
A number is a number.

94
00:06:22,300 --> 00:06:24,200
Now let’s go from the top.

95
00:06:24,200 --> 00:06:27,400
So, undefined is something that hasn’t been defined.

96
00:06:27,400 --> 00:06:31,000
You may have a variable that you haven’t 
set to be anything yet.

97
00:06:31,000 --> 00:06:32,800
Null means nothing.

98
00:06:32,800 --> 00:06:37,600
So, you’ve set this to be something 
and that thing is nothing.

99
00:06:37,600 --> 00:06:40,400
So, you can say this is null or nothing.

100
00:06:40,400 --> 00:06:42,700
A boolean means true or false.

101
00:06:42,700 --> 00:06:44,300
We talked about string.

102
00:06:44,300 --> 00:06:49,300
A symbol is an immutable primitive value 
that is unique.

103
00:06:49,300 --> 00:06:51,800
Now we'll tall more about those later.

104
00:06:51,800 --> 00:06:53,500
A number is a number.

105
00:06:53,500 --> 00:06:58,500
And an object can store a lot 
of different key value pairs.

106
00:06:58,500 --> 00:07:01,200
Again, we'll talk more about those later.

107
00:07:01,200 --> 00:07:06,500
Now, you are often going to set data into a variable.

108
00:07:06,500 --> 00:07:13,400
A variable allows computers to store 
and manipulate data in a dynamic fashion.

109
00:07:13,400 --> 00:07:17,500
It’s basically a label to point to the data.

110
00:07:17,500 --> 00:07:19,300
A variable is almost like a box.

111
00:07:19,300 --> 00:07:21,100
And you can fill it with anything.

112
00:07:21,100 --> 00:07:23,200
You’ll fill it with the data that you want.

113
00:07:23,200 --> 00:07:28,200
So, to declare a variable, 
one way is to use the var keyword.

114
00:07:28,200 --> 00:07:30,500
Var stands for variable.

115
00:07:30,500 --> 00:07:32,800
And I can say myName.

116
00:07:32,800 --> 00:07:35,300
I can set this to anything.

117
00:07:35,300 --> 00:07:37,800
It can be any of the datatypes above.

118
00:07:37,800 --> 00:07:41,300
But it’s common to set something to a string.

119
00:07:41,300 --> 00:07:44,900
So, I can set my name to be “Beau.”

120
00:07:44,900 --> 00:07:48,800
Now later, you can set it to be something else.

121
00:07:48,800 --> 00:07:52,500
I can say myName = 8.

122
00:07:52,500 --> 00:07:55,300
And you can just set it to other data types later.

123
00:07:55,300 --> 00:08:01,200
Now, there are actually three ways 
to declare a variable in Javascript.

124
00:08:01,200 --> 00:08:03,300
So, var is one of them.

125
00:08:03,300 --> 00:08:05,800
And for a while, that was the only way.

126
00:08:05,800 --> 00:08:07,600
But there are other ways too.

127
00:08:07,600 --> 00:08:09,700
There’s a way called "Let.”

128
00:08:09,700 --> 00:08:16,800
So, I can say let ourName = “freeCodeCamp”.

129
00:08:16,800 --> 00:08:21,400
And then the other thing would be const.

130
00:08:21,400 --> 00:08:26,400
So, I can do const Pi = 3,1004.

131
00:08:26,400 --> 00:08:30,700
Now, the difference between var, let, and const, 

132
00:08:30,700 --> 00:08:34,800
a var is going to be able to be used 
throughout your whole program.

133
00:08:34,800 --> 00:08:41,000
Let will only be used within the scope 
of where you declared that.

134
00:08:41,000 --> 00:08:45,400
Now, we're going to be talking about let 
and const more later.

135
00:08:45,400 --> 00:08:47,700
So, I’m just giving you a brief overview 
of what they are now.

136
00:08:47,700 --> 00:08:52,000
Const is a variable that should never change.

137
00:08:52,000 --> 00:08:53,100
It can never change.

138
00:08:53,100 --> 00:08:59,300
So, like right up here, I declared myName, 
but then we changed it here.

139
00:08:59,300 --> 00:09:02,100
So, it started out to be Beau and we changed it to 8.

140
00:09:02,100 --> 00:09:04,600
Const, you can never change it.

141
00:09:04,600 --> 00:09:07,600
If you do try to change it, you’ll get an ERROR.

142
00:09:07,600 --> 00:09:09,400
Okay, that’s all for now.

143
00:09:09,400 --> 00:09:10,500
But like I said.

144
00:09:10,500 --> 00:09:13,800
We'll be talking more about 
the different types of variables later.

145
00:09:13,800 --> 00:09:18,300
[Storing Values with Assignment Operator]

146
00:09:18,300 --> 00:09:22,400
There’s a difference between declaring variables 
and assigning variables.

147
00:09:22,400 --> 00:09:24,700
Here’s how you assign a variable.

148
00:09:24,700 --> 00:09:26,100
var a and then a semicolon.

149
00:09:26,100 --> 00:09:32,500
I didn’t mention this earlier, but you end all lines 
in Javascript with a semicolon.

150
00:09:32,500 --> 00:09:34,700
Well, it’s not actually required.

151
00:09:34,700 --> 00:09:38,600
You can actually just skip the semicolons completely, 

152
00:09:38,600 --> 00:09:45,200
but most people recommend that you put a semicolon
just so it’s obvious where the end of the line is.

153
00:09:45,200 --> 00:09:51,000
So, here, we are just declaring a variable 
to be called a.

154
00:09:51,000 --> 00:09:53,700
And then here, we are assigning a variable.

155
00:09:53,700 --> 00:09:56,500
We’re declaring and assigning in one line.

156
00:09:56,500 --> 00:10:03,400
So, we're declaring it “var b” And then the equals sign 
is the assignment operator.

157
00:10:03,400 --> 00:10:07,500
It means that 2 is being assigned to b.

158
00:10:07,500 --> 00:10:10,000
We're not checking if b = 2.

159
00:10:10,000 --> 00:10:11,900
We're just assigning 2 to be.

160
00:10:11,900 --> 00:10:15,500
So, after that, we can actually assign other things.

161
00:10:15,500 --> 00:10:20,800
So, I can say a = 7.

162
00:10:20,800 --> 00:10:24,200
So, now I’ve just assigned 7 to a.

163
00:10:24,200 --> 00:10:27,000
I didn’t have to declare a because 
it was already declared.

164
00:10:27,000 --> 00:10:34,100
And I can also say that b = a.

165
00:10:34,100 --> 00:10:39,300
So, I’ve now assigned the contents of a to b.

166
00:10:39,300 --> 00:10:41,600
And I’ll put the semicolon there.

167
00:10:41,600 --> 00:10:45,100
One thing I want to tell you about is console.log.

168
00:10:45,100 --> 00:10:49,600
Console.log allows you to see things in the console.

169
00:10:49,600 --> 00:10:52,600
So, I’m going to console.log(a).

170
00:10:52,600 --> 00:10:57,900
And if I load this here, you can see down here 
in the console it shows 7.

171
00:10:57,900 --> 00:11:01,800
So, right now we've assigned a to be 7.

172
00:11:01,800 --> 00:11:05,800
And so, when we console.log(a) 
it shows 7 down there.

173
00:11:05,800 --> 00:11:10,200
If we put another console.log right here, 

174
00:11:10,200 --> 00:11:15,700
this will allow us to show what a was up here 
and then down there.

175
00:11:15,700 --> 00:11:17,500
So, console.log.

176
00:11:17,500 --> 00:11:22,100
Now, if I run that, we can see at first, a was null.

177
00:11:22,100 --> 00:11:23,400
And then now it’s 7.

178
00:11:23,400 --> 00:11:24,800
So, here is null.

179
00:11:24,800 --> 00:11:26,000
And then it’s 7 down here.

180
00:11:26,000 --> 00:11:29,900
So, you can check what variables 
are at various points in your program.

181
00:11:29,900 --> 00:11:34,700
[Initializing Variables w/ Assignment Operator]

182
00:11:34,700 --> 00:11:38,500
Now I’ll show you another example 
of initializing a variable 

183
00:11:38,500 --> 00:11:42,800
to an initial value at the same time it’s declared.

184
00:11:42,800 --> 00:11:47,200
So, I’m going to say var a = 9.

185
00:11:47,200 --> 00:11:50,400
So, the var a is declaring it.

186
00:11:50,400 --> 00:11:56,800
And the = 9 is initializing it with the assignment 
operator, which is the = sign.

187
00:11:56,800 --> 00:12:01,100
[Uninitialized Variables]

188
00:12:01,100 --> 00:12:04,800
Before we do anything to these variables, 
they are uninitialized.

189
00:12:04,800 --> 00:12:07,500
That means their value is undefined.

190
00:12:07,500 --> 00:12:09,600
We have not set them to anything.

191
00:12:09,600 --> 00:12:11,400
But it’s simple to fix that.

192
00:12:11,400 --> 00:12:13,300
I’ll just set this to five.

193
00:12:13,300 --> 00:12:17,900
I’ll set b to 10 and then we can set c to a string.

194
00:12:17,900 --> 00:12:22,000
That’s going to be “I am a string”.

195
00:12:22,000 --> 00:12:24,900
And we always have to put it in 
quotation marks like that.

196
00:12:24,900 --> 00:12:30,000
So, you can see a + 1 is going to equal 6.

197
00:12:30,000 --> 00:12:33,900
5 + 1 = 6.
b = b + 5.

198
00:12:33,900 --> 00:12:35,200
That’s going to be 15.

199
00:12:35,200 --> 00:12:38,700
And then c is now going to say "I am a string”.

200
00:12:38,700 --> 00:12:43,300
[Case Sensitivity in Variables]

201
00:12:43,300 --> 00:12:48,100
Variable names and function names 
in Javascript are case sensitive.

202
00:12:48,100 --> 00:12:51,000
That means that capitalization matters.

203
00:12:51,000 --> 00:12:55,600
So, this declaration here is not the same 
as this assignment.

204
00:12:55,600 --> 00:13:00,000
Even though letters are the same, 
the capitalization is not the same.

205
00:13:00,000 --> 00:13:02,500
So, it’s not going to assign correctly.

206
00:13:02,500 --> 00:13:09,600
And in here, you’ll see there’s an ERROR if we try 
to run it because this has not been defined.

207
00:13:09,600 --> 00:13:11,600
It has not been declared.

208
00:13:11,600 --> 00:13:16,000
It’s generally common practice to use camelCase.

209
00:13:16,000 --> 00:13:24,500
So, let me show you how we do that instead of 
StUdLyCapVar, it’s going to be studlyCapVar.

210
00:13:24,500 --> 00:13:27,700
So, the first letter is always going to be lowercase.

211
00:13:27,700 --> 00:13:32,900
Any time you have a new word or a new section 
of a word, you just capitalize the first letter.

212
00:13:32,900 --> 00:13:36,100
And so, we can change this.

213
00:13:36,100 --> 00:13:38,000
This one is correct.

214
00:13:38,000 --> 00:13:39,800
So, now we just go down here.

215
00:13:39,800 --> 00:13:42,100
studlyCapVar.

216
00:13:42,100 --> 00:13:47,400
And then we just do properCamelCase.

217
00:13:47,400 --> 00:13:52,200
And then titleCaseOver.

218
00:13:52,200 --> 00:13:55,800
So, now all of these should be defined.

219
00:13:55,800 --> 00:13:57,900
So, we declare them here.

220
00:13:57,900 --> 00:13:59,100
We assign them right here.

221
00:13:59,100 --> 00:14:02,100
And then this is not going to give us any errors.

222
00:14:02,100 --> 00:14:05,000
It’s going to behave exactly how we want it to behave.

223
00:14:05,000 --> 00:14:09,400
[Adding Numbers]

224
00:14:09,400 --> 00:14:12,700
Adding two numbers in Javascript 
is pretty straight forward.

225
00:14:12,700 --> 00:14:14,500
You just use the plus operator.

226
00:14:14,500 --> 00:14:17,500
So, this says 10 + 0 which equals 10.

227
00:14:17,500 --> 00:14:26,200
We can also do, 10 + 10 which is going to equal 20, 
if we do a console.log, and I can put sum here.

228
00:14:26,200 --> 00:14:31,400
And then you’ll be able to see that 
the answer is 20 right in the console.

229
00:14:31,400 --> 00:14:33,300
10 + 10 is 20.

230
00:14:33,300 --> 00:14:38,100
[Subtracting Numbers]

231
00:14:38,100 --> 00:14:40,800
And subtraction is also what you would expect.

232
00:14:40,800 --> 00:14:42,200
We have the subtraction sign here.

233
00:14:42,200 --> 00:14:44,500
This says 45 – 0.

234
00:14:44,500 --> 00:14:47,200
We can also do 45 – 33.

235
00:14:47,200 --> 00:14:49,500
And then that would equal 12.

236
00:14:49,500 --> 00:14:52,300
So, the difference variable equals 12 now.

237
00:14:52,300 --> 00:14:55,900
[Multiplying Numbers]

238
00:14:55,900 --> 00:15:00,500
Multiplication in Javascript uses this *
or a star symbol here.

239
00:15:00,500 --> 00:15:04,500
So, this says 8 * 0 which is 0.

240
00:15:04,500 --> 00:15:08,300
Or we can change it to 8 * 10 which is 80.

241
00:15:08,300 --> 00:15:11,300
So now the product variable equals 80.

242
00:15:11,300 --> 00:15:15,200
[Dividing Numbers]

243
00:15:15,200 --> 00:15:18,400
You can divide in Javascript with this / symbol.

244
00:15:18,400 --> 00:15:21,400
So, this says 66/0.

245
00:15:21,400 --> 00:15:24,300
We can change this to 33.

246
00:15:24,300 --> 00:15:27,800
So, now 66/33 is 2.

247
00:15:27,800 --> 00:15:30,000
Quotient equals 2.

248
00:15:30,000 --> 00:15:33,700
[Incrementing Numbers]

249
00:15:33,700 --> 00:15:36,900
To increment a number means to add 1 to it.

250
00:15:36,900 --> 00:15:40,600
So, here we’re incrementing myVar by 1.

251
00:15:40,600 --> 00:15:42,200
So, it starts at 87.

252
00:15:42,200 --> 00:15:44,000
87 + 1 is 88.

253
00:15:44,000 --> 00:15:47,900
There is a quicker way to increment a number.

254
00:15:47,900 --> 00:15:52,000
Instead of doing this, we can just myVar++.

255
00:15:52,000 --> 00:15:54,100
myVar++.

256
00:15:54,100 --> 00:15:58,000
And now we have incremented myVar from 87 to 88.

257
00:15:58,000 --> 00:16:01,900
[Decrement Numbers]

258
00:16:01,900 --> 00:16:04,600
We learned about incrementing a number with ++.

259
00:16:04,600 --> 00:16:07,800
You can also decrement a number with --.

260
00:16:07,800 --> 00:16:09,900
That means subtracting one.

261
00:16:09,900 --> 00:16:12,600
So, right now, myVar is going to equal 10.

262
00:16:12,600 --> 00:16:15,500
11-1 = 10.

263
00:16:15,500 --> 00:16:18,700
We can do the same thing with the -- operator.

264
00:16:18,700 --> 00:16:21,300
So, now, myVar still equals 10.

265
00:16:21,300 --> 00:16:25,400
[Decimal Numbers]

266
00:16:25,400 --> 00:16:28,100
We can also create decimal numbers with Javascript.

267
00:16:28,100 --> 00:16:32,200
These are sometimes referred to 
as floating point numbers or floats.

268
00:16:32,200 --> 00:16:35,500
You can see this is one here – 5,700.

269
00:16:35,500 --> 00:16:36,600
It can be anything.

270
00:16:36,600 --> 00:16:38,700
I’m going to make one called myDecimal.

271
00:16:38,700 --> 00:16:43,900
And then I’m going to store a 0,00009.

272
00:16:43,900 --> 00:16:47,800
Anything that has a decimal point in it, 
is a decimal point number.

273
00:16:47,800 --> 00:16:51,900
[Multiply Decimals]

274
00:16:51,900 --> 00:16:57,000
Multiplying decimal point or floating point numbers 
is the same as multiplying integers.

275
00:16:57,000 --> 00:16:59,900
So, we have 2,000 times 0,000.

276
00:16:59,900 --> 00:17:06,600
If I just change this to 2,500, 
now the answer to product is going to be 5.

277
00:17:06,600 --> 00:17:10,300
And I can console.log that so you can see.

278
00:17:10,300 --> 00:17:13,700
If I just put (product).

279
00:17:13,700 --> 00:17:17,100
And then if we do the browser here, 
you’ll see that the answer is five.

280
00:17:17,100 --> 00:17:21,500
[Divide Decimals]

281
00:17:21,500 --> 00:17:23,800
You can also divide decimal point numbers.

282
00:17:23,800 --> 00:17:27,000
So, in this case I’m going to change this to 4,400.

283
00:17:27,000 --> 00:17:30,400
So, now the answer to quotient is 2,200.

284
00:17:30,400 --> 00:17:33,100
Quotient equals 2,200.

285
00:17:33,100 --> 00:17:36,100
[Finding a Remainder]

286
00:17:36,100 --> 00:17:39,100
The remainder operator looks like a %.

287
00:17:39,100 --> 00:17:43,000
And it gives the remainder of the division 
of two numbers.

288
00:17:43,000 --> 00:17:53,700
So, for instance, if I want to find out the remainder 
of 11 divided by 3, I can do remainder = 11.

289
00:17:53,700 --> 00:17:57,200
And then I’m going to put the percent sign %, 
which is the remainder operator, 3.

290
00:17:57,200 --> 00:18:01,300
And 11 divided by 3 is 9.

291
00:18:01,300 --> 00:18:03,600
11-9 is 2.

292
00:18:03,600 --> 00:18:06,100
So, the remainder is going to be 2.

293
00:18:06,100 --> 00:18:08,600
11 remainder 3 is 2.

294
00:18:08,600 --> 00:18:14,300
The remainder operator is often used to determine 
if a number is even or odd.

295
00:18:14,300 --> 00:18:21,700
If you can divide a number by 2 and the remainder 
is 0, that means the number is even.

296
00:18:21,700 --> 00:18:25,800
[Compound Assignment with Augmented Addition]

297
00:18:25,800 --> 00:18:29,000
It’s common to want to add a number 
to a variable like this.

298
00:18:29,000 --> 00:18:31,700
See, A = A + 12.

299
00:18:31,700 --> 00:18:33,900
Well, A starts at 3, plus 12 is 15.

300
00:18:33,900 --> 00:18:36,300
So, we're just adding 12 to whatever A is.

301
00:18:36,300 --> 00:18:38,500
Here we're adding 9 to whatever B is.

302
00:18:38,500 --> 00:18:41,000
Here, we’re adding 7 to whatever C is.

303
00:18:41,000 --> 00:18:45,800
This is such a common pattern that there’s a shortcut 
to do the same thing.

304
00:18:45,800 --> 00:18:48,600
It’s the += operator.

305
00:18:48,600 --> 00:18:55,200
So, instead of A = A + 12, we can do A += 12.

306
00:18:55,200 --> 00:18:58,000
So, this equals the same thing.

307
00:18:58,000 --> 00:19:00,700
So, instead of B = 9 + B.

308
00:19:00,700 --> 00:19:06,200
We can do B += 9.

309
00:19:06,200 --> 00:19:14,700
So, now we're adding the value to the variable 
and assigning the answer to that variable.

310
00:19:14,700 --> 00:19:19,000
So, again here, we can do += 7.

311
00:19:19,000 --> 00:19:21,500
So, that’s just a shortcut.

312
00:19:21,500 --> 00:19:25,400
[Compound Assignment with Augmented Subtraction] 

313
00:19:25,400 --> 00:19:28,200
Previously, we learned about +=.

314
00:19:28,200 --> 00:19:31,800
Well, -= does the same thing, but subtracting.

315
00:19:31,800 --> 00:19:35,300
So, this says A = A - 6.

316
00:19:35,300 --> 00:19:39,900
We started at 11, minus 6 is going to be 5.

317
00:19:39,900 --> 00:19:42,800
So, the new A is going to be 5.

318
00:19:42,800 --> 00:19:44,700
But we can shorten that.

319
00:19:44,700 --> 00:19:49,900
Instead of A = A - 6, we can do -=.

320
00:19:49,900 --> 00:19:53,600
This is just a shortcut that Javascript has 
that means the same thing.

321
00:19:53,600 --> 00:19:57,500
That means A = A - 6.

322
00:19:57,500 --> 00:19:59,100
But it’s shortened.

323
00:19:59,100 --> 00:20:00,200
Same here.

324
00:20:00,200 --> 00:20:05,000
So, we can do -= 15.
C = C - 1.

325
00:20:05,000 --> 00:20:08,900
We can do C -= 1.

326
00:20:08,900 --> 00:20:17,800
So, it just subtracts the number from the original 
value and then assigns that new value to the variable.

327
00:20:17,800 --> 00:20:21,500
[Compound Assignment 
with Augmented Multiplication]

328
00:20:21,500 --> 00:20:23,800
Here we have A = A * 5.

329
00:20:23,800 --> 00:20:26,500
Well, we can do the same thing as before.

330
00:20:26,500 --> 00:20:32,500
We can shorten this to A *= 5.

331
00:20:32,500 --> 00:20:34,000
So, that means the same thing.

332
00:20:34,000 --> 00:20:39,700
Here, we can do A *= 3.

333
00:20:39,700 --> 00:20:42,400
And then C = C * 10.

334
00:20:42,400 --> 00:20:47,300
We can shorten this to C *= 10.

335
00:20:47,300 --> 00:20:50,300
And that’s another shortcut for Javascript.

336
00:20:50,300 --> 00:20:54,400
[Compound Assignment with Augmented Division]

337
00:20:54,400 --> 00:20:56,900
And there’s also a /=.

338
00:20:56,900 --> 00:20:59,100
So, A = A / 12.

339
00:20:59,100 --> 00:21:03,000
We can do A /=12.

340
00:21:03,000 --> 00:21:08,100
And here, we can just do /=4.

341
00:21:08,100 --> 00:21:11,500
Or /= 11.

342
00:21:11,500 --> 00:21:18,100
So, another way of just dividing the variable by a new 
number and assigning that answer to the variable.

343
00:21:18,100 --> 00:21:22,500
[Declare String Variables]

344
00:21:22,500 --> 00:21:25,000
We’ve already mentioned strings a little bit.

345
00:21:25,000 --> 00:21:28,900
But anytime you have some characters surrounded 
by quotation marks, 

346
00:21:28,900 --> 00:21:34,400
they can either be single quotation marks, 
double quotation marks, or backticks.

347
00:21:34,400 --> 00:21:35,800
It’s a string.

348
00:21:35,800 --> 00:21:37,800
These are called "String literals.”

349
00:21:37,800 --> 00:21:41,700
And you can create them just like you see above.

350
00:21:41,700 --> 00:21:43,300
I’m going to do a few more.

351
00:21:43,300 --> 00:21:48,800
So, var myFirstName = “Beau”.

352
00:21:48,800 --> 00:21:56,300
And var myLastName = “Carnes”.

353
00:21:56,300 --> 00:22:00,200
So, that’s how you create a string in Javascript.

354
00:22:00,200 --> 00:22:04,600
[Escaping Literal Quotes in Strings]

355
00:22:04,600 --> 00:22:08,000
Sometimes your string contains the quote symbol.

356
00:22:08,000 --> 00:22:13,100
Now, normally the quotes identify the beginning 
and the ending of the string.

357
00:22:13,100 --> 00:22:14,900
But what if you assign like this?

358
00:22:14,900 --> 00:22:26,900
“I am a ‘double quoted’ string inside ‘double quotes.’”

359
00:22:26,900 --> 00:22:34,800
I’m actually trying to use these quotes right inside 
the string, 

360
00:22:34,800 --> 00:22:38,900
but the Javascript doesn’t know what to do about it.

361
00:22:38,900 --> 00:22:41,900
It thinks that this is the whole string.

362
00:22:41,900 --> 00:22:47,600
When it sees the first quote inside the string, 
it thinks we're at the end of the string.

363
00:22:47,600 --> 00:22:51,700
So, there’s something called an escape character.

364
00:22:51,700 --> 00:22:59,500
So, if you want to escape a quote, that means 
it will no longer be considered the end of the string.

365
00:22:59,500 --> 00:23:02,300
I’m going to put a \.

366
00:23:02,300 --> 00:23:06,400
So, if I put a \ before each of these quotation marks, 

367
00:23:06,400 --> 00:23:13,500
Javascript no longer interprets 
as being the last character in the string.

368
00:23:13,500 --> 00:23:17,800
So, now you can see this is a full string.

369
00:23:17,800 --> 00:23:24,500
And then if I log this count console.log 
and I put (myStr), 

370
00:23:24,500 --> 00:23:27,900
you’ll see that it’s not going to show 
the quotation marks.

371
00:23:27,900 --> 00:23:32,500
So, I mean it’s not going to show the / and the \.

372
00:23:32,500 --> 00:23:35,200
It shows the quotation marks without the \ 

373
00:23:35,200 --> 00:23:43,000
because when we put \” Javascript knows 
that this should just mean a quotation mark.

374
00:23:43,000 --> 00:23:47,100
[Quoting Strings with Single Quotes]

375
00:23:47,100 --> 00:23:53,300
We talked about escaping a quote character like this, 
where you put a \ before the quote character 

376
00:23:53,300 --> 00:23:59,000
so Javascript knows that this is supposed to be 
a literal quote character inside the string.

377
00:23:59,000 --> 00:24:03,400
However, you’re not going to have to 
escape quote characters very often 

378
00:24:03,400 --> 00:24:06,800
because there are other methods 
of accomplishing the same thing 

379
00:24:06,800 --> 00:24:09,600
of having a quote character within a string.

380
00:24:09,600 --> 00:24:12,500
So, a common way is to use – 

381
00:24:12,500 --> 00:24:18,000
instead of having your string start with double quotes, 
have it start with a single quote.

382
00:24:18,000 --> 00:24:24,700
So, a string can either be surrounded by ‘single quotes’ or “double quotes”.

383
00:24:24,700 --> 00:24:30,200
So, this time we're just going to have ‘single quotes’.

384
00:24:30,200 --> 00:24:37,500
And now I can remove all of these escape characters 
from inside the string here.

385
00:24:37,500 --> 00:24:47,600
Okay, so now you can see that Javascript 
still knows that this is a string, 

386
00:24:47,600 --> 00:24:51,200
even though it has these double quotes inside.

387
00:24:51,200 --> 00:24:55,400
An additional thing you can do is use backticks.

388
00:24:55,400 --> 00:25:02,400
So, if I put backticks before – at the beginning 
and the end of the string, 

389
00:25:02,400 --> 00:25:08,000
now I actually can use single quotes 
and double quotes both within the string.

390
00:25:08,000 --> 00:25:11,900
But right now, I’m just going to focus on showing you 

391
00:25:11,900 --> 00:25:17,500
the double quotes or the single quotes
with the “double quotes” inside.

392
00:25:17,500 --> 00:25:21,900
[Escape Sequences in Strings]

393
00:25:21,900 --> 00:25:27,500
We talked about escaping a double quote 
character by using the \ before the double quote.

394
00:25:27,500 --> 00:25:30,900
There’s actually quite a few other things 
you can escape out.

395
00:25:30,900 --> 00:25:33,800
You can escape out a single quote character.

396
00:25:33,800 --> 00:25:36,100
You can escape out a backslash.

397
00:25:36,100 --> 00:25:38,600
In fact, anytime you’re going to use a \, 

398
00:25:38,600 --> 00:25:41,100
you’re going to have to put two backslashes 

399
00:25:41,100 --> 00:25:46,400
so the Javascript knows that 
you’re not trying to escape a character.

400
00:25:46,400 --> 00:25:55,500
You can also add a new line character, 
or a carriage return, a tab, a backspace, 

401
00:25:55,500 --> 00:26:01,600
or a form feed, all with doing a slash 
and the corresponding letter here.

402
00:26:01,600 --> 00:26:03,900
So, let me show you an example.

403
00:26:03,900 --> 00:26:10,500
I’m going to put a var myString = 
and we're going to make a multiline string.

404
00:26:10,500 --> 00:26:12,800
So, we're going to have the “FirstLine.”

405
00:26:12,800 --> 00:26:18,600
And now, I’m going to put \n to add a second line.

406
00:26:18,600 --> 00:26:21,100
And then I’m going to put a tab.

407
00:26:21,100 --> 00:26:23,600
So, \t for the tab.

408
00:26:23,600 --> 00:26:27,200
And \\ to add a \.

409
00:26:27,200 --> 00:26:29,800
Now, it’s going to say SecondLine.

410
00:26:29,800 --> 00:26:34,800
Now, I’ll do a \ and then I’ll just say ThirdLine.

411
00:26:34,800 --> 00:26:40,400
And if I were able to logout all of that, 
you would see three different lines.

412
00:26:40,400 --> 00:26:45,600
And you would see the tab and then the backslash character.

413
00:26:45,600 --> 00:26:49,200
[Concatenating Strings with Plus Operator]

414
00:26:49,200 --> 00:26:52,900
You can concatenate strings with the + operator.

415
00:26:52,900 --> 00:26:55,400
You can see here that we have two strings.

416
00:26:55,400 --> 00:26:58,400
“I come first” and “I come second”.

417
00:26:58,400 --> 00:27:02,700
They’ve been added together 
or concatenated with this.

418
00:27:02,700 --> 00:27:10,100
So, the ourStr, our string, 
is now one long string that says "I come first.

419
00:27:10,100 --> 00:27:11,900
I come second”.

420
00:27:11,900 --> 00:27:14,200
I’ll give you another example here.

421
00:27:14,200 --> 00:27:20,800
So, we can say, myStr = “This is the start.”

422
00:27:20,800 --> 00:27:25,200
And then I’m going to put a space 
before the end quotation mark 

423
00:27:25,200 --> 00:27:27,700
because when these get concatenated together 

424
00:27:27,700 --> 00:27:30,600
we want there to be a space between 
these two sentences.

425
00:27:30,600 --> 00:27:33,400
And I’ll say "This is the end.”

426
00:27:33,400 --> 00:27:35,900
Now let’s just see what that looks like.

427
00:27:35,900 --> 00:27:38,200
I’ll do a console.log.

428
00:27:38,200 --> 00:27:42,100
And do a (myStr) and let’s see.

429
00:27:42,100 --> 00:27:45,500
If I run this, we can see “This is the start.

430
00:27:45,500 --> 00:27:46,400
This is the end.”

431
00:27:46,400 --> 00:27:48,300
Just one long string.

432
00:27:48,300 --> 00:27:52,400
[Concatenating Strings with Plus Equals Operator]

433
00:27:52,400 --> 00:27:56,500
You can also concatenate strings 
using the += operator.

434
00:27:56,500 --> 00:28:02,500
You can see here in this example 
we have the ourStr = “I come first”.

435
00:28:02,500 --> 00:28:07,300
And then we have the ourString += “I come second.”

436
00:28:07,300 --> 00:28:11,400
So, remember, just like when you’re using numbers, 

437
00:28:11,400 --> 00:28:18,300
+= means that you take whatever is on the end here 
and add it to the variable.

438
00:28:18,300 --> 00:28:21,200
So, we’ve just added "I come second.”

439
00:28:21,200 --> 00:28:23,500
onto the end of “I come first.”

440
00:28:23,500 --> 00:28:25,800
Let’s do another example down here.

441
00:28:25,800 --> 00:28:31,300
myStr = “This is the first sentence.”

442
00:28:31,300 --> 00:28:34,300
And then I’ll put a space at the end 

443
00:28:34,300 --> 00:28:44,800
because we're going to do a, myStr – 
and here I’ll do the += “This is the second sentence.”

444
00:28:44,800 --> 00:28:54,400
Now, if I just do a console.log here of (myStr) 
we should see that those sentences have gone together.

445
00:28:54,400 --> 00:28:56,300
“This is the first sentence.

446
00:28:56,300 --> 00:28:59,000
This is the second sentence.”

447
00:28:59,000 --> 00:29:00,200
Good.

448
00:29:00,200 --> 00:29:04,500
[Constructing Strings with Variables]

449
00:29:04,500 --> 00:29:07,300
You can concatenate strings together with variables.

450
00:29:07,300 --> 00:29:10,500
You can see here ourName = “freeCodeCamp”;.

451
00:29:10,500 --> 00:29:17,100
“Hello, our name is “ and then we add this variable, 
the ourName variable which is freeCodeCamp.

452
00:29:17,100 --> 00:29:19,100
“Hello, our name is freeCodeCamp.

453
00:29:19,100 --> 00:29:20,300
How are you?”

454
00:29:20,300 --> 00:29:22,600
Well, we're going to do the same thing down here.

455
00:29:22,600 --> 00:29:26,900
So, I’m going to do myName = “Beau”;.

456
00:29:26,900 --> 00:29:35,400
And then myStr is going to equal “My name is “ 

457
00:29:35,400 --> 00:29:40,200
And then I’m going to add the variable name 
which is my name.

458
00:29:40,200 --> 00:29:43,600
And then I’ll continue the string here.

459
00:29:43,600 --> 00:29:46,200
That’s supposed to be a + here.

460
00:29:46,200 --> 00:29:50,300
“ and I am well!”

461
00:29:50,300 --> 00:29:58,100
See that I put a space here and here because you 
have to make sure you put appropriate spaces in.

462
00:29:58,100 --> 00:30:00,100
And let’s see what that looks like.

463
00:30:00,100 --> 00:30:02,200
I’ll do a console.log.

464
00:30:02,200 --> 00:30:06,500
I’ll just put (myStr) here.

465
00:30:06,500 --> 00:30:13,600
If I show that "My name is Beau and I am well!” 
Looks good.

466
00:30:13,600 --> 00:30:17,500
[Appending Variables to Strings]

467
00:30:17,500 --> 00:30:21,900
You can append variables to strings 
with this += operator.

468
00:30:21,900 --> 00:30:26,400
You can see where this variable anAdjective 
which is set to the word “awesome”.

469
00:30:26,400 --> 00:30:30,600
And then we have another variable 
"freeCodeCamp is “.

470
00:30:30,600 --> 00:30:34,900
And then we have the ourStr variable += anAdjective.

471
00:30:34,900 --> 00:30:40,900
So, now our string is going to equal 
“freeCodeCame is awesome!”.

472
00:30:40,900 --> 00:30:43,200
So, let me show you another example.

473
00:30:43,200 --> 00:30:51,400
We're going to say someAdjective = “worthwhile”.

474
00:30:51,400 --> 00:31:00,800
And now, I’m going to use the +=, 
so myStr += and then I can put someAdjective.

475
00:31:00,800 --> 00:31:10,600
So, now after we do the myStr += someAdjective, 
myStr is going to say “Learning to code is worthwhile.”

476
00:31:10,600 --> 00:31:14,700
[Find Length of String]

477
00:31:14,700 --> 00:31:17,500
Sometimes you want to find the length of a string.

478
00:31:17,500 --> 00:31:19,100
Javascript makes this easy.

479
00:31:19,100 --> 00:31:21,800
So, we have the firstName is set to “Ada”.

480
00:31:21,800 --> 00:31:26,200
But we just use the .length property 
to find the length.

481
00:31:26,200 --> 00:31:28,500
So, firstName.length.

482
00:31:28,500 --> 00:31:30,500
Remember, firsName is “Ada” here.

483
00:31:30,500 --> 00:31:36,000
And then .length will return an integer, a number 
that has the number of characters in the string.

484
00:31:36,000 --> 00:31:37,600
So, that will be three.

485
00:31:37,600 --> 00:31:39,000
So, let’s try this again.

486
00:31:39,000 --> 00:31:40,400
Here’s another example.

487
00:31:40,400 --> 00:31:42,700
lastNameLength = lastName.

488
00:31:42,700 --> 00:31:45,400
We just have to type in .length.

489
00:31:45,400 --> 00:31:52,900
And just to show you, let me console.log that
and you'll be able to see if I put in (lastNameLength) 

490
00:31:52,900 --> 00:32:00,200
and if I run that you'll see 8 because 
there are 8 characters in the word “Lovelace”.

491
00:32:00,200 --> 00:32:05,000
[Bracket Notation to Find First Character in String]

492
00:32:05,000 --> 00:32:09,800
Bracket notation is a way to get a character 
at a specific index within a string.

493
00:32:09,800 --> 00:32:13,200
So, you can see right here, 
we have the firstName = “Ada”.

494
00:32:13,200 --> 00:32:16,200
And right here we the have firstName.

495
00:32:16,200 --> 00:32:16,800
And then here’s the bracket notation.

496
00:32:16,800 --> 00:32:19,700
You can see there’s brackets with a number inside.

497
00:32:19,700 --> 00:32:27,900
So, most modern programming languages like 
Javascript don’t start counting at 1 like humans do.

498
00:32:27,900 --> 00:32:32,200
They start at 0 which is called "Zero-based Indexing.”

499
00:32:32,200 --> 00:32:39,600
So, with the number 0, that refers to first index 
of the string which would be the A.

500
00:32:39,600 --> 00:32:41,600
So, the A would be 0.

501
00:32:41,600 --> 00:32:44,800
D = 1.
And then A = 2.

502
00:32:44,800 --> 00:32:51,200
So, this first letter of firstName, if we do firstName 
with the bracket notation with a zero, 

503
00:32:51,200 --> 00:32:53,500
that’s going to = A.

504
00:32:53,500 --> 00:32:55,600
So, let me show you another example.

505
00:32:55,600 --> 00:33:01,300
Let’s say we want to get the first letter 
of the last name.

506
00:33:01,300 --> 00:33:05,900
Again, I’m just going to do the bracket notation 
and put a zero here.

507
00:33:05,900 --> 00:33:10,700
If I wanted the second letter, 
the O, I would put a 1 here.

508
00:33:10,700 --> 00:33:14,900
So, if I console.log we can see what it came up with.

509
00:33:14,900 --> 00:33:20,000
So, console.log.
(firstLetterOfLastName).

510
00:33:20,000 --> 00:33:26,400
And if we look in the console "L”
because the first letter of the last name is L.

511
00:33:26,400 --> 00:33:30,100
[String Immutability]

512
00:33:30,100 --> 00:33:35,300
Strings are immutable, meaning 
they cannot be altered once created.

513
00:33:35,300 --> 00:33:38,700
This does not mean that they cannot be changed, 

514
00:33:38,700 --> 00:33:43,600
just that the individual characters of a string literal 
cannot be changed.

515
00:33:43,600 --> 00:33:45,400
So, look at this example.

516
00:33:45,400 --> 00:33:50,600
myStr and then we're going to use bracket notation 
to choose the first letter.

517
00:33:50,600 --> 00:33:52,600
So, it currently says "Jello World”.

518
00:33:52,600 --> 00:33:56,700
We want the first letter to change to an H 
to say “Hello World”.

519
00:33:56,700 --> 00:34:02,200
But if I run that, there’s going to be an error 
because of the immutability of strings.

520
00:34:02,200 --> 00:34:08,900
Now, we can still change this to “Hello World” 
but we can’t just change an individual letter like that.

521
00:34:08,900 --> 00:34:12,600
So, we're going to have to do myStr = 

522
00:34:12,600 --> 00:34:17,100
and I’m just going to have to type in the whole thing 
which is “Hello World”.

523
00:34:17,100 --> 00:34:22,400
And now, it will change to the word “Hello World.”

524
00:34:22,400 --> 00:34:26,500
[Bracket Notation to Find Nth Character in String]

525
00:34:26,500 --> 00:34:30,900
You can use bracket notation to get 
any character position in a string.

526
00:34:30,900 --> 00:34:36,300
So, earlier we did the first position, 
but here’s how you get the second position.

527
00:34:36,300 --> 00:34:38,400
Remember, the 0 index.

528
00:34:38,400 --> 00:34:40,200
So, [1] is the second position.

529
00:34:40,200 --> 00:34:41,900
[0] is the first position.

530
00:34:41,900 --> 00:34:46,400
We can also get the third letter of the last name 
using the brackets.

531
00:34:46,400 --> 00:34:51,000
We’ll just put [2] in the brackets 
to get the third letter of the last name.

532
00:34:51,000 --> 00:34:55,100
[Bracket Notation to Find Last Character in String]

533
00:34:55,100 --> 00:34:58,800
You can also use bracket notation 
to find the last letter in a string 

534
00:34:58,800 --> 00:35:01,800
even if you don’t know how many letters 
are in the string.

535
00:35:01,800 --> 00:35:04,300
You do it based on the length.

536
00:35:04,300 --> 00:35:10,100
So, if you look really here, in the brackets 
we have an expression to be evaluated.

537
00:35:10,100 --> 00:35:13,300
[firstName.length-1].

538
00:35:13,300 --> 00:35:15,400
So, the length is 3.

539
00:35:15,400 --> 00:35:18,100
3-1 is 2.

540
00:35:18,100 --> 00:35:23,400
The reason why we’re doing a -1 
is because remember we count starting at 0.

541
00:35:23,400 --> 00:35:28,400
So .length-1 is going to be the last index of the name.

542
00:35:28,400 --> 00:35:33,200
So, you can do that same thing here 
to get the last letter of the last name, 

543
00:35:33,200 --> 00:35:42,100
I can just do lastName[lastName.length - 1].

544
00:35:42,100 --> 00:35:47,900
And that’s going to get the last letter of the last name 
which is the E right here.

545
00:35:47,900 --> 00:35:52,000
[Bracket Notation to Find Nth-to-Last 
Character in String]

546
00:35:52,000 --> 00:35:55,600
We saw how to use bracket notation 
to get the last letter of a string.

547
00:35:55,600 --> 00:36:00,200
You can also do the third to last letter 
or fourth to last letter.

548
00:36:00,200 --> 00:36:05,700
So, you just subtract however much you want 
from the length of the string.

549
00:36:05,700 --> 00:36:10,300
So, we have the bracket notation, 
[firstName.length - 3].

550
00:36:10,300 --> 00:36:13,000
That’s going to get the third to last letter.

551
00:36:13,000 --> 00:36:15,600
So, we want the second to last letter.

552
00:36:15,600 --> 00:36:18,800
Into this variable here we do something similar.

553
00:36:18,800 --> 00:36:21,700
We just do [lastName.length].

554
00:36:21,700 --> 00:36:28,100
And then we're going to subtract 2 to get 
the second to last character of the string.

555
00:36:28,100 --> 00:36:32,000
[Word Blanks]

556
00:36:32,000 --> 00:36:37,500
We’re going to use our knowledge of strings 
to build a Mad Libs style word game.

557
00:36:37,500 --> 00:36:40,700
In a Mad Lib game you are provided sentences 

558
00:36:40,700 --> 00:36:45,300
with some missing words like 
nouns, verbs, adjectives, and adverbs.

559
00:36:45,300 --> 00:36:49,000
And then you fill in the missing pieces 
with words of your choice 

560
00:36:49,000 --> 00:36:53,800
to make a sentence that could be funny 
and hopefully makes a little bit of sense.

561
00:36:53,800 --> 00:36:56,300
So, let me show you how you do this.

562
00:36:56,300 --> 00:36:59,300
This also uses a function.

563
00:36:59,300 --> 00:37:02,500
Now, we haven’t talked about functions yet.

564
00:37:02,500 --> 00:37:05,700
I’m going to explain those more later.

565
00:37:05,700 --> 00:37:10,000
But for now just go with it because 
that’s not the point of this lesson for now.

566
00:37:10,000 --> 00:37:15,500
But this function called wordBlanks, 
you can call the function 

567
00:37:15,500 --> 00:37:18,100
and you have to pass in certain types of words.

568
00:37:18,100 --> 00:37:23,800
You pass in a noun, an adjective, a verb, 
and an adverb.

569
00:37:23,800 --> 00:37:30,200
So, down here, you can see that 
we're calling the function called wordBlanks.

570
00:37:30,200 --> 00:37:31,800
That’s the function name here.

571
00:37:31,800 --> 00:37:37,300
And we're passing in a noun, 
an adjective, a verb, and an adverb.

572
00:37:37,300 --> 00:37:45,000
So, the point is that we are going to use all these 
words that are passed in to make a sentence.

573
00:37:45,000 --> 00:37:50,000
So, we know that var result = an empty string at first.

574
00:37:50,000 --> 00:37:54,600
And then we have to use all these words in result.

575
00:37:54,600 --> 00:37:58,700
And then the result is going to be returned 
from this function.

576
00:37:58,700 --> 00:38:03,100
And eventually, it’ll be logged out onto this screen 
with this console.log.

577
00:38:03,100 --> 00:38:10,600
So, what I’m going to do here is do result +=.

578
00:38:10,600 --> 00:38:16,800
We're going to use the += to add something 
to this result using all the noun, 

579
00:38:16,800 --> 00:38:19,100
the adjective, the verb, and the adverb.

580
00:38:19,100 --> 00:38:20,700
So, let’s see.

581
00:38:20,700 --> 00:38:30,900
It’s going to say “The “ and then we'll use 
the adjective myAdjective.

582
00:38:30,900 --> 00:38:33,700
In this case, the big.

583
00:38:33,700 --> 00:38:37,300
The big and then let’s put the noun.

584
00:38:37,300 --> 00:38:43,200
myNoun because adjectives are words 
that describe nouns.

585
00:38:43,200 --> 00:38:45,500
The big dog.

586
00:38:45,500 --> 00:38:49,400
And then we're going to say what this now is doing – 
the verb.

587
00:38:49,400 --> 00:38:52,300
myVerb.

588
00:38:52,300 --> 00:38:55,200
The big dog ran.

589
00:38:55,200 --> 00:38:58,400
And then where does he run to?

590
00:38:58,400 --> 00:39:02,100
“to the store ”.

591
00:39:02,100 --> 00:39:05,500
And then we're going to add – 
oh, we need a space here.

592
00:39:05,500 --> 00:39:09,000
So, there’s a space between “ to the store “.

593
00:39:09,000 --> 00:39:14,800
And then we're going to add 
the final adverb.

594
00:39:14,800 --> 00:39:18,000
So, now, we have to add a period.

595
00:39:18,000 --> 00:39:24,500
And there’s one more thing we have to add, 
or a few more things.

596
00:39:24,500 --> 00:39:27,500
So, right now myAdjective, myNoun, myVerb.

597
00:39:27,500 --> 00:39:29,800
And there’s no spaces in between those.

598
00:39:29,800 --> 00:39:33,400
So, if I run that you can see what 
that’s going to look like in the console.

599
00:39:33,400 --> 00:39:34,400
It just said,

600
00:39:34,400 --> 00:39:37,400


601
00:39:37,400 --> 00:39:38,400
with no spaces.

602
00:39:38,400 --> 00:39:41,100
So, we're going to have to add some spaces 
in here also.

603
00:39:41,100 --> 00:39:50,700
Let’s do that.

604
00:39:50,700 --> 00:39:57,600
And now, it’s going to take in the noun, adjective, 
verb, and adverb and then put it into that sentence.

605
00:39:57,600 --> 00:40:03,300
So, one cool thing is we can actually pass in 
some different words.

606
00:40:03,300 --> 00:40:08,100
So, like for instance, if I copy this, I’m going to paste it.

607
00:40:08,100 --> 00:40:13,200
Instead of “dog” I will put for the noun “bike”.

608
00:40:13,200 --> 00:40:18,200
And an adjective I’ll put “slow”.

609
00:40:18,200 --> 00:40:25,300
And then for the verb, I’ll put “flew”.

610
00:40:25,300 --> 00:40:32,400
And the adverb I’ll put “slowly”.

611
00:40:32,400 --> 00:40:37,600
And now if we look in the console 
we have two sentences.

612
00:40:37,600 --> 00:40:40,600
The big dog ran to the store quickly.

613
00:40:40,600 --> 00:40:44,100
The slow bike flew to the store slowly.

614
00:40:44,100 --> 00:40:48,200
[Store Multiple Values with Arrays]

615
00:40:48,200 --> 00:40:52,800
Arrays allow you to store 
several pieces of data in one place.

616
00:40:52,800 --> 00:40:55,700
So, look at this example, ourArray.

617
00:40:55,700 --> 00:40:59,600
Now, arrays always start with a bracket 
and then end with a bracket 

618
00:40:59,600 --> 00:41:01,900
to show the beginning and ending of the array.

619
00:41:01,900 --> 00:41:06,000
And every element in the array 
is separated by a comma.

620
00:41:06,000 --> 00:41:09,200
So, you can see here the first element is a string.

621
00:41:09,200 --> 00:41:11,700
The second element is a number.

622
00:41:11,700 --> 00:41:14,100
And you can have more and more elements.

623
00:41:14,100 --> 00:41:17,300
You just put comma and you can keep adding elements.

624
00:41:17,300 --> 00:41:19,800
And the elements can be any data type.

625
00:41:19,800 --> 00:41:24,500
You can see here we have a string and a number, 

626
00:41:24,500 --> 00:41:31,200
but you can also use arrays or floating numbers 
or really any sort of data type in your array.

627
00:41:31,200 --> 00:41:33,900
So, lets see another example.

628
00:41:33,900 --> 00:41:37,100
So, let’s do myArray = [“Quincy”].

629
00:41:37,100 --> 00:41:43,200
And then for a number we’ll do 1
because Quincy is number 1.

630
00:41:43,200 --> 00:41:46,800
[Nested Arrays]

631
00:41:46,800 --> 00:41:50,300
When one of the elements in an array 
is another array, 

632
00:41:50,300 --> 00:41:54,200
that’s called a nested array 
or a multidimensional array.

633
00:41:54,200 --> 00:41:58,000
You can see here’s the beginning of the array 
and here’s the end of the array.

634
00:41:58,000 --> 00:42:03,800
But the first element in this array is another array 
with two elements of its own.

635
00:42:03,800 --> 00:42:04,800
Same with here.

636
00:42:04,800 --> 00:42:06,400
The second element is an array.

637
00:42:06,400 --> 00:42:09,600
So, this is two arrays within another array.

638
00:42:09,600 --> 00:42:11,800
So, we can do that here.

639
00:42:11,800 --> 00:42:13,200
Here’s another example.

640
00:42:13,200 --> 00:42:20,500
So, let’s our first element in the array will be an array 
with a string and a number.

641
00:42:20,500 --> 00:42:25,300
And then I’ll put a comma to put 
the second element of the array 

642
00:42:25,300 --> 00:42:31,500
which will be another array with a string 
and a number.

643
00:42:31,500 --> 00:42:37,000
[Accesses Array Data with Indexes]

644
00:42:37,000 --> 00:42:41,400
Earlier we learned how to use bracket notation 
to find a specific index in a string.

645
00:42:41,400 --> 00:42:43,900
You can do the same thing with arrays.

646
00:42:43,900 --> 00:42:46,000
So, look at this array, ourArray.

647
00:42:46,000 --> 00:42:48,000
We have three elements.

648
00:42:48,000 --> 00:42:49,800
[50, 60, 70].

649
00:42:49,800 --> 00:42:54,400
And these have the indexes [0, 1, 2].

650
00:42:54,400 --> 00:43:00,600
So, with this ourArray with the bracket notation 
and the [0], that’s going to be index 1, 

651
00:43:00,600 --> 00:43:02,200
which is going to equal 50.

652
00:43:02,200 --> 00:43:04,000
So, we can do the same thing here.

653
00:43:04,000 --> 00:43:07,000
myArray = [50, 60, 70].

654
00:43:07,000 --> 00:43:10,000
So, let’s try to find the first element in that array.

655
00:43:10,000 --> 00:43:18,000
So, var myData = myArray.

656
00:43:18,000 --> 00:43:21,000
And then I’m going to do index [0].

657
00:43:21,000 --> 00:43:23,000
I can do index [1], index [2].

658
00:43:23,000 --> 00:43:27,800
And then if we console.log that, 
we can see for sure what that is.

659
00:43:27,800 --> 00:43:33,300
So, if I put (myData) 
and we can see in the console it’s 50.

660
00:43:33,300 --> 00:43:37,900
[Modify Array Data With Indexes]

661
00:43:37,900 --> 00:43:41,600
You can use array indexes to modify arrays.

662
00:43:41,600 --> 00:43:46,200
Now, we tried to do this earlier with strings 
using bracket notation 

663
00:43:46,200 --> 00:43:50,700
and we were not able to modify a string 
using bracket notation.

664
00:43:50,700 --> 00:43:53,200
But with arrays, you can.

665
00:43:53,200 --> 00:43:56,700
So, the original array is [18, 64, 99].

666
00:43:56,700 --> 00:44:00,100
And then we're going to use the array index of [1].

667
00:44:00,100 --> 00:44:03,100
Now, [1] is going to be the second number.

668
00:44:03,100 --> 00:44:05,400
Remember, [0, 1, 2].

669
00:44:05,400 --> 00:44:08,600
And this number 64 is going to be set to 45.

670
00:44:08,600 --> 00:44:13,200
So, the new array is going to be [18, 45, 99].

671
00:44:13,200 --> 00:44:17,100
Let’s try it again with this, [18, 64, 99].

672
00:44:17,100 --> 00:44:26,200
So, let’s do myArray 
and then instead of doing the second digit, 

673
00:44:26,200 --> 00:44:29,700
I’m going to do the first digit in then array, 
the first index which would be index [0].

674
00:44:29,700 --> 00:44:33,500
And I will say = 45.

675
00:44:33,500 --> 00:44:36,300
So, now this array has been updated.

676
00:44:36,300 --> 00:44:46,400
So, if I do a console.log and then do (myArray], 
we'll see that the array is now [45, 64, 99].

677
00:44:46,400 --> 00:44:51,600
[Access Multi-Dimensional Arrays With Indexes]

678
00:44:51,600 --> 00:44:59,000
You can also use bracket notation to select 
an element in a multi-dimensional or array of arrays.

679
00:44:59,000 --> 00:45:02,800
So, you can see this array here, 
we have our outer array.

680
00:45:02,800 --> 00:45:05,200
But inside that array are more arrays.

681
00:45:05,200 --> 00:45:08,000
The elements of the array are other arrays.

682
00:45:08,000 --> 00:45:13,500
And the last element of the array actually 
has an array in this.

683
00:45:13,500 --> 00:45:16,700
So, this is a three-layer deep array right here.

684
00:45:16,700 --> 00:45:23,800
So, to access an array of arrays or an element 
within an array that’s within an array, 

685
00:45:23,800 --> 00:45:26,300
you use a double bracket notation.

686
00:45:26,300 --> 00:45:31,100
So, if you see this example here, myArray, 
the first bracket is [0].

687
00:45:31,100 --> 00:45:35,500
That’s going to get the first element in the array 
which will be right here.

688
00:45:35,500 --> 00:45:38,900
And then that element is an array.

689
00:45:38,900 --> 00:45:44,200
So, the second bracket would be the index 
of the array within the array.

690
00:45:44,200 --> 00:45:46,500
So, this zero would point to here.

691
00:45:46,500 --> 00:45:52,000
So, let’s try to figure out how we can select 
a value equal to 8.

692
00:45:52,000 --> 00:45:53,600
Well, let’s see.

693
00:45:53,600 --> 00:45:55,500
I see an 8 right here.

694
00:45:55,500 --> 00:45:57,800
So, let’s figure out what this first number should be.

695
00:45:57,800 --> 00:45:59,100
Well, let's count.

696
00:45:59,100 --> 00:46:03,500
Zero, one, two.

697
00:46:03,500 --> 00:46:07,100
So, the third array would be index [2].

698
00:46:07,100 --> 00:46:15,600
Now, we want to go zero, one – now we have to do 
index [1] to get the second number in the third array.

699
00:46:15,600 --> 00:46:18,800
So, let’s test to see if that equals 8.

700
00:46:18,800 --> 00:46:24,800
So, I’ll do a console.log and then do (myData) here.

701
00:46:24,800 --> 00:46:27,300
And we'll see if that equals 8.

702
00:46:27,300 --> 00:46:29,100
And it does.

703
00:46:29,100 --> 00:46:30,500
We did it.

704
00:46:30,500 --> 00:46:34,400
[Manipulate Arrays with push()]

705
00:46:34,400 --> 00:46:38,300
You can have pinned data to the end of an array 
with the push function.

706
00:46:38,300 --> 00:46:41,500
So, see, an array has been set up here, ourArray.

707
00:46:41,500 --> 00:46:46,700
[“Stimpson” "J” "cat”] 
And then we take ourArray right here 

708
00:46:46,700 --> 00:46:53,400
and use the push function to push into the next 
element in the array another array here.

709
00:46:53,400 --> 00:46:56,100
So, now it’s going to look like this.

710
00:46:56,100 --> 00:47:01,200
We can see at the end of the original array, 
we’ve pushed this other array at the end.

711
00:47:01,200 --> 00:47:03,400
So, let’s try it again down here.

712
00:47:03,400 --> 00:47:04,800
We have myArray.

713
00:47:04,800 --> 00:47:08,900
And you can see we have each element 
in the array is another array.

714
00:47:08,900 --> 00:47:15,100
So, I am going to do myArray.push().

715
00:47:15,100 --> 00:47:19,700
And then I can push something on the end here 
which will be like above, another array.

716
00:47:19,700 --> 00:47:24,700
So, this is going to say [“dog”, 3].

717
00:47:24,700 --> 00:47:28,200
And now we've pushed this onto the array.

718
00:47:28,200 --> 00:47:32,700
[Manipulate Arrays with pop()]

719
00:47:32,700 --> 00:47:36,800
We can remove an item from an array 
with the pop() function here.

720
00:47:36,800 --> 00:47:38,600
So, see this pop() here?

721
00:47:38,600 --> 00:47:42,500
And then we know it’s a function because 
of the parenthesis at the end of the word pop.

722
00:47:42,500 --> 00:47:45,500
So, the array starts with [1,2,3].

723
00:47:45,500 --> 00:00:NaN,undefined
So, now we do this -- ourArray.pop() 
and it’s going to remove the last element 

724
00:47:45,500 --> 00:47:57,100
which is the 3 and then it’s going to put it 
right into this variable here.

725
00:47:57,100 --> 00:48:02,300
So, now as you can see down here, 
removedFromOurArray now equals 3.

726
00:48:02,300 --> 00:48:08,200
And then ourArray is going to equal [1,2] 
because the 3 has been popped off.

727
00:48:08,200 --> 00:48:09,800
So, we can do the same thing here.

728
00:48:09,800 --> 00:48:17,000
So, removedFromMyArray = myArray.pop() 

729
00:48:17,000 --> 00:48:23,700
and we can see what the array is going to equal
now if I just do a console.log(myArray).

730
00:48:23,700 --> 00:48:31,900
And if you do this, we can see that the array only has 
the one item, the one array instead of the two arrays.

731
00:48:31,900 --> 00:48:36,600
[Manipulate Arrays with shift()]

732
00:48:36,600 --> 00:48:39,300
The shift function is very similar to the pop function 

733
00:48:39,300 --> 00:48:44,300
except it removes the first element of the array 
instead of the final element.

734
00:48:44,300 --> 00:48:49,500
So, we see the shift function 
on the end of the array here.

735
00:48:49,500 --> 00:48:50,300
And the array is the same as before.

736
00:48:50,300 --> 00:48:54,400
But now the first element “Stimpson” 
is being removed.

737
00:48:54,400 --> 00:49:00,100
After we shift off the first element the array 
is going to equal “J” "cat”.

738
00:49:00,100 --> 00:49:03,600
And the removedFromOurArray 
is going to equal “Stimpson”.

739
00:49:03,600 --> 00:49:06,100
So, let’s do another example down here.

740
00:49:06,100 --> 00:49:08,100
We're going to do a shift() again.

741
00:49:08,100 --> 00:49:11,800
So, I’m going to do = myArray.shift().

742
00:49:11,800 --> 00:49:17,800
And now myArray is just going to equal 
[“Dog”, 3].

743
00:49:17,800 --> 00:49:21,900
And the removedFromMyArray 
is going to equal [“John”, 23].

744
00:49:21,900 --> 00:49:26,200
[Manipulate Arrays with unshift()]

745
00:49:26,200 --> 00:49:30,300
The unshift() function is similar 
to the push() array function.

746
00:49:30,300 --> 00:49:33,300
While push() adds an element to the end of the array, 

747
00:49:33,300 --> 00:49:37,900
unshift() adds at element 
to the beginning of the array.

748
00:49:37,900 --> 00:49:39,900
So, let’s look through this example code.

749
00:49:39,900 --> 00:49:42,700
We have the array – 
[“Stimpson” "J” "cat”].

750
00:49:42,700 --> 00:49:47,000
We're going to shift off the first element,
 remove the first element.

751
00:49:47,000 --> 00:49:49,300
So ourArray is 
[“J” "cat”].

752
00:49:49,300 --> 00:49:55,500
Now, we're going to unshift() or add an element 
at the beginning which is the string “Happy”.

753
00:49:55,500 --> 00:49:59,800
So, the array will now be 
[“Happy” "J” "cat”].

754
00:49:59,800 --> 00:50:01,500
So, let’s try again.

755
00:50:01,500 --> 00:50:06,700
This time the array is 
[[“John”, 23], [“dog”, 3]].

756
00:50:06,700 --> 00:50:11,500
Because of the shift, 
we’ve shifted off the [“John”, 23].

757
00:50:11,500 --> 00:50:15,000
And now I’m going to unshift() something.

758
00:50:15,000 --> 00:50:20,000
So, I’ll do myArray.unshift().

759
00:50:20,000 --> 00:50:24,600
Now we're going to add something 
to the beginning of the array.

760
00:50:24,600 --> 00:50:29,800
We’ll do ([“Paul”, 35]).

761
00:50:29,800 --> 00:50:35,700
So, now the array is just going to be 
[[“Paul”, 35], [“dog”, 3]].

762
00:50:35,700 --> 00:50:39,600
[Shopping List]

763
00:50:39,600 --> 00:50:42,600
Let me give you another example of nested arrays.

764
00:50:42,600 --> 00:50:45,100
This will be a shopping list.

765
00:50:45,100 --> 00:50:47,900
So, inside this array we're going 
to have another array.

766
00:50:47,900 --> 00:50:50,600
And we're going to have items.

767
00:50:50,600 --> 00:50:53,900
Cereal – how many boxes?
3 boxes.

768
00:50:53,900 --> 00:50:57,900
We also need some milk.

769
00:50:57,900 --> 00:51:01,600
Let’s get two cartons of milk.

770
00:51:01,600 --> 00:51:05,700
Let’s get some bananas.

771
00:51:05,700 --> 00:51:12,300
Three bunches of three bananas.

772
00:51:12,300 --> 00:51:18,300
We'll also get some juice.

773
00:51:18,300 --> 00:51:23,800
Two containers of juice.

774
00:51:23,800 --> 00:51:28,600
And finally, we will get some eggs.

775
00:51:28,600 --> 00:51:34,300
We'll get 12 eggs.

776
00:51:34,300 --> 00:51:40,200
And now we've created an array of arrays 
which is our shopping list.

777
00:51:40,200 --> 00:51:44,400
[Write Reusable Code with functions]

778
00:51:44,400 --> 00:51:48,700
Functions allow us to create 
reusable code in Javascript.

779
00:51:48,700 --> 00:51:51,000
This is how a function is set up.

780
00:51:51,000 --> 00:51:53,300
We have the word function.

781
00:51:53,300 --> 00:51:55,800
Then we have the function name.

782
00:51:55,800 --> 00:51:58,300
There’s always parenthesis here.

783
00:51:58,300 --> 00:52:02,200
And you can pass information into the parenthesis.

784
00:52:02,200 --> 00:52:04,300
We'll talk about that later.

785
00:52:04,300 --> 00:52:06,400
And then we have these curly brackets.

786
00:52:06,400 --> 00:52:10,000
So, this is the opening curly bracket {.

787
00:52:10,000 --> 00:52:12,600
And then we have the closing curly bracket }.

788
00:52:12,600 --> 00:52:21,900
And everything inside the curly bracket is run 
anytime the function is called or invoked.

789
00:52:21,900 --> 00:52:30,400
So, here the function is being called by just putting 
the function name with parenthesis after the name.

790
00:52:30,400 --> 00:52:38,100
So, every time this function is called, just like this, 
the console is going to say "Heyya, World”.

791
00:52:38,100 --> 00:52:42,800
So, if we load the console right now 
you can see it says "Heyya, World”.

792
00:52:42,800 --> 00:52:49,900
And if I just copy this and paste it a few times 
we'll see that it’s going to say "Heyya, World.

793
00:52:49,900 --> 00:52:52,200
Heyya, World. 
Heyya, World” in the console.

794
00:52:52,200 --> 00:52:58,400
Since we have run the function three times, 
we see the words “Heyya, World” three times.

795
00:52:58,400 --> 00:53:03,400
So now I’m going to create my own function 
that’s going to be very similar.

796
00:53:03,400 --> 00:53:10,500
So, we'll do function reusable function().

797
00:53:10,500 --> 00:53:14,900
And this time it’s going to 
say something slightly different.

798
00:53:14,900 --> 00:53:24,700
It’s going to say “Hi world” instead of “Heyya, World.”

799
00:53:24,700 --> 00:53:30,800
And now I can call the function down here, 
just like this – reusableFunction.

800
00:53:30,800 --> 00:53:34,300
Oh, forgot to put the parenthesis.

801
00:53:34,300 --> 00:53:35,400
That’s important.

802
00:53:35,400 --> 00:53:40,500
Now you see "Heyya, World” and “Hi World” 
in the console.

803
00:53:40,500 --> 00:53:44,600
[Passing Values to Functions with Arguments]

804
00:53:44,600 --> 00:53:49,400
Parameters are variables 
that act as place holders for the values 

805
00:53:49,400 --> 00:53:52,600
that are to be input to a function when it is called.

806
00:53:52,600 --> 00:53:57,600
So, we have defined a function right here 
called ourFunctionWithargs.

807
00:53:57,600 --> 00:54:02,400
And inside the parenthesis we see the letters (a, b).

808
00:54:02,400 --> 00:54:05,900
Now, these could be any name.

809
00:54:05,900 --> 00:54:08,200
We could call these anything, not just (a,b).

810
00:54:08,200 --> 00:54:10,200
They can really be any words up here.

811
00:54:10,200 --> 00:54:19,000
And that means that when this function is called 
we're going to pass data into the function.

812
00:54:19,000 --> 00:54:21,000
Or input data into the function.

813
00:54:21,000 --> 00:54:26,100
So, you can see the example here 
where we're calling the function.

814
00:54:26,100 --> 00:54:32,100
And instead of saying, (a,b) in the parenthesis, 
we're actually passing the values (10, 5).

815
00:54:32,100 --> 00:54:38,300
So, when the function runs, it can use the information 
that’s passed into the function.

816
00:54:38,300 --> 00:54:42,800
So, in this case it says console.log(a-b).

817
00:54:42,800 --> 00:54:49,500
Well, that’s going to be 10-5 because the numbers 
10 and 5 have been passed into the function.

818
00:54:49,500 --> 00:54:52,200
And that’s going to output 5.

819
00:54:52,200 --> 00:54:56,800
So, I’m going to create a function that’s very similar 
to that that function.

820
00:54:56,800 --> 00:55:02,300
This one is going to be called functionWithArgs.

821
00:55:02,300 --> 00:55:08,500
And it’s also going to accept an (a, b), 
but we could call it anything we want.

822
00:55:08,500 --> 00:55:17,900
And inside instead of subtracting a-b, 
we're going to do (a+b).

823
00:55:17,900 --> 00:55:23,800
Now, I’m just going to call this function 

824
00:55:23,800 --> 00:55:36,900
functionWithArgs and I’ll pass in (10, 5) 
and let’s see what that looks like in the console.

825
00:55:36,900 --> 00:55:40,100
So, first it outputted 5 for this one.

826
00:55:40,100 --> 00:55:42,400
And then it output 10 for this one.

827
00:55:42,400 --> 00:55:46,700
[Global Scope and Functions]

828
00:55:46,700 --> 00:55:50,100
Scope refers to the visibility of variables.

829
00:55:50,100 --> 00:55:55,200
Variables which are defined outside 
of a function block have global scope.

830
00:55:55,200 --> 00:56:00,200
Global scope means they can be seen 
everywhere in your Javascript code.

831
00:56:00,200 --> 00:56:05,000
For instance, I’m going to declare a variable 
right here called myGlobal.

832
00:56:05,000 --> 00:56:07,300
I’ll set it to 10.

833
00:56:07,300 --> 00:56:14,400
Now since this is set outside of a function, 
we can see it anywhere in the whole code.

834
00:56:14,400 --> 00:56:18,300
Even in this function right here called fun2.

835
00:56:18,300 --> 00:56:22,200
We can see that we reference it here and here.

836
00:56:22,200 --> 00:56:24,900
And we're going to be able to see it.

837
00:56:24,900 --> 00:56:27,000
Now, this is an if statement.

838
00:56:27,000 --> 00:56:30,100
Which we will talk more about later.

839
00:56:30,100 --> 00:56:37,500
But we're checking if the type of myGlobal 
does not equal “undefined”.

840
00:56:37,500 --> 00:56:46,600
So, it will not equal “undefined” if it has been defined 
and the program knows about the variable.

841
00:56:46,600 --> 00:56:52,100
Since this is global scope, it does not equal undefined.

842
00:56:52,100 --> 00:56:53,500
It equals 10.

843
00:56:53,500 --> 00:56:56,900
The program knows about the variable 
because this is in global scope.

844
00:56:56,900 --> 00:57:02,000
So, since this function can 
access the myGlobal variable, 

845
00:57:02,000 --> 00:57:11,200
it will run what’s in this if statement where we just 
add to this output variable, myGlobal.

846
00:57:11,200 --> 00:57:13,900
And then we put the value of myGlobal which is 10.

847
00:57:13,900 --> 00:57:22,600
Now, here’s another example where we're going to 
see if the type of oopsGlobal equal “undefined”.

848
00:57:22,600 --> 00:57:24,900
Well, we're going to set that here.

849
00:57:24,900 --> 00:57:32,200
So, it is possible to set a variable without 
using the var keyword.

850
00:57:32,200 --> 00:57:39,100
So, I’m going to set this to oopsGlobal = 5.

851
00:57:39,100 --> 00:57:45,000
So, you can see here that there is no var keyword.

852
00:57:45,000 --> 00:57:55,800
So, normally if you do use a var keyword, since this is 
within a function, it will be scoped to that function.

853
00:57:55,800 --> 00:58:01,000
If we have the var keyword here, 
this would be scoped to this function 

854
00:58:01,000 --> 00:58:04,200
so you would not be able to see it in this function.

855
00:58:04,200 --> 00:58:10,400
However, since we forgot to put the var keyword 
in this example, 

856
00:58:10,400 --> 00:58:15,500
there’s no var keyword, it becomes 
global automatically.

857
00:58:15,500 --> 00:58:21,600
That means you can access it anywhere else 
in the program including here.

858
00:58:21,600 --> 00:58:30,100
So, if we put the var keyword, then oopsGlobal 
would equal “undefined”.

859
00:58:30,100 --> 00:58:34,000
And then we would never have this line in the output.

860
00:58:34,000 --> 00:58:40,400
However, since we did not put the var keyword, 
oopsGlobal = 5 

861
00:58:40,400 --> 00:58:46,400
and this will be added to the output – 
oopsGlobal and then the colon 5.

862
00:58:46,400 --> 00:58:54,700
So, when we console.log the output 
it’s going to say myGlobal 10, oopsGlobal 5.

863
00:58:54,700 --> 00:58:59,300
Now actually it’s not going to say that 
because this is in Scrimba.

864
00:58:59,300 --> 00:59:07,300
And in Scrimba it’s more careful and just enforces 
the fact that you have to use a var keyword.

865
00:59:07,300 --> 00:59:12,300
But if we were in our browser 
it would not enforce the var keyword.

866
00:59:12,300 --> 00:59:18,500
And then it would actually show myGlobal 10, 
oopsGlobal 5.

867
00:59:18,500 --> 00:59:22,800
If this was a little complicated, 
don’t worry about that 

868
00:59:22,800 --> 00:59:29,700
because a lot of these concepts we’ll be going over 
again later with additional examples.

869
00:59:29,700 --> 00:59:34,000
[Local Scope and Functions]

870
00:59:34,000 --> 00:59:41,400
Variables which are declared within a function as well 
as the function parameters have local scope.

871
00:59:41,400 --> 00:59:44,800
That means they’re only visible from 
within the function.

872
00:59:44,800 --> 00:59:46,900
Let me show you what I mean.

873
00:59:46,900 --> 00:59:51,700
If I declare a variable right here, myVar = 5.

874
00:59:51,700 --> 00:59:56,700
So, we've declared this variable inside a function.

875
00:59:56,700 --> 01:00:02,400
So, this variable, myVar is only visible 
inside the function.

876
01:00:02,400 --> 01:00:04,900
So, it says console.log(myVar).

877
01:00:04,900 --> 01:00:07,000
It should console.log the 5.

878
01:00:07,000 --> 01:00:10,000
So, we're going to call the function here.

879
01:00:10,000 --> 01:00:12,300
And it’s going to console.log myVar.

880
01:00:12,300 --> 01:00:17,300
But then the program is going to run this console.log 
that’s outside of the function.

881
01:00:17,300 --> 01:00:20,400
It’s still going to try to access myVar.

882
01:00:20,400 --> 01:00:22,500
And so, let’s see what happens.

883
01:00:22,500 --> 01:00:30,000
You can see in the console that first there’s a 5 
because it console.log within the function, 

884
01:00:30,000 --> 01:00:36,200
then there’s an error because it tried to access 
myVar outside of the function.

885
01:00:36,200 --> 01:00:42,000
So, really, we just need to delete this where we try 
to access the variable outside of the function.

886
01:00:42,000 --> 01:00:45,400
And now there is no error.

887
01:00:45,400 --> 01:00:49,300
[Global vs Local Scope in Functions]

888
01:00:49,300 --> 01:00:54,100
It is possible to have both local and global variables 
with the same name.

889
01:00:54,100 --> 01:01:00,300
When you do this, the local variable takes precedent 
over the global variable.

890
01:01:00,300 --> 01:01:02,300
Let me show you an example.

891
01:01:02,300 --> 01:01:09,200
Here we have a function called myOutfit 
that’s going to return outerWear.

892
01:01:09,200 --> 01:01:11,500
That’s this variable up here.

893
01:01:11,500 --> 01:01:17,400
This is a global variable because 
it is declared outside of the function.

894
01:01:17,400 --> 01:01:25,700
So, when we console.log the output 
of the myOutfit function, 

895
01:01:25,700 --> 01:01:30,800
the myOutfit function is going to return outerWear 
which is the word “T-Shirt”.

896
01:01:30,800 --> 01:01:35,400
So, let’s just check the console 
and you can see, yep "T-Shirt” is there.

897
01:01:35,400 --> 01:01:38,200
However, let’s change this up a bit.

898
01:01:38,200 --> 01:01:48,000
So, you have some space here because 
I’m going to put var outerWear = “sweater”.

899
01:01:48,000 --> 01:01:56,500
So, now if I run this program 
you can see in the console 

900
01:01:56,500 --> 01:02:00,100
it’s going to say “sweater” instead of “T-Shirt”.

901
01:02:00,100 --> 01:02:08,600
It’s because this local variable outerWear took 
precedence over the global variable.

902
01:02:08,600 --> 01:02:13,600
Another interesting thing about this, 
if I do a console.log.

903
01:02:13,600 --> 01:02:22,800
And I console.log the outerWear variable, 
we'll see that it’s still “T-Shirt.”

904
01:02:22,800 --> 01:02:26,700
So, first you see in the console it says 
sweater and T-Shirt.

905
01:02:26,700 --> 01:02:33,100
So, first we console.log this function 
which is sweater – it returns sweater.

906
01:02:33,100 --> 01:02:39,100
And then we console.log the global variable 
which is T-Shirt.

907
01:02:39,100 --> 01:02:43,400
[Return a Value from a Function with Return]

908
01:02:43,400 --> 01:02:46,800
You can return a value from a function 
with this return statement.

909
01:02:46,800 --> 01:02:49,400
So, we have this function here.

910
01:02:49,400 --> 01:02:52,800
And we’re passing a number into it – the num.

911
01:02:52,800 --> 01:02:58,100
And then it’s going to return 
whatever is after the return keyword.

912
01:02:58,100 --> 01:02:59,700
In this case, num-7.

913
01:02:59,700 --> 01:03:02,900
So, here we're going to console.log the function.

914
01:03:02,900 --> 01:03:10,000
And it returns the result of -7, is this 10-7, which is 3.

915
01:03:10,000 --> 01:03:12,700
So, it’s going to console.log the number 3.

916
01:03:12,700 --> 01:03:19,600
If we look in the console, yep, it console.log 
the number 3 because the function returns 3.

917
01:03:19,600 --> 01:03:22,100
Let’s try creating another one.

918
01:03:22,100 --> 01:03:28,500
This function is going to be called timesFive.

919
01:03:28,500 --> 01:03:30,100
Again, we'll pass in a number.

920
01:03:30,100 --> 01:03:33,100
And it’s just going to return something.

921
01:03:33,100 --> 01:03:40,200
It’s going to return the num * 5.

922
01:03:40,200 --> 01:03:46,400
And then just like before, we can test it 
using a console.log (timesFive) 

923
01:03:46,400 --> 01:03:49,100
and we'll pass in the number 5 here.

924
01:03:49,100 --> 01:03:55,700
And if I run this, we'll see that it retuns 
the number 25.

925
01:03:55,700 --> 01:03:59,900
[Understanding Undefined Value Returned 
from a Function]

926
01:03:59,900 --> 01:04:03,300
Functions can have return statements, 
but they don’t have to.

927
01:04:03,300 --> 01:04:07,400
In this case, this function adds 3 to the sum variable 

928
01:04:07,400 --> 01:04:12,000
which is a global variable 
because it’s defined before the function.

929
01:04:12,000 --> 01:04:14,300
It does not return anything.

930
01:04:14,300 --> 01:04:20,500
So, if you don’t specify a return value, 
the return value is just undefined.

931
01:04:20,500 --> 01:04:23,900
Now I’m going to create another function 
that is similar.

932
01:04:23,900 --> 01:04:27,100
This is going to be called addFive().

933
01:04:27,100 --> 01:04:36,300
And this time we'll just do sum = sum+5.

934
01:04:36,300 --> 01:04:42,700
Or we can shorten this to use the +=.

935
01:04:42,700 --> 01:04:47,100
So now that’s going to add five to the sum also, 
but it’s not going to return anything.

936
01:04:47,100 --> 01:04:51,000
So, if we log this out, it would be undefined.

937
01:04:51,000 --> 01:04:55,500
[Assignment with a Returned Value]

938
01:04:55,500 --> 01:04:59,400
It’s simple to assign a returned value to a variable.

939
01:04:59,400 --> 01:05:03,600
See right here we have the function change.

940
01:05:03,600 --> 01:05:09,000
And you pass in a number and it’s going to return 
the result of this mathematical expression.

941
01:05:09,000 --> 01:05:13,600
So, when we call the function change 
and pass in the 10, 

942
01:05:13,600 --> 01:05:19,500
the value that is returned from this function 
is going to be stored in this variable here.

943
01:05:19,500 --> 01:05:22,700
We can do the same thing down here.

944
01:05:22,700 --> 01:05:26,400
First we initialize the variable processed 
and processedArg.

945
01:05:26,400 --> 01:05:31,600
It’s going to return the result 
of this mathematical expression.

946
01:05:31,600 --> 01:05:39,400
So, I can set processed to equal 
what this function returns.

947
01:05:39,400 --> 01:05:42,400
So, I can say processedArg.

948
01:05:42,400 --> 01:05:46,000
And then I’ll just pass in the number 7 here.

949
01:05:46,000 --> 01:05:51,500
And now processed equals the result 
of this mathematical expression.

950
01:05:51,500 --> 01:05:55,400
[Stand in Line]

951
01:05:55,400 --> 01:06:01,200
In computer science a cue is an abstract data structure 
where items are kept in order.

952
01:06:01,200 --> 01:06:07,200
New items can be added to the back of the cue and 
old items are taken off from the front of the cue.

953
01:06:07,200 --> 01:06:15,200
We're going to simulate that right now, some of the 
functionality of a cue using this nextInLine function.

954
01:06:15,200 --> 01:06:20,700
So, the purpose of this is to show 
that in this nextInLine function 

955
01:06:20,700 --> 01:06:24,800
you can add an item to the array that’s passed in.

956
01:06:24,800 --> 01:06:29,200
And then it’s going to return the first item on the list.

957
01:06:29,200 --> 01:06:33,300
For instance, if we have this array right here, 

958
01:06:33,300 --> 01:06:39,500
if we add an item to this array 
it should come after at the end.

959
01:06:39,500 --> 01:06:41,100
So, it should come after 5.

960
01:06:41,100 --> 01:06:44,900
And then it should return the first item on the list.

961
01:06:44,900 --> 01:06:47,200
In this case, it’s 1.

962
01:06:47,200 --> 01:06:50,900
So, you see, we had some console.log set up.

963
01:06:50,900 --> 01:06:55,300
So, it should show what the list looks like, 
the array looks like beforehand.

964
01:06:55,300 --> 01:06:57,800
And then show what it looks like afterwards.

965
01:06:57,800 --> 01:07:04,200
This JSON.stringify is just a way 
to change an array into a string 

966
01:07:04,200 --> 01:07:08,100
that can easily be printed out to the screen.

967
01:07:08,100 --> 01:07:14,700
So, to do this, we're just going to have to do two 
things that we've learned about already.

968
01:07:14,700 --> 01:07:19,500
So, the first thing is to add the item onto the list.

969
01:07:19,500 --> 01:07:25,000
So, we see right here, nextInLine passed 
in the testArr and 6.

970
01:07:25,000 --> 01:07:27,800
So, we're calling this function nextInLine.

971
01:07:27,800 --> 01:07:31,400
We're passing in this testArr here.

972
01:07:31,400 --> 01:07:33,000
And the number 6.

973
01:07:33,000 --> 01:07:36,000
We want the number 6 to be added 
to the end of the array.

974
01:07:36,000 --> 01:07:39,400
So, we'll just do arr.push().

975
01:07:39,400 --> 01:07:43,300
And then I’ll put in (num).

976
01:07:43,300 --> 01:07:45,600
Just like that.

977
01:07:45,600 --> 01:07:47,900
Oh, actually, it’s (item).

978
01:07:47,900 --> 01:07:55,500
So, what we did, we took this array 
that was passed in here which is in this case, testArr.

979
01:07:55,500 --> 01:07:58,000
And we push the time that was passed in.

980
01:07:58,000 --> 01:08:01,000
And in this case here, it’s item 6.

981
01:08:01,000 --> 01:08:06,900
Now we want to return the first item on the list.

982
01:08:06,900 --> 01:08:09,900
We want to remove and return this item.

983
01:08:09,900 --> 01:08:15,100
So, that we console.log here 
it should show the number 1.

984
01:08:15,100 --> 01:08:21,300
So, instead of returning item, 
I’m going to return arr.shift().

985
01:08:21,300 --> 01:08:23,400
That’s what shift does.

986
01:08:23,400 --> 01:08:27,300
Shift moves the first item 
and returns that first item.

987
01:08:27,300 --> 01:08:29,100
So, let’s check this out.

988
01:08:29,100 --> 01:08:35,400
Okay, you can see before, [1,2,3,4,5].

989
01:08:35,400 --> 01:08:40,000
Then we've popped off the 1 
and after it is [2,3,4,5,6].

990
01:08:40,000 --> 01:08:41,400
We did it.

991
01:08:41,400 --> 01:08:45,000
[Boolean Values]

992
01:08:45,000 --> 01:08:48,200
Booleans are another datatype in Javascript.

993
01:08:48,200 --> 01:08:52,100
There are only two values, true or false.

994
01:08:52,100 --> 01:08:57,600
They’re basically little on/off switches 
where true is on and false is off.

995
01:08:57,600 --> 01:09:02,400
They don’t use quotation marks around the Boolean.

996
01:09:02,400 --> 01:09:04,000
See, it just says return false.

997
01:09:04,000 --> 01:09:06,100
So, this is a function here.

998
01:09:06,100 --> 01:09:11,600
It should be indented, where it’s going to 
return false when you call this function.

999
01:09:11,600 --> 01:09:13,600
It could also be true.

1000
01:09:13,600 --> 01:09:15,200
So, we could return true.

1001
01:09:15,200 --> 01:09:20,500
You can use true and false in more places 
than just function returns 

1002
01:09:20,500 --> 01:09:23,500
and we'll be talking more about that later.

1003
01:09:23,500 --> 01:09:26,900
[Use Conditional Logic with If Statements]

1004
01:09:26,900 --> 01:09:31,500
An if statement is used to make decisions in code.

1005
01:09:31,500 --> 01:09:37,200
The keyword If tells Javascript to execute 
the code in the curly braces 

1006
01:09:37,200 --> 01:09:41,000
under certain conditions defined in the parenthesis.

1007
01:09:41,000 --> 01:09:44,000
So, here is a full if statement right here.

1008
01:09:44,000 --> 01:09:48,600
And there’s always parenthesis after the keyword if.

1009
01:09:48,600 --> 01:09:50,400
And here’s the condition.

1010
01:09:50,400 --> 01:09:55,200
So, if the stuff inside these parenthesis 
evaluates to true,

1011
01:09:55,200 --> 01:10:01,900
then the code within these curly braces 
will be evaluated or run.

1012
01:10:01,900 --> 01:10:04,500
So, in this case, it’s a variable.

1013
01:10:04,500 --> 01:10:10,300
So, if the isItTrue variable is true, 
it will return “Yes, it’s true”.

1014
01:10:10,300 --> 01:10:16,700
Now if this is not true, then we'll get to 
the second return statement "No, it’s false”.

1015
01:10:16,700 --> 01:10:21,500
So, this whole function here takes in a variable.

1016
01:10:21,500 --> 01:10:24,400
And we check if that’s true or not.

1017
01:10:24,400 --> 01:10:27,400
So, I’m going to make another example just like this.

1018
01:10:27,400 --> 01:10:31,800
We have another function 
that hasn’t been filled out yet, trueOrFalse.

1019
01:10:31,800 --> 01:10:35,200
And there’s a variable that’s passed in (wasThatTrue).

1020
01:10:35,200 --> 01:10:41,200
So, we'll say if – and then the parenthesis 
(wasThatTrue).

1021
01:10:41,200 --> 01:10:44,600
If that’s true, we're going to return something.

1022
01:10:44,600 --> 01:10:48,000
It will be a string just like before.

1023
01:10:48,000 --> 01:10:52,400
And the string is "Yes, that was true”.

1024
01:10:52,400 --> 01:10:59,700
If it’s not true, then we'll get to the second return 
statement in the function.

1025
01:10:59,700 --> 01:11:02,000
And we'll return a different string.

1026
01:11:02,000 --> 01:11:06,100
We'll return “No, that was false”.

1027
01:11:06,100 --> 01:11:17,600
I’ll just add some semicolons, 
and then I can run this.

1028
01:11:17,600 --> 01:11:19,700
And we'll see what happens.

1029
01:11:19,700 --> 01:11:21,900
Oh, return needs to be spelled correctly.

1030
01:11:21,900 --> 01:11:24,900
So, let me spell return correctly.

1031
01:11:24,900 --> 01:11:29,000
So, before I run this, I’m going to add a console.log.

1032
01:11:29,000 --> 01:11:32,900
So we can console.log the answer.

1033
01:11:32,900 --> 01:11:36,400
So, this is the function call here, true or false.

1034
01:11:36,400 --> 01:11:38,200
We’re passing in true.

1035
01:11:38,200 --> 01:11:41,900
And then we're going to log what is returned here.

1036
01:11:41,900 --> 01:11:43,900
“Yes, that was true”.

1037
01:11:43,900 --> 01:11:50,300
Since we passed in true, this if statement evaluates 
to true and this code is run right here.

1038
01:11:50,300 --> 01:11:54,200
[Comparison with the Equality Operator]

1039
01:11:54,200 --> 01:12:00,900
There are many comparison operators in Javascript 
that will return a Boolean of true or false.

1040
01:12:00,900 --> 01:12:04,100
The most common is the equality operator.

1041
01:12:04,100 --> 01:12:06,800
And it’s often used in an if statement.

1042
01:12:06,800 --> 01:12:09,800
So, here it just says if (val).

1043
01:12:09,800 --> 01:12:13,000
So, we have this whole if statement right here, if (val).

1044
01:12:13,000 --> 01:12:16,000
We're going to see if if (val) = 12.

1045
01:12:16,000 --> 01:12:21,900
Now, to check if it equals 12, 
we're going to have to use the ==.

1046
01:12:21,900 --> 01:12:28,300
That is the equality operator 
and we'll say if (val == 12).

1047
01:12:28,300 --> 01:12:35,900
The reason why we can’t just use a single equal sign 
is that a single equal sign is the assignment operator.

1048
01:12:35,900 --> 01:12:38,600
If we just had a single equal sign, 

1049
01:12:38,600 --> 01:12:45,700
that would mean that we were setting the value 
of the val variable to equal 12.

1050
01:12:45,700 --> 01:12:54,400
We're not trying to set this to equal 12, we're trying 
to check if the value of this variable equals 12, 

1051
01:12:54,400 --> 01:12:56,800
so we have to use the double equal sign.

1052
01:12:56,800 --> 01:13:04,200
So, now, this testEqual function is going to test 
to see if the number we pass in is equal to 12.

1053
01:13:04,200 --> 01:13:07,000
I can do a console.log here.

1054
01:13:07,000 --> 01:13:08,600
Console.log.

1055
01:13:08,600 --> 01:13:14,100
And then we can see what appears 
in the console here.

1056
01:13:14,100 --> 01:13:17,700
“Not Equal” because 10 does not equal 12.

1057
01:13:17,700 --> 01:13:21,900
[Comparison with the Strict Equality Operator]

1058
01:13:21,900 --> 01:13:26,000
We learned about the equality operator 
which is the double equal == sign.

1059
01:13:26,000 --> 01:13:30,600
There’s also the strict equality operator, 
the triple equal sign ===.

1060
01:13:30,600 --> 01:13:36,700
So, here we're checking if 3 equals 3 
with the strict equality operator.

1061
01:13:36,700 --> 01:13:39,800
So, the difference is that the equality operator, 

1062
01:13:39,800 --> 01:13:45,000
the double equals sign attempts to convert 
both values being compared to a common type 

1063
01:13:45,000 --> 01:13:49,900
while the strict equality operator 
does not do the type conversion.

1064
01:13:49,900 --> 01:13:55,000
So, this is going to evaluate to true, the 3 === 3.

1065
01:13:55,000 --> 01:14:02,600
But the 3 === ‘3’ with the string on the side 
is going to evaluate to false.

1066
01:14:02,600 --> 01:14:06,900
Both of these would be true if we were 
using the double equals sign == 

1067
01:14:06,900 --> 01:14:13,100
because the string would be converted 
to a number and it would be equal to true.

1068
01:14:13,100 --> 01:14:20,400
But with the === it does not get converted to 
a number, so it would be evaluated to false – 

1069
01:14:20,400 --> 01:14:23,100
this second one with the three equal signs.

1070
01:14:23,100 --> 01:14:27,200
So-and-so, here, we're just going to use it 
right in this if statement.

1071
01:14:27,200 --> 01:14:30,900
And do === 7.

1072
01:14:30,900 --> 01:14:38,400
So, now we can pass in the number 7 
and it’s going to evaluate to true.

1073
01:14:38,400 --> 01:14:42,600
But if we pass in a string 7, it will evaluate to false.

1074
01:14:42,600 --> 01:14:47,100
[Practice Comparing Different Values]

1075
01:14:47,100 --> 01:14:52,400
We will do one more review with the equality 
operator and the strict equality operator.

1076
01:14:52,400 --> 01:14:57,700
So, if I run this here, we'll see in the console 
it says "Equal” 

1077
01:14:57,700 --> 01:15:02,900
because it’s checking if the number 10 
and the string “10” are equal.

1078
01:15:02,900 --> 01:15:08,700
So, if a = b, the number 10 equals a strict number 10, 
return “Equal”.

1079
01:15:08,700 --> 01:15:15,100
Since we're using the equality operator with 
two equal signs, it performs a type conversion.

1080
01:15:15,100 --> 01:15:18,700
And it converts the string into a number.

1081
01:15:18,700 --> 01:15:23,100
But if we use the strict equality operator 
with three equal signs, 

1082
01:15:23,100 --> 01:15:27,200
I’ll run that again, and you’ll see “Not Equal” 
in the console 

1083
01:15:27,200 --> 01:15:35,000
because now it’s not converting the types 
and it’s just checking if a number is equal to a string, 

1084
01:15:35,000 --> 01:15:37,600
which it’s not, so we get not equal.

1085
01:15:37,600 --> 01:15:41,500
[Comparison with the Inequality Operator]

1086
01:15:41,500 --> 01:15:44,700
Now I will show you the inequality operator 

1087
01:15:44,700 --> 01:15:47,600
which is basically the opposite 
of the equality operator.

1088
01:15:47,600 --> 01:15:53,400
So, I’m going to do the inequality operator 
with an exclamation point and an equal sign.

1089
01:15:53,400 --> 01:16:00,900
In this case, I’m going to see if the value 
is not equal to 99.

1090
01:16:00,900 --> 01:16:06,000
And again, just like the equality operator, 
this does type conversion.

1091
01:16:06,000 --> 01:16:11,200
So, let’s just run this program 
and we'll see it is “Not Equal” 

1092
01:16:11,200 --> 01:16:14,500
because 10 – we passed in 10 
into the function here.

1093
01:16:14,500 --> 01:16:19,500
And 10 is not equal to 99, so we get “Not Equal”.

1094
01:16:19,500 --> 01:16:23,400
[Comparison with the Strict Inequality Operator]

1095
01:16:23,400 --> 01:16:29,100
The strict inequality operator is basically 
the opposite of the strict equality operator.

1096
01:16:29,100 --> 01:16:30,400
Now, it works like this.

1097
01:16:30,400 --> 01:16:36,800
So, it says if (val) – I’m going to do 
if (val) does not equal 17.

1098
01:16:36,800 --> 01:16:39,900
So, this is the strict inequality operator.

1099
01:16:39,900 --> 01:16:42,600
Instead of one equal sign we have two equal signs.

1100
01:16:42,600 --> 01:16:45,600
And that means it’s going to check if this is not true.

1101
01:16:45,600 --> 01:16:48,600
But it’s not going to convert types.

1102
01:16:48,600 --> 01:16:56,600
So, for instance, if we were checking if the number 3 
does not equal the string 3, that would be true.

1103
01:16:56,600 --> 01:17:01,600
So, in this example, we're just checking 
if 10 does not equal 17.

1104
01:17:01,600 --> 01:17:04,400
If we run this, we will see it’s not equal.

1105
01:17:04,400 --> 01:17:08,700
[Comparisons with the Logical And Operator]

1106
01:17:08,700 --> 01:17:11,400
We can also use the greater than operator.

1107
01:17:11,400 --> 01:17:14,700
So, in this function we're checking 
if a value is over 100.

1108
01:17:14,700 --> 01:17:19,000
So, I’m going to put greater than 100.

1109
01:17:19,000 --> 01:17:25,900
And then here we're checking if a value is over 10, 
so I’ll put greater than 10.

1110
01:17:25,900 --> 01:17:27,700
So, here we call the function.

1111
01:17:27,700 --> 01:17:28,900
We pass in 10.

1112
01:17:28,900 --> 01:17:34,900
And if I run that function, you'll see 
“10 or Under” because we're not over 100.

1113
01:17:34,900 --> 01:17:36,000
We’re not over 10.

1114
01:17:36,000 --> 01:17:39,000
10 or under, because we passed in 10.

1115
01:17:39,000 --> 01:17:43,100
[Comparison with the Greater Than 
Or Equal To Operator]

1116
01:17:43,100 --> 01:17:46,800
We can also use the greater than 
or equal to operator.

1117
01:17:46,800 --> 01:17:51,500
So, we'll finish this function by using greater than 
or equal to.

1118
01:17:51,500 --> 01:17:53,800
It’s just a >=.

1119
01:17:53,800 --> 01:17:56,500
And we'll put 20 down here.

1120
01:17:56,500 --> 01:18:01,800
Just greater than or equal to 10.

1121
01:18:01,800 --> 01:18:07,100
If I run that, we should see “10 or Over” 
because we're passing in 10 

1122
01:18:07,100 --> 01:18:08,900
and it’s greater than or equal to 10.

1123
01:18:08,900 --> 01:18:12,800
[Comparisons with the Less Than Operator]

1124
01:18:12,800 --> 01:18:15,500
Now I’ll show you an example 
of the less than operator.

1125
01:18:15,500 --> 01:18:20,800
With this function, we're going to check 
if the value is less than 25.

1126
01:18:20,800 --> 01:18:27,400
And then up here we're checking 
if a value is less than 55.

1127
01:18:27,400 --> 01:18:33,200
So, here, it’s a trick I use to remember which symbol 
is less than and which symbol is more than.

1128
01:18:33,200 --> 01:18:40,200
If you see the less than symbol looks kind of like 
the letter L which is the first letter in less than.

1129
01:18:40,200 --> 01:18:43,000
And then the more than symbol is just the opposite.

1130
01:18:43,000 --> 01:18:47,100
[Comparisons with the Less Than 
Or Equal To Operator]

1131
01:18:47,100 --> 01:18:51,200
And we also have the less than 
or equal to operator we can use in Javascript.

1132
01:18:51,200 --> 01:18:55,800
So, here, we're going to check if it’s less than 
or equal to 12.

1133
01:18:55,800 --> 01:18:59,900
So, we just put the less than operator 12.

1134
01:18:59,900 --> 01:19:03,600
Equal – less than or equal.

1135
01:19:03,600 --> 01:19:04,700
That’s an important part.

1136
01:19:04,700 --> 01:19:10,700
Here it’s the less than or equal to 24 
to make this statement true.

1137
01:19:10,700 --> 01:19:14,800
And if we run, we see “Small Than or Equal to 12”.

1138
01:19:14,800 --> 01:19:16,400
The number 10 we passed in.

1139
01:19:16,400 --> 01:19:20,300
[Comparisons with the Logical And Operator]

1140
01:19:20,300 --> 01:19:24,200
Sometimes you want to check if 2 things 
are true at the same time.

1141
01:19:24,200 --> 01:19:33,100
For instance, you may want to check 
if this value is less than or equal to 50.

1142
01:19:33,100 --> 01:19:41,600
And you also want to check if the value 
is more than or equal to 25.

1143
01:19:41,600 --> 01:19:46,000
So, here we have a nested if statement.

1144
01:19:46,000 --> 01:19:48,700
So, it’s going to check if it’s less than equal to 50 

1145
01:19:48,700 --> 01:19:51,200
and if it’s more than equal to 25, 
then it’s going to return “Yes”.

1146
01:19:51,200 --> 01:19:53,500
But there’s an easier way to do this.

1147
01:19:53,500 --> 01:19:58,800
So, what I’m going to do is copy this 
where it says value is more than or equal to 25, 

1148
01:19:58,800 --> 01:20:02,000
I’m going to delete this nested if statement.

1149
01:20:02,000 --> 01:20:04,900
So, we don’t need that if statement.

1150
01:20:04,900 --> 01:20:09,300
And I’m going to use the And operator.

1151
01:20:09,300 --> 01:20:12,300
So, we have less than or equal to 50.

1152
01:20:12,300 --> 01:20:18,000
And if I put two ampersands, like this, 
that means and.

1153
01:20:18,000 --> 01:20:21,600
Now, I’m going to put value is more than 
or equal to 25.

1154
01:20:21,600 --> 01:20:30,000
So, this says if value is less than or equal to 50 and the value is also more than or equal 25, 

1155
01:20:30,000 --> 01:20:33,300
then we're going to return “Yes.”

1156
01:20:33,300 --> 01:20:36,400
So, both this statement 
and this statement 

1157
01:20:36,400 --> 01:20:40,500
have to be true to get inside 
this if statement here.

1158
01:20:40,500 --> 01:20:44,600
[Comparisons with the Logical Or Operator]

1159
01:20:44,600 --> 01:20:50,300
In this code here, we’re checking 
if the value is not between 10 and 20.

1160
01:20:50,300 --> 01:20:55,600
So, if the value is less than 10, 
we return “Outside”.

1161
01:20:55,600 --> 01:20:59,400
And if the value is more than 20, 
we return “Outside”.

1162
01:20:59,400 --> 01:21:04,200
There is an easier way to do this 
with the logical Or operator.

1163
01:21:04,200 --> 01:21:08,400
So, I’m just going to delete this 
whole if statement here.

1164
01:21:08,400 --> 01:21:11,600
And then I can add an or statement.

1165
01:21:11,600 --> 01:21:15,700
Which is just two pipes.

1166
01:21:15,700 --> 01:21:21,600
So, I’m going to put val is more than 20 here.

1167
01:21:21,600 --> 01:21:29,200
So, now, we're checking if the value is less than 10 
or if the value is more than 20.

1168
01:21:29,200 --> 01:21:32,400
Either way, we're going to return “Outside”.

1169
01:21:32,400 --> 01:21:35,800
And if it’s not true, we'll return “Inside”.

1170
01:21:35,800 --> 01:21:40,200
[Else Statements]

1171
01:21:40,200 --> 01:21:46,400
When an if statement is true, normally the block of 
code right after the if statement will be evaluated.

1172
01:21:46,400 --> 01:21:49,300
And if it’s not true, nothing happens.

1173
01:21:49,300 --> 01:21:55,500
But with an else statement, an alternate block of code 
can be executed when it’s not true.

1174
01:21:55,500 --> 01:21:57,800
So, this is a perfect use case.

1175
01:21:57,800 --> 01:22:01,000
If value is more than 5, the result is bigger than 5.

1176
01:22:01,000 --> 01:22:05,600
If the value is less or equal to 5, 
the result is 5 or smaller.

1177
01:22:05,600 --> 01:22:08,100
We can do this with an else statement.

1178
01:22:08,100 --> 01:22:10,600
So, I’m just going to type in else here.

1179
01:22:10,600 --> 01:22:15,400
And then we can just delete this whole if statement.

1180
01:22:15,400 --> 01:22:16,600
Just like that.

1181
01:22:16,600 --> 01:22:19,600
And now we have if the value is less than 5.

1182
01:22:19,600 --> 01:22:21,300
The result is going to be “Bigger than 5”.

1183
01:22:21,300 --> 01:22:26,700
Else, if it’s not more than 5, 
we'll return “5 or Smaller”.

1184
01:22:26,700 --> 01:22:31,100
[Else If Statements]

1185
01:22:31,100 --> 01:22:35,700
If you have multiple conditions that need to be 
addressed, you can use else if statements.

1186
01:22:35,700 --> 01:22:38,700
It’s a way of chaining if statements together.

1187
01:22:38,700 --> 01:22:41,000
In this example, we have three conditions.

1188
01:22:41,000 --> 01:22:44,700
If value is more than 10, 
we're going to return greater than 10.

1189
01:22:44,700 --> 01:22:50,900
If it’s less than 5, return smaller than 5, 
or else we're going to return 5 and up.

1190
01:22:50,900 --> 01:22:54,700
So, this is a perfect use case for an else if statement.

1191
01:22:54,700 --> 01:22:56,400
So, this is how we do it.

1192
01:22:56,400 --> 01:23:01,800
We’ll do else and then just we're going to add 
the if statement at the end of the else.

1193
01:23:01,800 --> 01:23:03,900
I’m just going to delete all of this stuff.

1194
01:23:03,900 --> 01:23:10,700
So, else if value is less than 5, 
and then we're going to have one final else statement.

1195
01:23:10,700 --> 01:23:15,100
Else – and I’m going to put this statement here.

1196
01:23:15,100 --> 01:23:16,400
This final return.

1197
01:23:16,400 --> 01:23:18,000
Just going to cut that.

1198
01:23:18,000 --> 01:23:20,100
And then paste in right in there.

1199
01:23:20,100 --> 01:23:27,900
So now, instead of using multiple if statements, 
we have the if and then we have the else if, 

1200
01:23:27,900 --> 01:23:29,500
and then we have the else.

1201
01:23:29,500 --> 01:23:33,400
[Logical Order in If Else Statements]

1202
01:23:33,400 --> 01:23:37,300
When you’re using else if statements order 
is very important.

1203
01:23:37,300 --> 01:23:39,600
Let’s look at this example here.

1204
01:23:39,600 --> 01:23:45,000
In this function, first we check if the value 
is less than 10 and return less than 10, 

1205
01:23:45,000 --> 01:23:51,400
then else if we check if the value is less than 5, 
and return less than 5.

1206
01:23:51,400 --> 01:23:56,700
Well, if we look at this example 
and we pass in the number 7.

1207
01:23:56,700 --> 01:24:02,000
If I run this, you’ll see it’s going to say "Less than 10” 
which is what we want.

1208
01:24:02,000 --> 01:24:09,300
However, if we put 3 it’s still just going to say 
“Less than 10”.

1209
01:24:09,300 --> 01:24:15,300
Really, we want this to say "Less than 5” 
because it is actually less than 5.

1210
01:24:15,300 --> 01:24:18,000
However, this is in the wrong order.

1211
01:24:18,000 --> 01:24:21,900
So, what we need to do is change the order.

1212
01:24:21,900 --> 01:24:23,500
So, this should be 5.

1213
01:24:23,500 --> 01:24:25,800
This should be 5.

1214
01:24:25,800 --> 01:24:27,600
And this should be 10.

1215
01:24:27,600 --> 01:24:30,400
And this should be 10.

1216
01:24:30,400 --> 01:24:35,600
So, once the first condition is met, it doesn’t even 
check for the rest of and conditions.

1217
01:24:35,600 --> 01:24:39,500
So, that’s why it’s important to think 
about the order.

1218
01:24:39,500 --> 01:24:42,800
So, if we run this now, yeah "Less than 5”.

1219
01:24:42,800 --> 01:24:44,200
That’s what we want.

1220
01:24:44,200 --> 01:24:48,500
[Chaining If Else Statements]

1221
01:24:48,500 --> 01:24:52,200
You can also chain if and else if statements.

1222
01:24:52,200 --> 01:24:55,600
So, I’m going to complete 
the following challenge here.

1223
01:24:55,600 --> 01:25:00,200
Write chained if/else if statements 
to fulfill the following conditions.

1224
01:25:00,200 --> 01:25:03,500
So, we have these conditions.

1225
01:25:03,500 --> 01:25:06,000
If the number is less than 5, 
we're going to return “Tiny”.

1226
01:25:06,000 --> 01:25:09,000
If it’s less than 10, return “Small”, and so on.

1227
01:25:09,000 --> 01:25:14,500
So, what I’m going to do is actually just copy this 
right here because this is written –

1228
01:25:14,500 --> 01:25:17,500
 part of it is written exactly how 
we want it to be written.

1229
01:25:17,500 --> 01:25:19,500
I’ll just paste it here.

1230
01:25:19,500 --> 01:25:22,700
And I’m going to just add the if and else statements.

1231
01:25:22,700 --> 01:25:25,700
So, it’s going to be if – 
and then we put this in parenthesis 

1232
01:25:25,700 --> 01:25:27,600
because the condition is always in paranthesis.

1233
01:25:27,600 --> 01:25:36,000
If number is less than 5, then we're going to use the 
curly braces and we're going to return “Tiny”.

1234
01:25:36,000 --> 01:25:37,400
So, I’ll just move that up here.

1235
01:25:37,400 --> 01:25:39,000
I’ll cut it and paste it.

1236
01:25:39,000 --> 01:25:42,900
Now, we're going to use an else if statement.

1237
01:25:42,900 --> 01:25:45,200
And I got the curly braces.

1238
01:25:45,200 --> 01:25:49,100
First of all, also I need to put the condition 
in these parenthesis.

1239
01:25:49,100 --> 01:25:51,400
I’m just going to cut this.

1240
01:25:51,400 --> 01:25:53,700
Number is less than 10.

1241
01:25:53,700 --> 01:25:54,800
Put it right here.

1242
01:25:54,800 --> 01:25:57,300
And we're going to return this “Small”.

1243
01:25:57,300 --> 01:26:00,300
So, I’ll put that in the curly braces here.

1244
01:26:00,300 --> 01:26:04,400
And then we have another else if statement.

1245
01:26:04,400 --> 01:26:07,800
Else if and the condition.

1246
01:26:07,800 --> 01:26:10,800
Just like before, the number is less than 15.

1247
01:26:10,800 --> 01:26:12,200
Put that in there.

1248
01:26:12,200 --> 01:26:18,600
We always need the curly braces to show 
what’s going to happen in the if statement.

1249
01:26:18,600 --> 01:26:21,800
So, I’m just cutting and pasting this text again.

1250
01:26:21,800 --> 01:26:25,200
We have an else if.

1251
01:26:25,200 --> 01:26:28,000
And then we have this here.

1252
01:26:28,000 --> 01:26:32,600
And we have return “Large”.

1253
01:26:32,600 --> 01:26:42,200
Another – actually, the final thing 
is just going to be else.

1254
01:26:42,200 --> 01:26:45,800
We don’t even need an else if 
with this statement at the end.

1255
01:26:45,800 --> 01:26:48,100
We don’t even need to put the condition 

1256
01:26:48,100 --> 01:26:51,900
because if it’s more than or equal to 20 
that’s going to be everything else.

1257
01:26:51,900 --> 01:26:54,400
So, I’m just going to cut this.

1258
01:26:54,400 --> 01:26:57,800
We don’t need any of this stuff here.

1259
01:26:57,800 --> 01:27:02,200
And we're just going to return “Large”.

1260
01:27:02,200 --> 01:27:08,800
So, with this one test here, for test 7, 
we can actually console.log that.

1261
01:27:08,800 --> 01:27:11,500
Console.log.

1262
01:27:11,500 --> 01:27:15,200
And see what it returns for 7.

1263
01:27:15,200 --> 01:27:17,000
We can try a few different things.

1264
01:27:17,000 --> 01:27:18,900
Oh, we have an error here.

1265
01:27:18,900 --> 01:27:21,200
Oh, forgot to – I put this parenthesis the wrong way.

1266
01:27:21,200 --> 01:27:24,600
Let’s try that again.

1267
01:27:24,600 --> 01:27:35,100
“Small” but if this is 20, it should be “Huge”.

1268
01:27:35,100 --> 01:27:43,600
And if it’s 19, which would be less than 20, 
we should see “Large”.

1269
01:27:43,600 --> 01:27:45,000
Yep, that worked.

1270
01:27:45,000 --> 01:27:48,600
[Golf Code]

1271
01:27:48,600 --> 01:27:51,400
In the game of golf each hole has a par 

1272
01:27:51,400 --> 01:27:56,600
which means the average number of strokes you’re 
supposed to use to get the ball into the hole.

1273
01:27:56,600 --> 01:28:02,600
So, depending on how far above or below par 
your strokes are, there’s a different nickname.

1274
01:28:02,600 --> 01:28:06,700
So, here are some of the nicknames 
"Hole-in-one!” “Eagle” “Birdie” “Par” 

1275
01:28:06,700 --> 01:28:12,600
and we're going to write a function where you pass in 
the par and you also pass in the strokes.

1276
01:28:12,600 --> 01:28:14,700
You can see up here, par and strokes.

1277
01:28:14,700 --> 01:28:17,400
And it’s going to return the nickname.

1278
01:28:17,400 --> 01:28:20,000
So, that’s what we're going to write.

1279
01:28:20,000 --> 01:28:23,400
You can see this table here shows what we have to do.

1280
01:28:23,400 --> 01:28:28,700
If the strokes are 1, then you get “Hole-in-one!”.

1281
01:28:28,700 --> 01:28:32,300
If the stroke is less than or equal to par-2, 
you get an “Eagle”.

1282
01:28:32,300 --> 01:28:33,500
And so on.

1283
01:28:33,500 --> 01:28:36,700
And we also have this array that’s 
going to make it easier 

1284
01:28:36,700 --> 01:28:39,900
because we can just use things from this array 
instead of typing out the words.

1285
01:28:39,900 --> 01:28:43,300
So, we're going to start with an if statement.

1286
01:28:43,300 --> 01:28:47,200
If – and then we have to put the condition.

1287
01:28:47,200 --> 01:28:55,500
If (strokes) == that’s the equality operator.

1288
01:28:55,500 --> 01:28:59,100
We don’t want to use a single equals sign 
because that would be the assignment operator.

1289
01:28:59,100 --> 01:29:03,200
If it equals 1, then we can return.

1290
01:29:03,200 --> 01:29:07,100
And we can see down here, 
we're going to return “Hole-in-one!”.

1291
01:29:07,100 --> 01:29:09,200
But we can just use it from this names array.

1292
01:29:09,200 --> 01:29:11,000
So, it’s going to be names.

1293
01:29:11,000 --> 01:29:13,300
And this is going to be index zero of the array.

1294
01:29:13,300 --> 01:29:16,300
So, we'll do names and then [0].

1295
01:29:16,300 --> 01:29:19,700
And then we can do an else if.

1296
01:29:19,700 --> 01:29:24,500
Else if – and then we can put the condition, (strokes).

1297
01:29:24,500 --> 01:29:27,500
I have to spell strokes right.

1298
01:29:27,500 --> 01:29:33,000
Strokes.

1299
01:29:33,000 --> 01:29:36,400
And then we can just actually copy this 
right from here.

1300
01:29:36,400 --> 01:29:38,900
Less than or equal to par-2.

1301
01:29:38,900 --> 01:29:49,900
And then we are going to return name 
and this will be the index[1] which is an “Eagle”.

1302
01:29:49,900 --> 01:29:53,100
At this point, I can do some copy and pasting.

1303
01:29:53,100 --> 01:29:56,600
I’m going to copy this whole thing 
because a lot of the rest of this will be else if.

1304
01:29:56,600 --> 01:30:07,600
So, else if strokes is – this time 
it’s going to be equal to par-1.

1305
01:30:07,600 --> 01:30:14,400
And we're going to return “Birdie” 
which is array index[2].

1306
01:30:14,400 --> 01:30:19,700
And I’m going to continue just like this.

1307
01:30:19,700 --> 01:30:29,800
So, this time it’s if strokes equal par, 
we're going to return name index[3].

1308
01:30:29,800 --> 01:30:31,100
See?

1309
01:30:31,100 --> 01:30:33,500
Zero. One. Two. Three.

1310
01:30:33,500 --> 01:30:35,200
It’s going to be the word par up.

1311
01:30:35,200 --> 01:30:38,000
Keep just like this.

1312
01:30:38,000 --> 01:30:41,000
Now it’s going to be par+1.

1313
01:30:41,000 --> 01:30:44,200
And we'll change this to [4].

1314
01:30:44,200 --> 01:30:51,000
Now it’s going to be par+2.

1315
01:30:51,000 --> 01:30:56,200
And we’ll change this to [5] 
which is going to be the double bogie.

1316
01:30:56,200 --> 01:31:07,000
And finally, if strokes is – change this to more than 
or equal to par+3 

1317
01:31:07,000 --> 01:31:12,900
that means you did very poorly 
so you should just go home.

1318
01:31:12,900 --> 01:31:16,800
So, it’s going to be name index[6].

1319
01:31:16,800 --> 01:31:18,600
And we don’t need this anymore.

1320
01:31:18,600 --> 01:31:22,300
So, now we're going to do some tests here.

1321
01:31:22,300 --> 01:31:28,500
I’m going to do a console.log.

1322
01:31:28,500 --> 01:31:31,700
And we're going to pass in the function 
that we're calling.

1323
01:31:31,700 --> 01:31:35,400
So, in this case, the par is 5 
and the strokes are 4.

1324
01:31:35,400 --> 01:31:38,400
So, that should return “Birdie”.

1325
01:31:38,400 --> 01:31:39,500
Let’s see what happens.

1326
01:31:39,500 --> 01:31:41,800
Null.

1327
01:31:41,800 --> 01:31:42,700
Okay.

1328
01:31:42,700 --> 01:31:44,600
That’s not what I expected.

1329
01:31:44,600 --> 01:31:47,300
It’s because this should be names.

1330
01:31:47,300 --> 01:31:52,300
I spelled this wrong.

1331
01:31:52,300 --> 01:31:57,600
That’s why it’s sometimes better to check 
before you go through the whole thing.

1332
01:31:57,600 --> 01:31:58,600
You can test things as you go.

1333
01:31:58,600 --> 01:32:00,000
But let’s do that again.

1334
01:32:00,000 --> 01:32:01,800
Yep "Birdie”.

1335
01:32:01,800 --> 01:32:06,700
And if I type in 2 here "Eagle”.

1336
01:32:06,700 --> 01:32:11,100
If I type in 8, it’s probably going to tell us to go Home.

1337
01:32:11,100 --> 01:32:12,700
“Go Home!” Yep.

1338
01:32:12,700 --> 01:32:14,300
We just completed this challenge.

1339
01:32:14,300 --> 01:32:18,400
[Switch Statements]

1340
01:32:18,400 --> 01:32:23,200
Instead of using chained else if statements 
you can use a switch statement.

1341
01:32:23,200 --> 01:32:29,600
A switch statement tests a value and can have many 
case statements which define various possible values.

1342
01:32:29,600 --> 01:32:32,100
So, let me show you how that works.

1343
01:32:32,100 --> 01:32:34,600
Here we're going to write a switch statement 

1344
01:32:34,600 --> 01:32:37,900
which tests val and sets the answer 
to the following conditions.

1345
01:32:37,900 --> 01:32:41,100
If we pass in 1, the answer should be “alpha”.

1346
01:32:41,100 --> 01:32:43,400
If we pass in 2, the answer should be “beta”.

1347
01:32:43,400 --> 01:32:44,300
And so on.

1348
01:32:44,300 --> 01:32:46,400
So, let me show you how that works.

1349
01:32:46,400 --> 01:32:48,700
We'll just type in the word switch.

1350
01:32:48,700 --> 01:32:50,000
That’s the keyword here.

1351
01:32:50,000 --> 01:32:53,500
And we're testing the val that’s passed 
into this function.

1352
01:32:53,500 --> 01:32:57,400
So, it starts off kind of like an if statement.

1353
01:32:57,400 --> 01:33:04,900
And right now – so, we're going to compare 
the val to the different cases that we have.

1354
01:33:04,900 --> 01:33:09,700
So, we'll have case and the first number 
is going to be 1.

1355
01:33:09,700 --> 01:33:16,100
So, here we're saying if the case of val is 1, if val = 1 

1356
01:33:16,100 --> 01:33:21,200
and it’s using the strict equality operator, 
so it’s like the ===, 

1357
01:33:21,200 --> 01:33:24,700
it’s going to make sure that the type 
of the variable are the same.

1358
01:33:24,700 --> 01:33:27,900
So, a string ‘1’ and a number 1 will not be equal.

1359
01:33:27,900 --> 01:33:42,100
But if the case is 1, then we're going to 
set answer to = “alpha”.

1360
01:33:42,100 --> 01:33:46,200
And then we're going to break.

1361
01:33:46,200 --> 01:33:50,300
Break means that we're at the end 
of that case statement.

1362
01:33:50,300 --> 01:33:54,800
And once you break it, it just goes to the end 
of the switch statement 

1363
01:33:54,800 --> 01:33:57,700
and doesn’t evaluate anything else 
in the switch statement 

1364
01:33:57,700 --> 01:34:02,500
So, we're also going to have case 2.

1365
01:34:02,500 --> 01:34:08,700
And one thing I forgot, that we're going to indent that 
so it’s easier to see the different cases.

1366
01:34:08,700 --> 01:34:14,800
And case 2, the answer is going to equal to “beta”.

1367
01:34:14,800 --> 01:34:18,300
And then we also need the break statement.

1368
01:34:18,300 --> 01:34:25,400
If you don’t have a break statement it will just run 
through to the next case statement automatically.

1369
01:34:25,400 --> 01:34:32,500
So, if the case was 1 and you did not have a break 
here, first it would set the answer to “alpha”.

1370
01:34:32,500 --> 01:34:35,000
And then it would set the answer to “beta”.

1371
01:34:35,000 --> 01:34:37,800
It would just skip over to the next case statement. 

1372
01:34:37,800 --> 01:34:39,600
The break is here.

1373
01:34:39,600 --> 01:34:43,100
It’s going to go out of the
switch statement completely.

1374
01:34:43,100 --> 01:34:46,900
So, it would go – start running the code 
after this last curly bracket.

1375
01:34:46,900 --> 01:34:50,600
So, now we're going to do case 3.

1376
01:34:50,600 --> 01:34:53,100
We’ll just do some copying and pasting here.

1377
01:34:53,100 --> 01:35:00,700
And we're going to have 4 cases 
so I’ll just do the rest of the pasting here.

1378
01:35:00,700 --> 01:35:03,700
So, we’ll have 3 and 4.

1379
01:35:03,700 --> 01:35:11,200
“alpha” “beta” and then we have 
“gamma” and “delta”.

1380
01:35:11,200 --> 01:35:21,700
And we know that the switch statement is over 
because we have this final curly bracket.

1381
01:35:21,700 --> 01:35:24,000
And then we're just going to return answer.

1382
01:35:24,000 --> 01:35:26,800
So, let’s do some tests.

1383
01:35:26,800 --> 01:35:32,000
To really test this, we're going to have to add a 
console.log here to log what it’s going to be.

1384
01:35:32,000 --> 01:35:34,000
And I’ll run this.

1385
01:35:34,000 --> 01:35:35,600
“Alpha” good.

1386
01:35:35,600 --> 01:35:38,900
Now 2 should be “beta”.

1387
01:35:38,900 --> 01:35:42,300
3 should be “gamma”.

1388
01:35:42,300 --> 01:35:43,300
Good.

1389
01:35:43,300 --> 01:35:45,800
And we'll just assume 4 is correct so we're done.

1390
01:35:45,800 --> 01:35:49,400
[Default Option in Switch Statements]

1391
01:35:49,400 --> 01:35:53,100
Now we'll talk to you about the default option 
in a switch statement.

1392
01:35:53,100 --> 01:35:57,700
The default option is kind of like else 
in an if else statement.

1393
01:35:57,700 --> 01:36:02,000
So, here’s a switch statement that’s very similar 
to the one we already saw.

1394
01:36:02,000 --> 01:36:06,400
And it’s inside this function 
where we pass in a value into the function.

1395
01:36:06,400 --> 01:36:08,500
And we're going to check if the value equals a.

1396
01:36:08,500 --> 01:36:11,500
If it equals a the answer is going 
to be sent to “apple”.

1397
01:36:11,500 --> 01:36:14,500
B, answer set to “birds”.
C "cat”.

1398
01:36:14,500 --> 01:36:19,300
So, in this example we can see 
that we passed in here 

1399
01:36:19,300 --> 01:36:25,800
– we passed in the a and it returned “apple” 
because that was one of the options.

1400
01:36:25,800 --> 01:36:27,800
But what if we pass in something else?

1401
01:36:27,800 --> 01:36:32,600
If I pass in the number 2 here it’s going to return 
an empty string.

1402
01:36:32,600 --> 01:36:37,700
That’s because the answer is set to an empty string 
and we never override the answer here 

1403
01:36:37,700 --> 01:36:39,700
so it just returns the empty string.

1404
01:36:39,700 --> 01:36:46,800
What if we want to return something 
anytime a, b, or c is not passed through.

1405
01:36:46,800 --> 01:36:51,400
So, for anything else that’s passed into the function, 
we're going to do default.

1406
01:36:51,400 --> 01:36:53,200
This is like the else statement.

1407
01:36:53,200 --> 01:36:59,200
So, the default, we're going to do answer = “stuff”.

1408
01:36:59,200 --> 01:37:02,600
Again, we're going to have the break.

1409
01:37:02,600 --> 01:37:09,000
But now, whenever we pass in something 
that’s not a, b, or c, it’s going to return “stuff”.

1410
01:37:09,000 --> 01:37:11,800
So, we can pass in 5.

1411
01:37:11,800 --> 01:37:14,300
It’s going to return “stuff”.

1412
01:37:14,300 --> 01:37:20,700
But if I go back to passing in c, one of the things 
we have a case for, it’ll return “cat”.

1413
01:37:20,700 --> 01:37:23,000
And that’s the switch statement.

1414
01:37:23,000 --> 01:37:26,700
[Multiple Identical Options in Switch Statements]

1415
01:37:26,700 --> 01:37:31,500
Sometimes you want a switch statement 
where multiple inputs give the same output.

1416
01:37:31,500 --> 01:37:36,000
Well, that’s easy enough by omitting 
the break statement.

1417
01:37:36,000 --> 01:37:37,900
Let me show you how that works.

1418
01:37:37,900 --> 01:37:40,400
So, let’s get a switch statement here.

1419
01:37:40,400 --> 01:37:45,200
And we're going to have val, 
that’s what’s passed into the function.

1420
01:37:45,200 --> 01:37:53,200
And then this case we want the case 
of 1, 2, and 3 all to return the answer of low.

1421
01:37:53,200 --> 01:37:58,400
So, I can do it like this, case 1 – 
and I can go straight into case 2.

1422
01:37:58,400 --> 01:38:03,200
And then I can go straight into case 3.

1423
01:38:03,200 --> 01:38:08,200
And since I don’t have any break statement 
between these cases, 

1424
01:38:08,200 --> 01:38:11,700
it will just keep going to the next one automatically.

1425
01:38:11,700 --> 01:38:18,100
And now, I’m going to say that 
the answer is going to be set to equal “Low”.

1426
01:38:18,100 --> 01:38:21,500
And here is where I put the break statement.

1427
01:38:21,500 --> 01:38:25,600
Okay, now we're going to do the same thing 
with cases 4 through 6.

1428
01:38:25,600 --> 01:38:28,000
And actually, I’m just going to do 
some copying and pasting.

1429
01:38:28,000 --> 01:38:29,400
I’m going to copy all this.

1430
01:38:29,400 --> 01:38:31,900
And now we're going to paste.

1431
01:38:31,900 --> 01:38:33,500
That’s 4, 5, 6.

1432
01:38:33,500 --> 01:38:35,800
We're going to do the same thing with 7, 8, 9.

1433
01:38:35,800 --> 01:38:38,300
So, I’m going to do copy and paste again.

1434
01:38:38,300 --> 01:38:39,700
And then I’m just going to update the code.

1435
01:38:39,700 --> 01:38:42,200
So, this is going to be 4, 5, 6.

1436
01:38:42,200 --> 01:38:44,700
And we'll have 7, 8, 9.

1437
01:38:44,700 --> 01:38:49,500
And we're going to have “Mid” and “High”.

1438
01:38:49,500 --> 01:38:56,100
So, if the case is 1, 2, or 3 – like for instance, if it’s 1, 
it’s going to pass through 2 and 3 to get low.

1439
01:38:56,100 --> 01:38:57,700
And then it’s going to break about it.

1440
01:38:57,700 --> 01:39:03,200
If it’s 4, 5, or 6, it’s going to pass through to get to 
“Mid” and then it’s going to break out 7, 8, and 9.

1441
01:39:03,200 --> 01:39:05,300
It’s going to pass through to the “High” and break out.

1442
01:39:05,300 --> 01:39:07,300
So, let’s test this out and see.

1443
01:39:07,300 --> 01:39:10,600
Since we're passing in the number 1 here 
it’s going to be “Low”.

1444
01:39:10,600 --> 01:39:14,200
But if we pass in 5, we should get “Mid.”

1445
01:39:14,200 --> 01:39:19,300
And if it’s 7, 8, or 9, we should get “High”.

1446
01:39:19,300 --> 01:39:23,600
[Replacing If Else Chains with Switch]

1447
01:39:23,600 --> 01:39:28,000
Sometimes a switch statement can be easier 
to write and easier to understand 

1448
01:39:28,000 --> 01:39:30,900
than a chain of if else statements.

1449
01:39:30,900 --> 01:39:38,500
So, we're going to change this chain 
of else if statements to become a switch statement.

1450
01:39:38,500 --> 01:39:41,500
So, let’s do that right now.

1451
01:39:41,500 --> 01:39:44,400
So, we're going to start with the switch keyword 

1452
01:39:44,400 --> 01:39:49,000
and we're going to be evaluating 
the value with open curly bracket, 

1453
01:39:49,000 --> 01:39:52,700
and we'll have to make sure to have 
an end curly bracket at the end.

1454
01:39:52,700 --> 01:40:01,100
So, for a case “bob” we're going to set 
the answer to “Marley”.

1455
01:40:01,100 --> 01:40:03,700
And then we need to have a break in here.

1456
01:40:03,700 --> 01:40:13,000
For case 42 we're going to set 
the answer to “The Answer”.

1457
01:40:13,000 --> 01:40:27,500
For case 1 we’ll set the answer to 
“There is no 
1”.

1458
01:40:27,500 --> 01:40:34,500
We need a break up here.

1459
01:40:34,500 --> 01:40:45,800
For case 99 the answer is 
“Missed me by this much!”.

1460
01:40:45,800 --> 01:40:47,600
And then we need a break.

1461
01:40:47,600 --> 01:41:03,400
Now we have for case 7 – 7, 8, 9, and break.

1462
01:41:03,400 --> 01:41:11,100
And now we just changed that chain 
of else if statements into a switch statement.

1463
01:41:11,100 --> 01:41:15,200
[Returning Boolean Values from Functions]

1464
01:41:15,200 --> 01:41:20,400
Here’s a little trick when you want a function 
to return a Boolean, a true or false value.

1465
01:41:20,400 --> 01:41:23,900
You can see in this function, 
we're checking if a is less than b.

1466
01:41:23,900 --> 01:41:27,500
And if so, we return true, else we return false.

1467
01:41:27,500 --> 01:41:35,800
You may remember from before the all comparison 
operators return a Boolean true or false value.

1468
01:41:35,800 --> 01:41:39,400
So, instead of using this if statement here 
we can just – 

1469
01:41:39,400 --> 01:41:46,700
we can actually delete all of this 
and just return the result of this, return – 

1470
01:41:46,700 --> 01:41:51,500
we’re just returning the result of a is less than b.

1471
01:41:51,500 --> 01:41:54,700
So, this is going to be true or false.

1472
01:41:54,700 --> 01:42:00,000
And we can just skip that whole if statement logic 
and just return this.

1473
01:42:00,000 --> 01:42:11,900
So, if we console.log this out, console.log, 
we should be able to see if 10 is less than 15.

1474
01:42:11,900 --> 01:42:14,000
It is less than 15.

1475
01:42:14,000 --> 01:42:14,900
It’s true.

1476
01:42:14,900 --> 01:42:19,900
But if we put a 20 here then it’s false.

1477
01:42:19,900 --> 01:42:24,000
[Returning Early Pattern from Functions]

1478
01:42:24,000 --> 01:42:26,100
We've already seen a few examples of this.

1479
01:42:26,100 --> 01:42:30,200
But you can return early from a function 
with the return statement.

1480
01:42:30,200 --> 01:42:35,900
So, if you see this function right here, 
we return at the very end of the function, 

1481
01:42:35,900 --> 01:42:40,300
so it leaves the function and returns this value 
from the function.

1482
01:42:40,300 --> 01:42:44,600
But you can leave the function any time 
with a return statement.

1483
01:42:44,600 --> 01:42:49,900
So, we're going to modify this function 
so that if a or b are less than 0 

1484
01:42:49,900 --> 01:42:54,200
the function will immediately exit 
with the value of “undefined”.

1485
01:42:54,200 --> 01:42:55,400
So, let’s do that.

1486
01:42:55,400 --> 01:42:57,400
We're going to set an if statement.

1487
01:42:57,400 --> 01:43:05,000
If a is less than 0, or – that’s two pipes.

1488
01:43:05,000 --> 01:43:14,900
B is less than 0 then we're going to return undefined.

1489
01:43:14,900 --> 01:43:22,700
So, we can do a test here, console.log.

1490
01:43:22,700 --> 01:43:25,000
8.

1491
01:43:25,000 --> 01:43:27,900
But what if this is a negative number?

1492
01:43:27,900 --> 01:43:31,100
It’s going to return undefined.

1493
01:43:31,100 --> 01:43:34,600
Scrimba has a little quirk here where it just shows null.

1494
01:43:34,600 --> 01:43:37,800
But in a browser it will show undefined.

1495
01:43:37,800 --> 01:43:41,900
[Counting Cards]

1496
01:43:41,900 --> 01:43:46,000
We are going to create a blackjack 
card counting function.

1497
01:43:46,000 --> 01:43:51,100
So, how card counting works, at least 
how this function is going to work, 

1498
01:43:51,100 --> 01:43:55,400
is that when you see a low card, 
the count goes up.

1499
01:43:55,400 --> 01:43:59,100
And when you see a high card, 
the count goes down.

1500
01:43:59,100 --> 01:44:03,000
And if it’s a middle value card, 
the count stays the same.

1501
01:44:03,000 --> 01:44:07,600
And then when the count is positive, 
the player should bet high.

1502
01:44:07,600 --> 01:44:13,100
And when the count is a zero or negative, 
the player should bet low.

1503
01:44:13,100 --> 01:44:21,300
So, we are going to use a switch statement 
to figure out what card has been passed in 

1504
01:44:21,300 --> 01:44:22,700
and what to do about it.

1505
01:44:22,700 --> 01:44:27,100
You can see that the function looks like this – 
cc and we pass in card.

1506
01:44:27,100 --> 01:44:32,500
And depending on what the card is, 
it’s going to increase this global count variable 

1507
01:44:32,500 --> 01:44:36,000
or it’s going to decrease it, 
or it’s going to stay the same.

1508
01:44:36,000 --> 01:44:39,600
And then we are going to return two things.

1509
01:44:39,600 --> 01:44:41,500
We're not going to return “Change Me”.

1510
01:44:41,500 --> 01:44:48,400
We're going to return the current count value 
and whether the player should hold or bet.

1511
01:44:48,400 --> 01:44:58,000
So, every time you call the cc function it’s going to 
change this count value and return the total count.

1512
01:44:58,000 --> 01:45:00,500
So, let’s see how this is going to work.

1513
01:45:00,500 --> 01:45:04,400
We are going to use the switch statement, like I said.

1514
01:45:04,400 --> 01:45:11,200
And we're going to check the card value 
that was passed in.

1515
01:45:11,200 --> 01:45:18,800
So, if the case is 2, 3, 4, 5, 6, we are going 
to increment the count variable.

1516
01:45:18,800 --> 01:45:22,700
So, we're going to do it like this – case 2.

1517
01:45:22,700 --> 01:45:25,400
I’m going to do some copying and pasting.

1518
01:45:25,400 --> 01:45:30,700
If the case is 2, 3, 4, 5, 6, we'll just have 
to change these values.

1519
01:45:30,700 --> 01:45:36,000
3, 4, 5, 6.

1520
01:45:36,000 --> 01:45:38,900
Now, there are many ways to write any program.

1521
01:45:38,900 --> 01:45:42,400
This could be done with if statements 
and else statements.

1522
01:45:42,400 --> 01:45:47,000
It could be even done with other ways 
that we haven’t even talked about yet.

1523
01:45:47,000 --> 01:45:51,500
As long as the program works, in this case, 
that’s all that matters.

1524
01:45:51,500 --> 01:45:55,600
So, if you find a different way to write this program, 
that’s great.

1525
01:45:55,600 --> 01:46:02,700
So, if the case is 2, 3, 4, 5, or 6, 
we are going to take the count value.

1526
01:46:02,700 --> 01:46:08,000
And if we just do ++, it increments it by 1.

1527
01:46:08,000 --> 01:46:10,300
And then we're going to break.

1528
01:46:10,300 --> 01:46:16,500
Now, if the case is 7, 8, 9 – 
so let’s paste in three of these.

1529
01:46:16,500 --> 01:46:21,100
We’ll do 7, 8, 9.

1530
01:46:21,100 --> 01:46:23,600
Actually, we're going to do nothing.

1531
01:46:23,600 --> 01:46:26,800
The count is not going to change at all.

1532
01:46:26,800 --> 01:46:29,300
So, we don’t even need case 7, 8, or 9.

1533
01:46:29,300 --> 01:46:35,500
So, instead of doing 7, 8, 9, we just need to check 
in the case that something is actually going to happen.

1534
01:46:35,500 --> 01:46:42,600
So, we are going to decrement the count variable 
if we have 10, Jack, Queen, King, or Ace.

1535
01:46:42,600 --> 01:46:45,100
So, that’s what we're going to change this to.

1536
01:46:45,100 --> 01:46:49,000
10 "Jack”.

1537
01:46:49,000 --> 01:46:52,200
“Queen”.

1538
01:46:52,200 --> 01:46:55,200
“King”.

1539
01:46:55,200 --> 01:46:59,300
or “Ace”.

1540
01:46:59,300 --> 01:47:02,500
In this case, we're going to decrement the count.

1541
01:47:02,500 --> 01:47:05,500
So, we're going to do count --.

1542
01:47:05,500 --> 01:47:07,800
So, that’s the same as count = count -1.

1543
01:47:07,800 --> 01:47:12,600
And then we will break.

1544
01:47:12,600 --> 01:47:17,600
Now we've taken care of the count 
and updating the count, 

1545
01:47:17,600 --> 01:47:20,300
now we have to take care of 
what we're going to return.

1546
01:47:20,300 --> 01:47:24,000
We are going to return the count.

1547
01:47:24,000 --> 01:47:30,400
And we're also going to return 
whether we are going to hold or bet.

1548
01:47:30,400 --> 01:47:33,200
So, we're going to actually return a variable.

1549
01:47:33,200 --> 01:47:35,100
But first there’s going to be a space.

1550
01:47:35,100 --> 01:47:41,200
There’s a space between the number 
and then we're going to return the hold variable.

1551
01:47:41,200 --> 01:47:44,700
Now, this is a variable we haven’t created yet.

1552
01:47:44,700 --> 01:47:48,100
Normally, this would be the perfect time 
to use the turn area operator, 

1553
01:47:48,100 --> 01:47:52,500
but we haven’t learn that yet and we're not going to 
learn that for a few more lessons 

1554
01:47:52,500 --> 01:47:53,800
so I won’t use that now.

1555
01:47:53,800 --> 01:47:57,500
We are going to set what that hold bet value is.

1556
01:47:57,500 --> 01:48:01,400
First, we’ll create the holdbet variable.

1557
01:48:01,400 --> 01:48:04,600
Variable holdbet.

1558
01:48:04,600 --> 01:48:09,400
And we’ll set it to ‘Hold’.

1559
01:48:09,400 --> 01:48:27,900
However, if (count) is more than 0, 
then we can set holdbet to equal ‘Bet’.

1560
01:48:27,900 --> 01:48:33,200
So, now this should work.

1561
01:48:33,200 --> 01:48:36,400
Let’s test it out and see 
if we’ve made any mistakes yet.

1562
01:48:36,400 --> 01:48:38,800
holtbet is not defined.

1563
01:48:38,800 --> 01:48:42,200
We have it right here.

1564
01:48:42,200 --> 01:48:44,000
Oh, we spelled that wrong.

1565
01:48:44,000 --> 01:48:47,200
So, instead of holtbet that should be holdbet.

1566
01:48:47,200 --> 01:48:50,000
Okay.

1567
01:48:50,000 --> 01:48:56,200
In this case, we're going to bet 
because we had a bunch of positive numbers 

1568
01:48:56,200 --> 01:48:58,000
and then negative numbers.

1569
01:48:58,000 --> 01:49:06,000
But if we change this to ‘K’ 
and we change this to 10, let’s see what happens.

1570
01:49:06,000 --> 01:49:08,800
Now we're going to hold.

1571
01:49:08,800 --> 01:49:10,400
Okay, it worked.

1572
01:49:10,400 --> 01:49:14,700
[Build Javascript Objects]

1573
01:49:14,700 --> 01:49:17,900
Objects! 
Objects are similar to arrays 

1574
01:49:17,900 --> 01:49:23,800
except that instead of using indexes to access data, 
you use properties.

1575
01:49:23,800 --> 01:49:26,800
So, here’s an object called ourDog.

1576
01:49:26,800 --> 01:49:31,900
Objects are going to be defined with these 
curly braces at the beginning and the end.

1577
01:49:31,900 --> 01:49:33,900
And these are the properties.

1578
01:49:33,900 --> 01:49:38,700
Now, the properties are everything before the colons.

1579
01:49:38,700 --> 01:49:42,200
So, we have “name” that’s a property.

1580
01:49:42,200 --> 01:49:43,300
“legs” is a property.

1581
01:49:43,300 --> 01:49:47,000
And then the values are the things 
after the colons here.

1582
01:49:47,000 --> 01:49:49,300
So, the name is “Camper”.

1583
01:49:49,300 --> 01:49:50,600
The legs, 4.

1584
01:49:50,600 --> 01:49:52,900
Tails, there’s only one tail on this dog.

1585
01:49:52,900 --> 01:49:54,900
And “friends” are “everything”.

1586
01:49:54,900 --> 01:49:58,600
Now you can see that the properties can be strings.

1587
01:49:58,600 --> 01:50:00,200
They can be numbers.

1588
01:50:00,200 --> 01:50:01,100
They can be arrays.

1589
01:50:01,100 --> 01:50:03,900
They can be any datatype in Javascript.

1590
01:50:03,900 --> 01:50:07,300
So, now we are going to create our own dog.

1591
01:50:07,300 --> 01:50:10,300
So, this is going to have a “name”.

1592
01:50:10,300 --> 01:50:14,200
Personally, I like the name “Quincy”.

1593
01:50:14,200 --> 01:50:16,400
So, we'll use that for our dog’s name.

1594
01:50:16,400 --> 01:50:20,100
Also, we're going to have “legs”.

1595
01:50:20,100 --> 01:50:23,500
Unfortunately, our dog has had an accident.

1596
01:50:23,500 --> 01:50:25,100
He only has 3 legs.

1597
01:50:25,100 --> 01:50:33,200
But to make up for only having three legs, 
he does have 2 tails.

1598
01:50:33,200 --> 01:50:40,000
And for “friends”, another unfortunate thing, 
it’s an empty array.

1599
01:50:40,000 --> 01:50:42,100
He has no friends.

1600
01:50:42,100 --> 01:50:43,500
Okay.

1601
01:50:43,500 --> 01:50:45,700
We’ve now created our own object.

1602
01:50:45,700 --> 01:50:50,100
[Accessing Object Properties with Dot Notation]

1603
01:50:50,100 --> 01:50:53,800
There are two main ways to access a property 
on an object.

1604
01:50:53,800 --> 01:50:56,700
The first I will talk about is dot notation.

1605
01:50:56,700 --> 01:50:58,600
So, we have this testObj.

1606
01:50:58,600 --> 01:51:01,500
And we have “hat” “shirt” and “shoes”.

1607
01:51:01,500 --> 01:51:03,800
And we want to find out the value of these properties.

1608
01:51:03,800 --> 01:51:08,200
So, right here the hatvalue 
we're going to set to testObj.

1609
01:51:08,200 --> 01:51:10,900
Now here’s where we use the dot notation.

1610
01:51:10,900 --> 01:51:15,700
We just put a dot or a period 
and then I put the name of the property, .hat.

1611
01:51:15,700 --> 01:51:20,300
And then for the shirt value, I will do .shirt.

1612
01:51:20,300 --> 01:51:23,500
So, see this word right here is just a word here.

1613
01:51:23,500 --> 01:51:27,600
So, the value of hatValue, testObject.hat 
is now going to be “ballcap”.

1614
01:51:27,600 --> 01:51:32,200
And the value of the shirtValue is going to be “jersey”

1615
01:51:32,200 --> 01:51:36,800
[Accessing Object Properties with Bracket Notation]

1616
01:51:36,800 --> 01:51:44,100
Besides using dot notation you can also use bracket 
notation to access a property in an object.

1617
01:51:44,100 --> 01:51:51,400
You can use bracket notation anytime 
but it is required if the name has a space in it.

1618
01:51:51,400 --> 01:51:56,200
You can see in this object we have three properties.

1619
01:51:56,200 --> 01:51:58,000
And each of them have a space.

1620
01:51:58,000 --> 01:52:03,500
So, to get the value of these properties 
we're going to have to these bracket notation.

1621
01:52:03,500 --> 01:52:06,100
So, the entreeValue we're going to do testObj.

1622
01:52:06,100 --> 01:52:07,700
That’s the name of the object.

1623
01:52:07,700 --> 01:52:11,400
And then we're going to put brackets 
kind of like an array index.

1624
01:52:11,400 --> 01:52:13,900
So, you need the opening and closing brackets.

1625
01:52:13,900 --> 01:52:18,200
And inside we will put the name of the property.

1626
01:52:18,200 --> 01:52:20,500
So, I’ll do “an entree”.

1627
01:52:20,500 --> 01:52:25,500
And then we can do it again down here 
for the drink value.

1628
01:52:25,500 --> 01:52:31,300
I’ll use a single quote this time instead of a double 
quote to show that each of those will work.

1629
01:52:31,300 --> 01:52:34,000
‘the drink’.

1630
01:52:34,000 --> 01:52:37,200
And then we need the closing brackets here.

1631
01:52:37,200 --> 01:52:42,300
So now, entreeValue is set to equal hamburger.

1632
01:52:42,300 --> 01:52:45,700
And drinkValue is set to equal “water”.

1633
01:52:45,700 --> 01:52:50,000
[Accessing Object Properties with Variables]

1634
01:52:50,000 --> 01:52:55,300
Bracket notation can also be used to look up 
object properties using variables.

1635
01:52:55,300 --> 01:52:57,800
So, here we have this testObj.

1636
01:52:57,800 --> 01:53:01,500
We have these different numbers associated 
with these names here.

1637
01:53:01,500 --> 01:53:06,100
And we are going to set this variable 
to be one of the numbers.

1638
01:53:06,100 --> 01:53:08,800
So, I’ll set this to be 16.

1639
01:53:08,800 --> 01:53:14,100
So, now we can – in this testObj, 16 is “Montana”.

1640
01:53:14,100 --> 01:53:18,400
And we can look that up using the variable name 
instead of the number.

1641
01:53:18,400 --> 01:53:22,800
So, instead of putting 16, I’m going 
to put [playerNumber] in here.

1642
01:53:22,800 --> 01:53:29,400
And now player is set to the word, 
the string "Montana”.

1643
01:53:29,400 --> 01:53:33,700
And we use these variable to look up 
the object property.

1644
01:53:33,700 --> 01:53:37,900
[Updating Object Properties]

1645
01:53:37,900 --> 01:53:41,100
We can use dot notation to update object properties.

1646
01:53:41,100 --> 01:53:44,100
Here you can see an object called ourDog.

1647
01:53:44,100 --> 01:53:46,800
It has a name, legs, tails, friends.

1648
01:53:46,800 --> 01:53:49,100
And the name is “Camper”.

1649
01:53:49,100 --> 01:53:53,400
However, here we used dot notation ourDog.name.

1650
01:53:53,400 --> 01:53:59,200
And use the assignment operator, the equals sign, 
to set the name to “Happy Camper”.

1651
01:53:59,200 --> 01:54:02,800
So, if we do console.log on ourDog.name 

1652
01:54:02,800 --> 01:54:06,500
it would no longer be “Camper” 
it would be “Happy Camper”.

1653
01:54:06,500 --> 01:54:09,700
Well, we have another dog here 
with the name of “Coder”.

1654
01:54:09,700 --> 01:54:13,000
But we want to change 
the name to “Happy Coder”.

1655
01:54:13,000 --> 01:54:14,900
So, that’s what I’ll do right here.

1656
01:54:14,900 --> 01:54:22,900
So, myDog.name = “Happy Coder”.

1657
01:54:22,900 --> 01:54:29,500
So, just like above, we use dot notation 
to set the object property to a new value.

1658
01:54:29,500 --> 01:54:33,900
[Add New Properties to an Object]

1659
01:54:33,900 --> 01:54:38,700
You can add new properties to an object 
using dot notation or bracket notation.

1660
01:54:38,700 --> 01:54:41,200
So, here’s an example right here.

1661
01:54:41,200 --> 01:54:43,500
We have this object, ourDog.

1662
01:54:43,500 --> 01:54:45,800
And there’s four properties here.

1663
01:54:45,800 --> 01:54:48,100
But down here we're adding a new property.

1664
01:54:48,100 --> 01:54:50,800
ourDog.bark = “bow-wow”.

1665
01:54:50,800 --> 01:54:56,100
So, it had four properties but now it has 
5 properties as the property bark as well.

1666
01:54:56,100 --> 01:55:00,700
Now down here we'll add a property 
to the myDog object.

1667
01:55:00,700 --> 01:55:03,400
So, we can do myDog.

1668
01:55:03,400 --> 01:55:08,000
And then here I’m going to use bracket notation 
instead of dot notation.

1669
01:55:08,000 --> 01:55:09,600
‘bark’.

1670
01:55:09,600 --> 01:55:13,900
I’m going to set that to equal “woof”.

1671
01:55:13,900 --> 01:55:17,400
And because he’s yelling it 
we’ll have an exclamation point.

1672
01:55:17,400 --> 01:55:20,100
And that’s how you add properties to objects.

1673
01:55:20,100 --> 01:55:23,800
[Delete Properties From an Object]

1674
01:55:23,800 --> 01:55:26,300
It’s simple to delete a property from an object.

1675
01:55:26,300 --> 01:55:29,300
Our ourDog object has all these properties.

1676
01:55:29,300 --> 01:55:32,900
And with the delete keyword, delete ourDog.bark.

1677
01:55:32,900 --> 01:55:39,300
So, now this property here, the bark, has been deleted 
and is no longer in the object after we’ve deleted it.

1678
01:55:39,300 --> 01:55:41,600
So, we can do the same thing down here.

1679
01:55:41,600 --> 01:55:48,500
And this time we will delete the tails property 
myDog.tails.

1680
01:55:48,500 --> 01:55:53,100
So, now the myDog object no longer 
has a tails property.

1681
01:55:53,100 --> 01:55:57,200
[Using Objects for Lookups]

1682
01:55:57,200 --> 01:56:00,400
Objects can be thought of as a key value storage 
like a dictionary.

1683
01:56:00,400 --> 01:56:03,600
You can use an object too lookup values.

1684
01:56:03,600 --> 01:56:08,900
So, in this case we have a switch statement 
that returns certain values.

1685
01:56:08,900 --> 01:56:12,300
So, when you pass in “alpha” to the function 
it returns “Adams”.

1686
01:56:12,300 --> 01:56:15,100
If you pass in “bravo” it returns “Boston”.

1687
01:56:15,100 --> 01:56:20,100
We can replace this switch statement with an object 

1688
01:56:20,100 --> 01:56:24,400
and use the object for lookups 
instead of the switch statement.

1689
01:56:24,400 --> 01:56:26,500
Let me show you how that’s down.

1690
01:56:26,500 --> 01:56:30,600
I’m going to create var lookup.

1691
01:56:30,600 --> 01:56:32,600
This is going to be an object here.

1692
01:56:32,600 --> 01:56:37,000
And the object is going to have 
a bunch of key value pairs.

1693
01:56:37,000 --> 01:56:45,000
So, we have alpha 
and that’s going to be “Adams”.

1694
01:56:45,000 --> 01:56:48,900
And then we have “bravo”.

1695
01:56:48,900 --> 01:56:55,000
And the value for “bravo” 
is going to be “Boston”.

1696
01:56:55,000 --> 01:56:58,200
And that’s it.

1697
01:56:58,200 --> 01:57:10,500
So, we can now delete this whole switch statement 
and now we can say result = lookup.

1698
01:57:10,500 --> 01:57:15,600
And bracket notation we put the value 
that was passed in.

1699
01:57:15,600 --> 01:57:22,200
And then I forgot one thing which was the equals sign 
here because lookup equals this object.

1700
01:57:22,200 --> 01:57:23,800
And let’s do a test.

1701
01:57:23,800 --> 01:57:30,200
So, let me put console.log 
so we can actually see what happens here.

1702
01:57:30,200 --> 01:57:34,100
So, if we do “charlie” we're going to get “Chicago”.

1703
01:57:34,100 --> 01:57:41,200
If we do “foxtrot” the result will be “frank”.

1704
01:57:41,200 --> 01:57:42,800
So, it works.

1705
01:57:42,800 --> 01:57:46,900
[Testing Objects for Properties]

1706
01:57:46,900 --> 01:57:52,400
You can check if an object has a property 
with the hasown property method.

1707
01:57:52,400 --> 01:57:57,300
Let me show you how to use this method 
and finish making this function 

1708
01:57:57,300 --> 01:58:01,500
where we check if an object has a specific property.

1709
01:58:01,500 --> 01:58:04,500
If it doesn’t have the property 
we’ll return “Not found”.

1710
01:58:04,500 --> 01:58:07,200
So, let me show you how that’s going to work.

1711
01:58:07,200 --> 01:58:14,200
We’ll do myObj – that’s the object up above.
.hasOwnProperty.

1712
01:58:14,200 --> 01:58:18,800
And then we pass in the property 
we're going to check which is checkProp.

1713
01:58:18,800 --> 01:58:23,800
This is either going to come back as true or false 
if it has the property.

1714
01:58:23,800 --> 01:58:26,100
So, let’s make this into an if statement.

1715
01:58:26,100 --> 01:58:30,200
if (myObj.hasOwnProperty(checkProp)).

1716
01:58:30,200 --> 01:58:43,100
But if that’s true, we're going to return myObj 
and then use bracket notation [checkProp].

1717
01:58:43,100 --> 01:58:45,800
So, we're going to return the value of that property.

1718
01:58:45,800 --> 01:58:54,500
Else we're going to return “Not Found”.

1719
01:58:54,500 --> 01:58:59,300
So, let’s take off this other return statement.

1720
01:58:59,300 --> 01:59:01,200
And I’ll do a test.

1721
01:59:01,200 --> 01:59:07,100
So, when we pass in “gift” here, we returned “pony”.

1722
01:59:07,100 --> 01:59:09,400
But let’s say we pass in “hello.”

1723
01:59:09,400 --> 01:59:12,800
Load that "Not Found”.

1724
01:59:12,800 --> 01:59:14,700
Okay, it works.

1725
01:59:14,700 --> 01:59:19,000
[Manipulating Complex Objects]

1726
01:59:19,000 --> 01:59:22,400
A Javascript object is a way to store flexible data.

1727
01:59:22,400 --> 01:59:27,500
So, you can store strings, numbers, and arrays.

1728
01:59:27,500 --> 01:59:29,500
And even other objects.

1729
01:59:29,500 --> 01:59:33,400
So, in this example we have an array called myMusic.

1730
01:59:33,400 --> 01:59:37,100
We can see it’s an array because 
we have the open bracket and closed bracket.

1731
01:59:37,100 --> 01:59:40,300
But inside the array are objects.

1732
01:59:40,300 --> 01:59:42,600
So, this is one of the objects.

1733
01:59:42,600 --> 01:59:47,400
And inside the objects are all these key value pairs 
with the strings and the numbers and so on.

1734
01:59:47,400 --> 01:59:49,700
So, I’m going to add another object.

1735
01:59:49,700 --> 01:59:54,700
So, since this is an array, after each element 
in an array, you have to have a comma.

1736
01:59:54,700 --> 01:59:55,900
So, I’m going to add a comma here.

1737
01:59:55,900 --> 02:00:00,400
And then I’m going to add my next record 
right below this comment here.

1738
02:00:00,400 --> 02:00:05,300
And we're going to have just like above, 
we're going to have an “artist”.

1739
02:00:05,300 --> 02:00:08,500
The artist is going to be “Beau Carnes”.

1740
02:00:08,500 --> 02:00:11,400
And then we have a “title”.

1741
02:00:11,400 --> 02:00:15,800
The title will be “Cereal Man”.

1742
02:00:15,800 --> 02:00:28,100
“release_year” will be “2003”.

1743
02:00:28,100 --> 02:00:36,200
And for “formats” this is going to be an array, 
just like above.

1744
02:00:36,200 --> 02:00:38,000
So, we can have any format.

1745
02:00:38,000 --> 02:00:41,200
I’m going to put “YouTube video”.

1746
02:00:41,200 --> 02:00:49,900
And now we've created a second object 
in our myMusic array.

1747
02:00:49,900 --> 02:00:55,100
And each object holds data and a property 
which is the key value format.

1748
02:00:55,100 --> 02:01:00,000
This is very similar to JSON 
which we will talk more about later.

1749
02:01:00,000 --> 02:01:03,700
[Accessing Nested Objects]

1750
02:01:03,700 --> 02:01:07,800
Here we have an object with 
other objects nested inside that.

1751
02:01:07,800 --> 02:01:14,900
So, in order to access sub-properties of an object 
you can chain together the dot or bracket notation.

1752
02:01:14,900 --> 02:01:18,100
So, I’m trying to get the gloveBoxContents.

1753
02:01:18,100 --> 02:01:26,800
So, I’m going to take away this undefined here 
and I’ll do a myStorage.car.inside.

1754
02:01:26,800 --> 02:01:33,200
And then now the next thing "car” “inside” 
and the last thing is “glove box”.

1755
02:01:33,200 --> 02:01:36,200
Because there’s a space here 
we have to use bracket notation.

1756
02:01:36,200 --> 02:01:43,300
So, I’m going to use bracket notation on the end here 
and say “glove box”.

1757
02:01:43,300 --> 02:01:48,100
And now if we run this – 
see, we're going to console.log.

1758
02:01:48,100 --> 02:01:49,700
So, let’s see if we get the contents here.

1759
02:01:49,700 --> 02:01:51,800
Yeah "maps”.

1760
02:01:51,800 --> 02:01:52,700
It worked.

1761
02:01:52,700 --> 02:01:56,900
[Accessing Nested Arrays]

1762
02:01:56,900 --> 02:02:00,600
Array bracket notation can be changed 
to access nested arrays.

1763
02:02:00,600 --> 02:02:03,200
You can see we have this array here.

1764
02:02:03,200 --> 02:02:05,700
And inside this array are two objects.

1765
02:02:05,700 --> 02:02:08,200
The first element in the array is this object.

1766
02:02:08,200 --> 02:02:10,500
The second element of the array is this object.

1767
02:02:10,500 --> 02:02:15,600
And then inside the object we have a key value pair.

1768
02:02:15,600 --> 02:02:18,500
The key is list and the value is another array here.

1769
02:02:18,500 --> 02:02:24,700
So, we can combine dot notation 
and bracket notation to access the second tree.

1770
02:02:24,700 --> 02:02:27,000
That’s what we're trying to do here.

1771
02:02:27,000 --> 02:02:28,800
So, let’s do that.

1772
02:02:28,800 --> 02:02:32,300
First we need to do myPlants.

1773
02:02:32,300 --> 02:02:38,400
And the trees are the second element 
in the myPlants array, which is index [1].

1774
02:02:38,400 --> 02:02:42,100
Now we need to get the list.

1775
02:02:42,100 --> 02:02:47,600
So, the list of trees here, 
so I’m going to do .list.

1776
02:02:47,600 --> 02:02:55,000
And since .list is an array, I can use the 
bracket notation to get the second list element 

1777
02:02:55,000 --> 02:02:57,700
which again is array index [1].

1778
02:02:57,700 --> 02:03:02,700
So, if we run this it’s going to console.log 
and we see “pine”.

1779
02:03:02,700 --> 02:03:05,000
That’s the second tree here.

1780
02:03:05,000 --> 02:03:09,600
[Record Collection]

1781
02:03:09,600 --> 02:03:11,700
This is a coding challenge we're going to do.

1782
02:03:11,700 --> 02:03:17,200
We're given this object here 
which is a record collection.

1783
02:03:17,200 --> 02:03:25,200
Each record has an ID and then also has different 
pieces of information about the record.

1784
02:03:25,200 --> 02:03:27,900
They don’t all have the same information.

1785
02:03:27,900 --> 02:03:32,300
But see, we have “album” “artist” “tracks” 
"album” “artist” “tracks”.

1786
02:03:32,300 --> 02:03:36,400
This just say “artist” “tracks” 
and this just has album here.

1787
02:03:36,400 --> 02:03:41,900
And we are supposed to create 
this updateRecords function 

1788
02:03:41,900 --> 02:03:46,500
where we can pass in the ID, the property, 
and the value.

1789
02:03:46,500 --> 02:03:51,700
And it’s going to update our record collection 
with the property and the value.

1790
02:03:51,700 --> 02:03:58,400
So, for instance, if we pass in the ID "2468” 
and we put the property “artist”.

1791
02:03:58,400 --> 02:04:02,500
And if we set a different value, like “Quincy” 
or something like that, 

1792
02:04:02,500 --> 02:04:05,900
then we should update this whole object.

1793
02:04:05,900 --> 02:04:08,700
So now it says “Quincy” instead of Prince.

1794
02:04:08,700 --> 02:04:12,000
And we should return the full collection.

1795
02:04:12,000 --> 02:04:15,700
So, it’s going to update the collection 
and then return the collection.

1796
02:04:15,700 --> 02:04:22,100
If we have an empty string for the value, 
it should just completely delete that property.

1797
02:04:22,100 --> 02:04:28,000
Also, if we have the property of tracks 
and then we have a value, 

1798
02:04:28,000 --> 02:04:34,200
instead of updating the whole tracks here 
with what we put in, 

1799
02:04:34,200 --> 02:04:38,300
it’s just going to add the track 
to the end of this array.

1800
02:04:38,300 --> 02:04:45,400
So, if you look really here, the comment says 
"Keep a copy of the collection for tests”.

1801
02:04:45,400 --> 02:04:49,600
This JSON.parse and JSON.stringify 

1802
02:04:49,600 --> 02:04:56,400
and then collection, this is just a fancy way 
in Javascript to make a copy of the object.

1803
02:04:56,400 --> 02:05:02,800
Remember, in our function we are going 
to be changing the collection object.

1804
02:05:02,800 --> 02:05:08,600
But we want to have a copy of the original object 
before anything was changed.

1805
02:05:08,600 --> 02:05:10,400
So, that’s what that’s for.

1806
02:05:10,400 --> 02:05:12,900
So, let’s go ahead and do that.

1807
02:05:12,900 --> 02:05:15,700
So, we're just updating this function here.

1808
02:05:15,700 --> 02:05:17,500
This update records function.

1809
02:05:17,500 --> 02:05:19,800
Okay, so let’s get to this.

1810
02:05:19,800 --> 02:05:26,200
So we'll do if (value)=== blank.

1811
02:05:26,200 --> 02:05:31,200
Because the first condition we are going to test for 
is if we need to delete the property.

1812
02:05:31,200 --> 02:05:34,900
Remember, if the value is set to blank 
we delete that property.

1813
02:05:34,900 --> 02:05:41,100
So, if the value is blank, 
we are going to delete collection.

1814
02:05:41,100 --> 02:05:47,200
And then we have to use bracket notation [ID] 
and then [prop].

1815
02:05:47,200 --> 02:05:51,400
The collection[ID][prop], that’s the collection here.

1816
02:05:51,400 --> 02:05:55,000
If we pass in the ID 1248, it’ll go to there.

1817
02:05:55,000 --> 02:05:58,000
The property, if we pass in album for the property 
it would go to here.

1818
02:05:58,000 --> 02:06:02,300
And then it would just delete that whole thing 
if our value is an empty string.

1819
02:06:02,300 --> 02:06:09,000
Okay, the next condition we have to look for 
is if the property is “tracks”.

1820
02:06:09,000 --> 02:06:13,600
Because for most properties we're just going to 
override that property 

1821
02:06:13,600 --> 02:06:15,400
with the value passed into the function.

1822
02:06:15,400 --> 02:06:20,400
But if the property is tracks, we're going to push 
onto the end of the array.

1823
02:06:20,400 --> 02:06:22,500
So, let’s do an else if.

1824
02:06:22,500 --> 02:06:34,200
Else if (prop) === “tracks”), then we just have to push 
onto the end of the array.

1825
02:06:34,200 --> 02:06:43,300
So, there’s also another condition here 
which is if the tracks property is empty.

1826
02:06:43,300 --> 02:06:47,700
If the tracks property is empty, we need to create it.

1827
02:06:47,700 --> 02:06:49,500
Here’s a fancy way to do that.

1828
02:06:49,500 --> 02:06:58,400
Collection[ID][prop] So if prop = tracks, 

1829
02:06:58,400 --> 02:07:03,500
we are going to set the tracks – 
because remember prop is going to equal tracks.

1830
02:07:03,500 --> 02:07:06,000
We're going to set the tracks to equal.

1831
02:07:06,000 --> 02:07:10,100
It’s going to either equal itself if it exists.

1832
02:07:10,100 --> 02:07:12,900
Or if it doesn’t exist, we're going to create it.

1833
02:07:12,900 --> 02:07:14,200
I’ll show you how.

1834
02:07:14,200 --> 02:07:19,500
Collection[ID][prop].

1835
02:07:19,500 --> 02:07:21,100
It’s going to equal itself.

1836
02:07:21,100 --> 02:07:27,200
Or – if the or operator is going to equal 
an empty array.

1837
02:07:27,200 --> 02:07:32,500
So, if this already exists 
we're going to set it to equal itself.

1838
02:07:32,500 --> 02:07:38,600
But if itself doesn’t exist, 
we'll just set it to equal an empty array.

1839
02:07:38,600 --> 02:07:43,700
So, that’s just a way to create that property 
if it doesn’t already exist.

1840
02:07:43,700 --> 02:07:48,700
So, now that we know it exists we can just push 
the value to the end of the array.

1841
02:07:48,700 --> 02:07:54,400
Collection[ID][prop].

1842
02:07:54,400 --> 02:08:02,200
And we'll just do the .push 
and then put in the parenthesis, the value.

1843
02:08:02,200 --> 02:08:08,600
So we're able to push the value that was passed in 
to the function onto the end of the array.

1844
02:08:08,600 --> 02:08:15,600
Okay, there’s only one last condition 
which is the kind of the default condition.

1845
02:08:15,600 --> 02:08:17,900
Else.

1846
02:08:17,900 --> 02:08:22,700
So, if the value isn’t blank 
and the property isn’t tracks, 

1847
02:08:22,700 --> 02:08:27,100
then we just push the value onto the property.

1848
02:08:27,100 --> 02:08:32,300
Then we just set the property to equal the value, 
just like this.

1849
02:08:32,300 --> 02:08:42,100
collection[ID][prop]=value.

1850
02:08:42,100 --> 02:08:45,100
Okay. Let’s test this out.

1851
02:08:45,100 --> 02:08:49,200
So, we already have this example down here, 
but to see if it actually worked, 

1852
02:08:49,200 --> 02:08:54,500
we're going to do a console.log 
so we can see the output there.

1853
02:08:54,500 --> 02:09:00,600
And if I run that – oh, let me open up the console 
so we can really see it.

1854
02:09:00,600 --> 02:09:02,700
So, let’s see what we changed.

1855
02:09:02,700 --> 02:09:09,600
Go to 5439 and we set the artist 
which didn’t previously exist to “ABBA”.

1856
02:09:09,600 --> 02:09:11,200
So, let’s look down here.

1857
02:09:11,200 --> 02:09:15,500
In the console, 5439 and the artist is “ABBA”.

1858
02:09:15,500 --> 02:09:18,900
Let’s see what happens when we add a track.

1859
02:09:18,900 --> 02:09:21,900
So, we'll do one more example here.

1860
02:09:21,900 --> 02:09:26,600
I’ll just put it right above here, updateRecords.

1861
02:09:26,600 --> 02:09:29,100
And I’m going to pass in something.

1862
02:09:29,100 --> 02:09:35,300
I’ll pass in – let’s see, the ID 2468.

1863
02:09:35,300 --> 02:09:43,800
And we'll pass in the key which is going to be “tracks”.

1864
02:09:43,800 --> 02:09:49,500
And then for the value, we'll put “test”.

1865
02:09:49,500 --> 02:09:53,000
So, let’s see what happens here.

1866
02:09:53,000 --> 02:09:55,900
If we run that, it’s going to update the record here.

1867
02:09:55,900 --> 02:09:59,100
And then it’s going to update the record again, 
but we don’t care about that.

1868
02:09:59,100 --> 02:10:03,000
We mainly care that it’s going to console.log 
what the final value is.

1869
02:10:03,000 --> 02:10:06,000
So, if we look at 2468 here.

1870
02:10:06,000 --> 02:10:08,500
2468, let’s see the tracks.

1871
02:10:08,500 --> 02:10:13,800
We got “1999” “Little Red Corvette” and “test”, 
so it’s working.

1872
02:10:13,800 --> 02:10:14,900
Great.

1873
02:10:14,900 --> 02:10:19,500
[Iterate with While Loops]

1874
02:10:19,500 --> 02:10:22,900
Loops allow you to run the same code multiple times.

1875
02:10:22,900 --> 02:10:28,400
I’m going to talk to you about a while loop 
that runs while a specified condition is true 

1876
02:10:28,400 --> 02:10:30,500
and stops once it’s no longer true.

1877
02:10:30,500 --> 02:10:35,100
So, we are going to push the digit 0 through 4 
onto this array.

1878
02:10:35,100 --> 02:10:36,700
Here’s how it’s going to work.

1879
02:10:36,700 --> 02:10:39,700
while is the while loop.

1880
02:10:39,700 --> 02:10:43,600
while i is less than 5.

1881
02:10:43,600 --> 02:10:46,800
And we're going to do something while that’s true.

1882
02:10:46,800 --> 02:10:50,000
First, we have to set what i starts off at.

1883
02:10:50,000 --> 02:10:53,700
So, var i = 0.

1884
02:10:53,700 --> 02:11:01,100
So, while i is less than 5, 
we'll do myArray.push(i).

1885
02:11:01,100 --> 02:11:03,000
Just push it onto the array.

1886
02:11:03,000 --> 02:11:09,800
And to make sure this loop eventually ends, 
I’ll have to do i++ which increments i.

1887
02:11:09,800 --> 02:11:15,600
So, then I will test this out by doing console.log.

1888
02:11:15,600 --> 02:11:18,600
And I’m going to console.log the myArray.

1889
02:11:18,600 --> 02:11:20,700
So, let’s see if this works.

1890
02:11:20,700 --> 02:11:23,200
I’ll run this and check the console.

1891
02:11:23,200 --> 02:11:25,000
[0, 1, 2, 3, 4].

1892
02:11:25,000 --> 02:11:26,400
The while loop worked.

1893
02:11:26,400 --> 02:11:34,200
Every time it went through this five different times 
and pushed 0, 1, 2, 3 and 4 onto the loop.

1894
02:11:34,200 --> 02:11:39,000
[Iterate with For Loops]

1895
02:11:39,000 --> 02:11:42,600
A for loop is the most common type of loop 
in Javascript.

1896
02:11:42,600 --> 02:11:45,600
So here is an example of a for loop.

1897
02:11:45,600 --> 02:11:47,400
You start with the keyword for.

1898
02:11:47,400 --> 02:11:52,500
And then we have these parentheses with three 
different items and they’re separated by semicolons.

1899
02:11:52,500 --> 02:11:55,300
The first thing is the initialization.

1900
02:11:55,300 --> 02:11:57,600
Then we have the condition.

1901
02:11:57,600 --> 02:12:00,300
Then we have the final expression.

1902
02:12:00,300 --> 02:12:06,000
So, the initialization happens 
before any of the code inside the loop runs.

1903
02:12:06,000 --> 02:12:11,500
So, we will start by initializing i to equal 0.

1904
02:12:11,500 --> 02:12:15,400
So, this is what most for loops start with, 

1905
02:12:15,400 --> 02:12:18,900
is you have a variable that you’re going to initialize 
for the for loop.

1906
02:12:18,900 --> 02:12:21,600
Then the next thing is the condition.

1907
02:12:21,600 --> 02:12:26,400
So, once this evaluates to false we break out 
of the loop.

1908
02:12:26,400 --> 02:12:33,200
So, while i is less than 5 we'll continue to 
run through the loop over and over 

1909
02:12:33,200 --> 02:12:36,600
until this is false and we break out of the loop.

1910
02:12:36,600 --> 02:12:40,300
The final thing is what we do at the end 
of each iteration.

1911
02:12:40,300 --> 02:12:44,400
At the end of each iteration, we will increment i by 1.

1912
02:12:44,400 --> 02:12:49,000
In this example, we are filling our array 
with the numbers 0 through 4.

1913
02:12:49,000 --> 02:12:53,700
I’m going to do another example where we fill 
an array with the numbers 1 through 5.

1914
02:12:53,700 --> 02:12:55,800
So, we'll start with 4.

1915
02:12:55,800 --> 02:13:00,400
Now, we're going to initialize i to equal 1.

1916
02:13:00,400 --> 02:13:03,100
We're starting with 1 instead of 0 this time.

1917
02:13:03,100 --> 02:13:05,900
And we're going to do i is less than 6.

1918
02:13:05,900 --> 02:13:12,700
So while i is less than 6 or until i is more than 6, 
we are going to run all the code in this loop.

1919
02:13:12,700 --> 02:13:17,200
And at the end of each iteration, 
we are going to increment i.

1920
02:13:17,200 --> 02:13:21,800
Now I can just do what we have before.

1921
02:13:21,800 --> 02:13:25,500
myArray.push(i).

1922
02:13:25,500 --> 02:13:28,700
So, the final thing we will do is test this.

1923
02:13:28,700 --> 02:13:33,500
I will do console.log and put myArray inside here.

1924
02:13:33,500 --> 02:13:37,600
And I’ll just load this and see what we see 
in the console.

1925
02:13:37,600 --> 02:13:39,400
[1, 2, 3, 4, 5].

1926
02:13:39,400 --> 02:13:41,000
It worked.

1927
02:13:41,000 --> 02:13:47,900
We iterated five different times and each time 
we pushed a new digit onto the array.

1928
02:13:47,900 --> 02:13:55,500
And at the end of each iteration we incremented i 
so it pushed a larger number onto the array.

1929
02:13:55,500 --> 02:13:59,400
[Iterate Odd Numbers with a For Loop]

1930
02:13:59,400 --> 02:14:02,300
Loops don’t just have to increment one at a time.

1931
02:14:02,300 --> 02:14:04,400
Look at this for loop here.

1932
02:14:04,400 --> 02:14:08,500
We have our initialization where we initialize i to 0.

1933
02:14:08,500 --> 02:14:14,000
And then we are going to run the loop 
until i is less than 10.

1934
02:14:14,000 --> 02:14:20,600
And finally, our increment, instead of 
incrementing i by 1, we're incrementing i by 2.

1935
02:14:20,600 --> 02:14:25,200
So, now this is going to push all the even numbers 
onto the array.

1936
02:14:25,200 --> 02:14:28,900
We have console.log, so let’s log it out 
and see what it looks like.

1937
02:14:28,900 --> 02:14:31,400
[0, 2, 4, 6, 8].

1938
02:14:31,400 --> 02:14:36,200
I’m going to write another loop right now 
that creates an array of odd numbers.

1939
02:14:36,200 --> 02:14:38,000
So, let’s do that.

1940
02:14:38,000 --> 02:14:43,100
for (var) i = 1.

1941
02:14:43,100 --> 02:14:44,700
We’ll start at 1.

1942
02:14:44,700 --> 02:14:49,000
While i is less than 10.

1943
02:14:49,000 --> 02:14:50,400
I can use 10 again.

1944
02:14:50,400 --> 02:14:58,200
I’m going to do i +=2.

1945
02:14:58,200 --> 02:15:00,500
So, we're still going to count by 2s, 

1946
02:15:00,500 --> 02:15:04,800
but since we're starting at 1 instead of 0 
this should give us the odd numbers.

1947
02:15:04,800 --> 02:15:08,500
So, let’s see what’s going to be inside our loop.

1948
02:15:08,500 --> 02:15:13,700
myArray.push and I’ll just put i there.

1949
02:15:13,700 --> 02:15:17,400
So, let’s log this out and see if we did it right.

1950
02:15:17,400 --> 02:15:20,400
console.log(myarray).

1951
02:15:20,400 --> 02:15:22,700
And I’ll run that.

1952
02:15:22,700 --> 02:15:26,100
[1, 3, 5, 7, 9].

1953
02:15:26,100 --> 02:15:27,900
It worked.

1954
02:15:27,900 --> 02:15:31,600
[Count Backwards with a For Loop]

1955
02:15:31,600 --> 02:15:34,100
A for loop can also be used to count backwards.

1956
02:15:34,100 --> 02:15:38,700
So, if we see this for loop here, 
we’re initializing i to 10.

1957
02:15:38,700 --> 02:15:42,100
We're starting at 10 and we're going back to 0.

1958
02:15:42,100 --> 02:15:46,700
So, we're going to iterate through this loop 
while i is more than 0.

1959
02:15:46,700 --> 02:15:49,000
We’re going to keep iterating.

1960
02:15:49,000 --> 02:15:54,000
And at the end of each iteration we're going to 
decrement i instead of increment it.

1961
02:15:54,000 --> 02:15:56,300
We're going to go down by 2.

1962
02:15:56,300 --> 02:15:59,800
i -= 2 means i=i-2.

1963
02:15:59,800 --> 02:16:06,200
So, we're going to continue pushing the lower and 
lower numbers onto the array until i is less than 0.

1964
02:16:06,200 --> 02:16:09,400
So, let’s log this out and see what ourArray becomes.

1965
02:16:09,400 --> 02:16:13,000
You can see [10, 8, 6, 4, 2].

1966
02:16:13,000 --> 02:16:19,700
Well, I’m going to write another where we’re going to 
push the odd numbers from 9 through 1 to myArray.

1967
02:16:19,700 --> 02:16:22,400
So, another for loop.

1968
02:16:22,400 --> 02:16:28,500
And I’m going to do var i = 9 
because we want to start at 9.

1969
02:16:28,500 --> 02:16:31,900
Now we’ll still do i is more than 0.

1970
02:16:31,900 --> 02:16:35,800
So while i is more than 0 we're going to 
keep going through this array.

1971
02:16:35,800 --> 02:16:39,300
And we'll do i – and everything else is really the same.

1972
02:16:39,300 --> 02:16:41,900
-= 2.

1973
02:16:41,900 --> 02:16:46,600
And this is going to get all the odd numbers 
onto the array.

1974
02:16:46,600 --> 02:16:52,800
So, we just have to do myArray.push 
and then push on the i there.

1975
02:16:52,800 --> 02:16:58,500
Now we'll just console.log 
so we can see what it ended up as.

1976
02:16:58,500 --> 02:17:00,400
myArray.

1977
02:17:00,400 --> 02:17:04,000
And I’ll run the code.

1978
02:17:04,000 --> 02:17:07,500
[9, 7, 5, 3, 1] We did it.

1979
02:17:07,500 --> 02:17:12,000
[Iterate Through an Array with a For Loop]

1980
02:17:12,000 --> 02:17:16,400
It is common in Javascript to iterate 
through the contents of an array.

1981
02:17:16,400 --> 02:17:18,500
So, look at this example.

1982
02:17:18,500 --> 02:17:20,100
We have this array here.

1983
02:17:20,100 --> 02:17:23,000
Before, we were always adding items to the array.

1984
02:17:23,000 --> 02:17:25,300
But this time the array already exists.

1985
02:17:25,300 --> 02:17:28,500
Right here, ourArr = [9, 10, 11, 12].

1986
02:17:28,500 --> 02:17:31,500
So, we are going to start at 0.

1987
02:17:31,500 --> 02:17:40,400
But now instead of going to a specific number of 
iterations, we are going to the OurArr.length.

1988
02:17:40,400 --> 02:17:42,700
So, the length is 4 here.

1989
02:17:42,700 --> 02:17:45,500
But if we added elements to this array, 

1990
02:17:45,500 --> 02:17:51,000
that means this loop would just go even longer 
until we went through every element of that array.

1991
02:17:51,000 --> 02:17:56,700
And then at the end we're going to increment i by one 
at the end of each iteration.

1992
02:17:56,700 --> 02:17:59,000
So, look at what we're doing inside the array.

1993
02:17:59,000 --> 02:18:03,500
We're going doing ourTotal that starts off 
at 0 up here.

1994
02:18:03,500 --> 02:18:05,400
And we’re doing +=.

1995
02:18:05,400 --> 02:18:09,700
That means we're going to do ourTotal = ourTotal 
plus something else.

1996
02:18:09,700 --> 02:18:16,100
So, we're going to keep adding to the total 
whatever is in the array at that index.

1997
02:18:16,100 --> 02:18:18,700
So, ourArr[i].

1998
02:18:18,700 --> 02:18:20,300
So, it starts at 0.

1999
02:18:20,300 --> 02:18:24,800
And then it goes 1, 2, 3 until it gets to 4 

2000
02:18:24,800 --> 02:18:29,600
which is the length of the array 
and it doesn’t even run the iteration at 4.

2001
02:18:29,600 --> 02:18:33,100
And there is no index[4] on the array.

2002
02:18:33,100 --> 02:18:35,800
Remember, it’s 0, 1, 2, 3.

2003
02:18:35,800 --> 02:18:38,600
So this is just going to add up all those numbers.

2004
02:18:38,600 --> 02:18:42,200
If we run this we can see it adds up to 42.

2005
02:18:42,200 --> 02:18:47,300
I’m going to write another for loop down here that’s 
going to add up all the numbers in this array here.

2006
02:18:47,300 --> 02:18:53,400
So, we'll do for (var i = 0).

2007
02:18:53,400 --> 02:19:00,800
And then we’ll do i is less than myArr.length.

2008
02:19:00,800 --> 02:19:05,200
And i++.

2009
02:19:05,200 --> 02:19:07,000
So, just like before.

2010
02:19:07,000 --> 02:19:21,000
For each element in myArr we're going to do a total 
+= myArr index [i].

2011
02:19:21,000 --> 02:19:24,600
So, we have to initialize the total variable 
right up here.

2012
02:19:24,600 --> 02:19:28,500
So, we'll do a var total = 0.

2013
02:19:28,500 --> 02:19:35,600
And then at the end we’ll just console.log that out 
to see what the total is.

2014
02:19:35,600 --> 02:19:42,500
So, if I just run this we can see that the total 
this time is 20.

2015
02:19:42,500 --> 02:19:46,800
[Nesting For Loops]

2016
02:19:46,800 --> 02:19:50,300
If you have a multidimensional or nested array, 

2017
02:19:50,300 --> 02:19:54,600
you can use nested for loops to access 
all the array elements.

2018
02:19:54,600 --> 02:19:57,800
So, for instance, we have this multiple all function.

2019
02:19:57,800 --> 02:20:03,600
It’s defined up here, but we're calling it here 
and we're passing in this multidimensional array.

2020
02:20:03,600 --> 02:20:07,000
Which is basically an array with the arrays 
inside the array.

2021
02:20:07,000 --> 02:20:10,200
So, inside the first array there are three elements.

2022
02:20:10,200 --> 02:20:11,100
One.

2023
02:20:11,100 --> 02:20:12,300
Two.

2024
02:20:12,300 --> 02:20:13,600
Three.

2025
02:20:13,600 --> 02:20:17,100
And you can see each of those elements are in array 
with their own set of elements.

2026
02:20:17,100 --> 02:20:21,400
So, we are going to use nested for loops 
within this multiply all function 

2027
02:20:21,400 --> 02:20:26,200
to multiply every number in these nested arrays here.

2028
02:20:26,200 --> 02:20:27,800
So, let’s get started.

2029
02:20:27,800 --> 02:20:29,400
We're going to start with a for loop.

2030
02:20:29,400 --> 02:20:32,900
And it’s going to look just like the other for loops 
that we started.

2031
02:20:32,900 --> 02:20:35,100
i = 0.

2032
02:20:35,100 --> 02:20:36,800
We’re going to initialize i to 0.

2033
02:20:36,800 --> 02:20:42,800
And then we're going to say 
while i is less than arr.length.

2034
02:20:42,800 --> 02:20:48,600
And then we're just going to 
increment i at the end of each iteration.

2035
02:20:48,600 --> 02:20:55,200
Now, arr.length, that’s going to start off 
as 3 because we're passing in this array.

2036
02:20:55,200 --> 02:21:00,200
And the first level of the array, there’s just
one, two, three elements.

2037
02:21:00,200 --> 02:21:02,000
So, that’s going to be 3.

2038
02:21:02,000 --> 02:21:07,800
But now, we're going to go inside this for loop 
and create another for loop.

2039
02:21:07,800 --> 02:21:12,400
So, we're going to do var j = 0.

2040
02:21:12,400 --> 02:21:16,700
Normally, it’s standard practice to call 
the variable that we're incrementing i, 

2041
02:21:16,700 --> 02:21:19,400
but we already have an i within this scope.

2042
02:21:19,400 --> 02:21:26,100
So, we need to create another name and it’s pretty 
standard to call the next variable j because j is after i.

2043
02:21:26,100 --> 02:21:28,600
So, now we're going to do a j.

2044
02:21:28,600 --> 02:21:32,700
while j is less than – 
now this is where it gets a little tricky.

2045
02:21:32,700 --> 02:21:40,700
We're going to do while a 
is less than arr index[i].length.

2046
02:21:40,700 --> 02:21:43,000
Also, we're going to increment j here.

2047
02:21:43,000 --> 02:21:45,300
So, this is going to change.

2048
02:21:45,300 --> 02:21:50,500
So, the first iteration of this outer for loop, 
we're looking at the length of this array.

2049
02:21:50,500 --> 02:21:52,800
Then we're looking at the length of this array.

2050
02:21:52,800 --> 02:21:55,000
Then we're looking at the length of this array.

2051
02:21:55,000 --> 02:21:57,800
The index is going to be different every time 

2052
02:21:57,800 --> 02:22:01,900
so we're going to be going to each different array 
inside the nested array.

2053
02:22:01,900 --> 02:22:08,100
So, at this point, we just have to multiply 
all the numbers together.

2054
02:22:08,100 --> 02:22:11,300
So, we already have the product 
that we've defined above.

2055
02:22:11,300 --> 02:22:17,200
So, we're going to do product *= 
which is just going to multiply everything together.

2056
02:22:17,200 --> 02:22:24,100
And we're going to do arr[i][j].

2057
02:22:24,100 --> 02:22:27,100
So, the i references the outer array 

2058
02:22:27,100 --> 02:22:33,500
and the j references the inner array 
within what we're passing in.

2059
02:22:33,500 --> 02:22:35,500
And now we're done.

2060
02:22:35,500 --> 02:22:40,800
So, let’s – we have the console.log here 
so let’s run this and see what happens.

2061
02:22:40,800 --> 02:22:44,000
And 5040.

2062
02:22:44,000 --> 02:22:48,600
[Iterate with Do…While Loops]

2063
02:22:48,600 --> 02:22:51,300
Next I’m going to talk about do while loops.

2064
02:22:51,300 --> 02:22:56,600
Now we already talked about while loops 
and I’m going to review this while loop 

2065
02:22:56,600 --> 02:23:00,500
and then I will tell you how a do while loop 
is different than a while loop.

2066
02:23:00,500 --> 02:23:08,300
So, this while loop first checks the condition 
before it runs any code within the loop.

2067
02:23:08,300 --> 02:23:16,100
A do while loop will always run at least one time 
and then it will check the condition.

2068
02:23:16,100 --> 02:23:19,700
So, here we have this empty array.

2069
02:23:19,700 --> 02:23:21,300
We have i = 10.

2070
02:23:21,300 --> 02:23:27,500
So, while i is less than 5, well, i is not less than 5 
so it’ not going to do anything.

2071
02:23:27,500 --> 02:23:28,700
Let’s see what happens.

2072
02:23:28,700 --> 02:23:34,800
So, we see it logged out 10 
and then an empty array because i started as 10 

2073
02:23:34,800 --> 02:23:36,900
and myArray started as this empty array.

2074
02:23:36,900 --> 02:23:39,200
So, you were logging the i in myArray.

2075
02:23:39,200 --> 02:23:41,200
With a do while loop, it’s different.

2076
02:23:41,200 --> 02:23:45,800
So, what I’m going to do is cut this line up here 
and put it at the end.

2077
02:23:45,800 --> 02:23:49,700
And then at the beginning 
I’m going to put the keyword do.

2078
02:23:49,700 --> 02:23:55,000
In a do while loop, this is always run at least once 
before it checks the condition.

2079
02:23:55,000 --> 02:23:59,100
So, first it’s going to do these things 
and then it’s going to check the condition.

2080
02:23:59,100 --> 02:24:04,100
In this case, it’s going to find out the condition is false 
and it’s going to break out of the loop.

2081
02:24:04,100 --> 02:24:05,500
Let’s see what happens here.

2082
02:24:05,500 --> 02:24:11,500
See, now i is 11 and the array has the 10 added to it.

2083
02:24:11,500 --> 02:24:15,100
[Profile Lookup]

2084
02:24:15,100 --> 02:24:17,600
This is a coding challenge.

2085
02:24:17,600 --> 02:24:21,100
We have this array of objects in our contacts list.

2086
02:24:21,100 --> 02:24:24,700
And you’ll see each object is one of our contacts.

2087
02:24:24,700 --> 02:24:27,700
What the first name, a last name, a number, and likes.

2088
02:24:27,700 --> 02:24:30,500
So, these are key value pairs here.

2089
02:24:30,500 --> 02:24:37,800
So, what we want to do is create this lookUpProfile 
function where we pass in a name.

2090
02:24:37,800 --> 02:24:39,400
This is a first name.

2091
02:24:39,400 --> 02:24:40,500
And the property.

2092
02:24:40,500 --> 02:24:43,500
and it’s going to return the value of that property.

2093
02:24:43,500 --> 02:24:47,200
For instance, if we pass in the name “Kristian” here 

2094
02:24:47,200 --> 02:24:52,200
and we pass in the property of “number” 
it should return “unknown”.

2095
02:24:52,200 --> 02:24:58,800
If we pass in the first name of “Sherlock” up here 
and we return the property 

2096
02:24:58,800 --> 02:25:05,900
and we pass in the property of “likes” it should return 
the array “Intriguing Cases” and “Violin”.

2097
02:25:05,900 --> 02:25:10,100
If the name that’s passed in does not correspond 
to any contacts, 

2098
02:25:10,100 --> 02:25:13,000
then our function should return “No such contact”.

2099
02:25:13,000 --> 02:25:16,200
And if there’s no property, it should return 
“No such property”.

2100
02:25:16,200 --> 02:25:19,900
So, let’s go to this function here and start creating it.

2101
02:25:19,900 --> 02:25:25,600
So, the first thing we're going to have to do is iterate 
through each element in the contacts list.

2102
02:25:25,600 --> 02:25:28,100
So, let’s make a for loop.

2103
02:25:28,100 --> 02:25:43,600
So, for (var i = 0) while i is less than contacts.length.

2104
02:25:43,600 --> 02:25:49,600
And at the end of each iteration we'll do i++ 
to increment that.

2105
02:25:49,600 --> 02:25:57,800
So, for each of these contacts the first thing we're 
going to check is if the name is a name in this list.

2106
02:25:57,800 --> 02:26:11,600
So, if(contacts[i].firstName ===

2107
02:26:11,600 --> 02:26:14,300
The name that was passed in.

2108
02:26:14,300 --> 02:26:17,200
So, we're checking each item to see 
if it was the name that was passed in.

2109
02:26:17,200 --> 02:26:21,800
And if so, we're going to do something.

2110
02:26:21,800 --> 02:26:25,500
Now, if not, we're going to do something else, 
so let’s do that now.

2111
02:26:25,500 --> 02:26:28,700
Remember, if the name that was passed in 
is not in the array, 

2112
02:26:28,700 --> 02:26:33,700
we're going to return “No such contact”.

2113
02:26:33,700 --> 02:26:37,800
If it is in the array we're going to go something else.

2114
02:26:37,800 --> 02:26:43,100
If the name is in the contacts list we're going to return 
the value of the property that was passed in.

2115
02:26:43,100 --> 02:26:48,600
So, return contacts[i][prop].

2116
02:26:48,600 --> 02:26:52,000
So, this will return the value of that property 
that was passed in.

2117
02:26:52,000 --> 02:26:58,400
However, there’s another case which is if the property 
does not exist we return “No such property”.

2118
02:26:58,400 --> 02:27:04,100
So, a fancy way in Javascript of 
saying use this value if it exists, 

2119
02:27:04,100 --> 02:27:08,700
but otherwise use a different value 
is to use the or operator.

2120
02:27:08,700 --> 02:27:17,600
So, we'll say return contacts[i][prop] or if it doesn’t 
exist, we're going to return “No such property”.

2121
02:27:17,600 --> 02:27:24,000
And just so you know, there would be a way to do this 
without using this or operator 

2122
02:27:24,000 --> 02:27:29,100
as long as that your code passes the requirements, 
that’s all that’s important.

2123
02:27:29,100 --> 02:27:31,100
There’s many ways of doing this.

2124
02:27:31,100 --> 02:27:32,100
But let’s check it.

2125
02:27:32,100 --> 02:27:34,800
So, right now we have our lookUpProfile.

2126
02:27:34,800 --> 02:27:37,100
We're passing in “Akira” and we're trying 
to find the “likes”.

2127
02:27:37,100 --> 02:27:39,400
And we're console.logging the data.

2128
02:27:39,400 --> 02:27:43,000
And “Pizza” "Coding” "Brownie Points”.

2129
02:27:43,000 --> 02:27:45,400
So, what if we passed in something else?

2130
02:27:45,400 --> 02:27:48,100
If we passed in “Shirlock”.

2131
02:27:48,100 --> 02:27:51,800
Pass in “lastName”.

2132
02:27:51,800 --> 02:27:57,500
“No such contact.”

2133
02:27:57,500 --> 02:28:01,000
Well, that’s working 
because I spelled “Sherlock” wrong.

2134
02:28:01,000 --> 02:28:02,300
This is E.

2135
02:28:02,300 --> 02:28:05,500
So, this is a good way to test that.

2136
02:28:05,500 --> 02:28:07,100
“Holmes”.

2137
02:28:07,100 --> 02:28:11,300
And the last thing we'll check is if we pass in 
a property that does not exist.

2138
02:28:11,300 --> 02:28:13,800
I’ll just say “Hello”.

2139
02:28:13,800 --> 02:28:15,800
And “No such property”.

2140
02:28:15,800 --> 02:28:18,600
So, our function works.

2141
02:28:18,600 --> 02:28:21,800
[Generate Random Fractions]

2142
02:28:21,800 --> 02:28:25,900
There is a simple way to create 
a random decimal number in Javascript.

2143
02:28:25,900 --> 02:28:29,600
It’s with the math.random function.

2144
02:28:29,600 --> 02:28:33,500
So, we have this function here 
which just says randomFraction.

2145
02:28:33,500 --> 02:28:36,000
And it’s returning 0 currently.

2146
02:28:36,000 --> 02:28:39,600
But we're going to use the math.random function.

2147
02:28:39,600 --> 02:28:47,600
And you well see that when I run this 
we have 0,2003813741 and so on.

2148
02:28:47,600 --> 02:28:51,000
So, it’s always going to be a number 
between 0 and it could be 0.

2149
02:28:51,000 --> 02:28:53,500
Between 0 and 1, but it could not be 1.

2150
02:28:53,500 --> 02:28:57,600
[Generate Random Whole Numbers]

2151
02:28:57,600 --> 02:29:01,500
Often you want a random whole number 
instead of a random decimal number.

2152
02:29:01,500 --> 02:29:05,200
That can be accomplished with Math.floor.

2153
02:29:05,200 --> 02:29:07,000
We have Math.floor here.

2154
02:29:07,000 --> 02:29:10,200
This rounds down to the nearest whole number.

2155
02:29:10,200 --> 02:29:15,600
So, we pass in (Math.random() * 20).

2156
02:29:15,600 --> 02:29:18,600
And then we round down 
to the nearest whole number.

2157
02:29:18,600 --> 02:29:23,700
This is going to create a 
random whole number between 0 and 19.

2158
02:29:23,700 --> 02:29:27,300
Remember Math.random can never be 1.

2159
02:29:27,300 --> 02:29:30,800
It can be 0, but it can ever be quite 1.

2160
02:29:30,800 --> 02:29:39,500
So, when we multiply it by 20 we’re going to get a 
number between 0 and 20, but not including 20.

2161
02:29:39,500 --> 02:29:44,000
And then we round down, 
which will end up being 0 to 19.

2162
02:29:44,000 --> 02:29:46,100
So, let me show you another example 

2163
02:29:46,100 --> 02:29:49,800
where we're going to get a random whole number 
between 0 and 9.

2164
02:29:49,800 --> 02:29:52,000
It’s going to look just like this.

2165
02:29:52,000 --> 02:29:54,300
So, we're going to modify this function.

2166
02:29:54,300 --> 02:30:00,500
So, this Math.random we're going to pass 
that into Math.floor.

2167
02:30:00,500 --> 02:30:05,100
So, I have to put the parenthesis 
because we're passing that in to that function.

2168
02:30:05,100 --> 02:30:09,700
And it’s Math.random * 10.

2169
02:30:09,700 --> 02:30:12,900
And that’s going to give us a random number 
between 0 and 9.

2170
02:30:12,900 --> 02:30:14,900
So, if I reload this I can see.

2171
02:30:14,900 --> 02:30:18,800


2172
02:30:18,800 --> 02:30:21,100
Every time I load it, it’s a different random number.

2173
02:30:21,100 --> 02:30:25,400
[Generate Random Whole Numbers within a Range]

2174
02:30:25,400 --> 02:30:27,100
You can also generate random 
whole numbers within a range.

2175
02:30:27,100 --> 02:30:31,000
So, look at this function here, ourRandomRange.

2176
02:30:31,000 --> 02:30:37,900
It takes a minimum number and a maximum number 
and then it just runs through this calculation here.

2177
02:30:37,900 --> 02:30:44,500
So, we have the Math.random and we multiply it 
by the maximum or min number + 1.

2178
02:30:44,500 --> 02:30:48,400
And then we get the floor which is rounding down.

2179
02:30:48,400 --> 02:30:50,500
And we add all that to our minimum number.

2180
02:30:50,500 --> 02:30:56,400
So, this is just a calculation to get a random number 
between the min and max.

2181
02:30:56,400 --> 02:31:01,200
So, as practiced, I’m going to rewrite it down here.

2182
02:31:01,200 --> 02:31:02,700
So, we have the random range.

2183
02:31:02,700 --> 02:31:06,100
And instead of ourMin and ourMax, 
we have myMin and myMax.

2184
02:31:06,100 --> 02:31:08,600
However, the equation is going to be the same.

2185
02:31:08,600 --> 02:31:10,700
So, we have Math.floor.

2186
02:31:10,700 --> 02:31:17,300
You can take a chance to actually just look over the 
equation and see if you can understand how it works.

2187
02:31:17,300 --> 02:31:21,400
myMax minus myMin.

2188
02:31:21,400 --> 02:31:26,200
And then we just have to do + 1.

2189
02:31:26,200 --> 02:31:30,400
And then this whole thing is going to be + myMin.

2190
02:31:30,400 --> 02:31:35,700
So, we already have this example test set up 
down here.

2191
02:31:35,700 --> 02:31:38,900
randomRange between 5 and 15 
and we're going to log it out here.

2192
02:31:38,900 --> 02:31:39,700
So, let’s try that.

2193
02:31:39,700 --> 02:31:42,900


2194
02:31:42,900 --> 02:31:45,600
See, every number is between 5 and 15 
whenever I run it.

2195
02:31:45,600 --> 02:31:49,300
[Use the parseInt Function]

2196
02:31:49,300 --> 02:31:52,700
Another useful function is the parseInt function.

2197
02:31:52,700 --> 02:31:55,500
It takes a string and returns an integer.

2198
02:31:55,500 --> 02:31:59,400
A lot of times you want to make sure you’re dealing 
with integers and not strings 

2199
02:31:59,400 --> 02:32:02,400
for different calculations and things like that.

2200
02:32:02,400 --> 02:32:08,300
If the string cannot be converted into an integer 
it returns in NaN for Not a Number.

2201
02:32:08,300 --> 02:32:10,100
So, let me show you how it works.

2202
02:32:10,100 --> 02:32:14,300
From this convertToInteger function 
we are going to return.

2203
02:32:14,300 --> 02:32:20,000
And we're going to return the string except 
we're going to convert it into an integer first.

2204
02:32:20,000 --> 02:32:23,200
So, we'll do parseInt.

2205
02:32:23,200 --> 02:32:25,500
And then I’ll pass in the string.

2206
02:32:25,500 --> 02:32:32,100
Now, it was a string because you can see here 
we're passing in the string of “56” 

2207
02:32:32,100 --> 02:32:35,300
but it’s going to return it as a number and integer.

2208
02:32:35,300 --> 02:32:39,400
[Use the parseInt Function with a Radix]

2209
02:32:39,400 --> 02:32:42,600
The parseInt function can also be used with a radix.

2210
02:32:42,600 --> 02:32:46,800
The radix specifies the base of the number 
in the string.

2211
02:32:46,800 --> 02:32:50,900
Such as base 2 or base 7 or base 8.

2212
02:32:50,900 --> 02:32:52,700
A base 2 would be binary.

2213
02:32:52,700 --> 02:32:55,000
So, that’s one of the most common ones to use.

2214
02:32:55,000 --> 02:32:57,300
Now the default is base 10.

2215
02:32:57,300 --> 02:33:00,000
That’s what we use normally every day.

2216
02:33:00,000 --> 02:33:01,900
But let me show you how that would work.

2217
02:33:01,900 --> 02:33:06,400
We're going to convert this number 
which is a binary number to an integer.

2218
02:33:06,400 --> 02:33:08,700
So, we'll do return.

2219
02:33:08,700 --> 02:33:13,100
And I will do the parseInt.

2220
02:33:13,100 --> 02:33:19,000
I’ll pass in the string as before, but now we'll have 
a second argument after the comma 

2221
02:33:19,000 --> 02:33:21,600
which is going to be the number 2.

2222
02:33:21,600 --> 02:33:25,700
So, instead of the default of base 10 
we'll be passing it as base 2.

2223
02:33:25,700 --> 02:33:28,200
So, the computer knows that this is a binary number.

2224
02:33:28,200 --> 02:33:32,800
[Use the Conditional (Ternary) Operator]

2225
02:33:32,800 --> 02:33:34,600
I love the ternary operator.

2226
02:33:34,600 --> 02:33:38,000
It’s like a one line if else expression.

2227
02:33:38,000 --> 02:33:40,300
Now this is what it looks like.

2228
02:33:40,300 --> 02:33:44,000
You have your condition just like in an if statement.

2229
02:33:44,000 --> 02:33:47,000
And then you would have a question mark.

2230
02:33:47,000 --> 02:33:52,200
After the question mark you have what’s 
going to happen if the condition is true.

2231
02:33:52,200 --> 02:33:54,100
Then you have a colon.

2232
02:33:54,100 --> 02:33:58,400
Then you have what’s going to happen 
if the condition is false.

2233
02:33:58,400 --> 02:34:05,300
So, we can replace an if else statement like this 
into something using the ternary operator.

2234
02:34:05,300 --> 02:34:09,200
So, here we have if this condition is true, 
we're going to return true.

2235
02:34:09,200 --> 02:34:11,200
Else, we're going to return false.

2236
02:34:11,200 --> 02:34:12,600
Let’s change this.

2237
02:34:12,600 --> 02:34:15,600
So, now we're going to use the ternary operator.

2238
02:34:15,600 --> 02:34:20,900
So now it’s just going to say return a === b.

2239
02:34:20,900 --> 02:34:22,000
That’s the condition.

2240
02:34:22,000 --> 02:34:23,400
Then we use the question mark.

2241
02:34:23,400 --> 02:34:26,800
So if it’s true, we're going to return true.

2242
02:34:26,800 --> 02:34:29,800
And then we have a colon.

2243
02:34:29,800 --> 02:34:36,200
And after the colon we have what’s going to happen 
if it’s false, which is we're going to return false.

2244
02:34:36,200 --> 02:34:38,200
Now I’m going to be honest.

2245
02:34:38,200 --> 02:34:47,400
You would never write a line like this in real life 
because you could just write return a === b.

2246
02:34:47,400 --> 02:34:51,800
And this line is actually going to do 
the same thing as this line.

2247
02:34:51,800 --> 02:34:56,800
However, I just want to give you 
a simple example of using the ternary operator.

2248
02:34:56,800 --> 02:35:01,400
[Use Multiple Conditional (Ternary) Operators]

2249
02:35:01,400 --> 02:35:04,300
One of the great things about conditional 
or ternary operators 

2250
02:35:04,300 --> 02:35:08,700
is that you can nest them within each other 
which gives them even more power.

2251
02:35:08,700 --> 02:35:11,200
So, we're going to write a function here.

2252
02:35:11,200 --> 02:35:12,800
The function checkSign.

2253
02:35:12,800 --> 02:35:15,600
And it’s going to return the string “Positive” 

2254
02:35:15,600 --> 02:35:21,100
if this number is positive "Negative” 
if the number is negative, or 0.

2255
02:35:21,100 --> 02:35:24,300
And we're going to use a nested conditional operator.

2256
02:35:24,300 --> 02:35:25,900
So, here it is.

2257
02:35:25,900 --> 02:35:27,100
return.

2258
02:35:27,100 --> 02:35:31,200
And first we're going to check if num is more than 0.

2259
02:35:31,200 --> 02:35:33,500
And then we'll use the ternary operator.

2260
02:35:33,500 --> 02:35:38,000
If so, the first thing after the question mark 
is if it’s true.

2261
02:35:38,000 --> 02:35:40,800
If it’s true, we're going to return “positive”.

2262
02:35:40,800 --> 02:35:47,900
If it’s false, if the number is not more than 0 
we'll do something else.

2263
02:35:47,900 --> 02:35:51,800
Here is where we're going to have 
another ternary operator.

2264
02:35:51,800 --> 02:35:55,900
We're going to check if num is less than 0.

2265
02:35:55,900 --> 02:35:59,800
So, if the number is less than 0, well, if that’s true, 

2266
02:35:59,800 --> 02:36:02,300
we have to have the question mark 
for the ternary operator.

2267
02:36:02,300 --> 02:36:06,400
If that’s true, we're going to return “negative”.

2268
02:36:06,400 --> 02:36:13,100
And if it’s false, that’s where the colon comes in, 
we're going to return “zero”.

2269
02:36:13,100 --> 02:36:16,700
So, let’s do this checkSign.

2270
02:36:16,700 --> 02:36:20,900
I’m going to do a console.log 
so we can see what this returns here.

2271
02:36:20,900 --> 02:36:25,300
And we can see this is going to return “positive”.

2272
02:36:25,300 --> 02:36:29,500
If we have a negative number here 
it’s going to return “negative”.

2273
02:36:29,500 --> 02:36:33,400
Or if we have a 0 it’s going to return “zero”.

2274
02:36:33,400 --> 02:36:40,900
Now you’ll see that after this colon 
we have an entire ternary operator.

2275
02:36:40,900 --> 02:36:44,600
So, if this is true we just return “positive”.

2276
02:36:44,600 --> 02:36:48,500
If it’s false, then we do everything here 

2277
02:36:48,500 --> 02:36:52,300
which is another ternary operator 
where it checks if this is true.

2278
02:36:52,300 --> 02:36:54,600
And if that’s true, we return “negative”.

2279
02:36:54,600 --> 02:36:56,500
And if it’s false, it would return “zero”.

2280
02:36:56,500 --> 02:37:00,800
[Differences Between the var and let Keywords]

2281
02:37:00,800 --> 02:37:07,000
For a long time in Javascript if you were going to 
declare a variable you had to use the var keyword.

2282
02:37:07,000 --> 02:37:15,900
But starting with ES6 in 2015 we can now 
declare variables with let and const as well.

2283
02:37:15,900 --> 02:37:21,900
Over the next few lessons I will be talking about 
what let and const do that is different than var.

2284
02:37:21,900 --> 02:37:27,600
But one of the things is that let does not let you 
declare a variable twice.

2285
02:37:27,600 --> 02:37:29,400
So, let’s look at this example.

2286
02:37:29,400 --> 02:37:31,300
You have var catName = “Quincy”.

2287
02:37:31,300 --> 02:37:33,800
And then down here, var catName = “Beau”.

2288
02:37:33,800 --> 02:37:37,700
And if I just run this code you’ll see 
that nothing is happening.

2289
02:37:37,700 --> 02:37:42,700
It’s just allowing us to set the catName twice 
and declare it twice with the var keyword.

2290
02:37:42,700 --> 02:37:45,400
However, if we change this to let.

2291
02:37:45,400 --> 02:37:48,100
We're going to change all the var to let.

2292
02:37:48,100 --> 02:37:55,400
And you’ll see that when we load it again, 
you’ll see an error, Duplicate declaration “catName”.

2293
02:37:55,400 --> 02:37:58,900
So, this is good that it’s creating this error 

2294
02:37:58,900 --> 02:38:04,600
because you usually don’t want to declare a variable 
two times in the same scope.

2295
02:38:04,600 --> 02:38:10,800
So, this allows your program to give you an error 
to tell you that you’ve done something wrong.

2296
02:38:10,800 --> 02:38:13,500
Now you can still reset it.

2297
02:38:13,500 --> 02:38:18,600
So if we don’t use the word let here 
we could just set the catName variable.

2298
02:38:18,600 --> 02:38:21,500
And now we're not going to get an error.

2299
02:38:21,500 --> 02:38:24,300
In this case, we're declaring the variable 
here to be “Quincy” 

2300
02:38:24,300 --> 02:38:28,200
and we're setting the same variable 
to a new name here.

2301
02:38:28,200 --> 02:38:33,200
This is one of the few reasons 
that many people only use let and const 

2302
02:38:33,200 --> 02:38:36,600
and never use var to declare variables.

2303
02:38:36,600 --> 02:38:40,300
Another thing in this code you can see is “use strict”.

2304
02:38:40,300 --> 02:38:46,300
Now this enables strict mode which catches common 
coding mistakes and unsafe actions.

2305
02:38:46,300 --> 02:38:52,200
So, a lot of people will use “use strict” 
at the top of a full Javascript file 

2306
02:38:52,200 --> 02:38:56,100
or maybe just in a function to catch coding mistakes.

2307
02:38:56,100 --> 02:39:01,400
Such as if you create a variable and don’t declare it 
with var, let, or const.

2308
02:39:01,400 --> 02:39:06,200
[Compare Scopes of the var and let Keywords]

2309
02:39:06,200 --> 02:39:09,200
Another major difference 
between the var and let keywords 

2310
02:39:09,200 --> 02:39:11,400
is that when you declare a variable with var, 

2311
02:39:11,400 --> 02:39:16,500
it is declared globally or locally 
if declared inside a function.

2312
02:39:16,500 --> 02:39:24,700
However, let – the scope of let is limited to the block 
statement or expression that it was declared in.

2313
02:39:24,700 --> 02:39:27,700
So, let’s look at this example here.

2314
02:39:27,700 --> 02:39:33,600
If you see this code, we have this checkScope function 
and we're calling it down here.

2315
02:39:33,600 --> 02:39:38,900
And it’s setting i with a var here, the var keyword, 
to “function scope”.

2316
02:39:38,900 --> 02:39:41,700
Then we're setting it to “Block scope” in here.

2317
02:39:41,700 --> 02:39:46,200
And you can see it’s console.logging 
“Block scope i is:  “.

2318
02:39:46,200 --> 02:39:48,100
And it says “Block scope”.

2319
02:39:48,100 --> 02:39:52,000
And when we get down here "Function scope” 
it’s still “Block scope”.

2320
02:39:52,000 --> 02:39:58,100
If we want this to be “function scope” down here, 
we're going to have to use let.

2321
02:39:58,100 --> 02:40:04,100
So, we would use let here 
and then we would use let here.

2322
02:40:04,100 --> 02:40:11,900
And if we run the code, now you can see in the 
console ""Block scope i is:  “block scope”.

2323
02:40:11,900 --> 02:40:14,400
“Function scope i is:  “function scope”.

2324
02:40:14,400 --> 02:40:19,600
So, even though we set i to block scope here 
inside this block.

2325
02:40:19,600 --> 02:40:24,000
Now, a block is just anything inside 
these squiggly braces here.

2326
02:40:24,000 --> 02:40:27,400
So, with an i inside this block to “block scope”.

2327
02:40:27,400 --> 02:40:33,200
But then when we get out here, it’s now back to 
“function scope” because of this up here.

2328
02:40:33,200 --> 02:40:35,900
Here’s another thing I want to show you.

2329
02:40:35,900 --> 02:40:43,900
If this is – if we comment this line out and we change 
this to var, what do you think is going to happen?

2330
02:40:43,900 --> 02:40:46,700
Well, let’s run it and find out.

2331
02:40:46,700 --> 02:40:53,500
Look, we set the var inside this block here 
to “block scope”.

2332
02:40:53,500 --> 02:40:56,700
And it says Block scope is:  “block scope”.

2333
02:40:56,700 --> 02:40:59,500
But then when we're outside of the block, 

2334
02:40:59,500 --> 02:41:04,100
when we're outside of this squiggly braces here, 
we can still access i here.

2335
02:41:04,100 --> 02:41:07,000
And it’s set to block scope.

2336
02:41:07,000 --> 02:41:11,400
But if this was a let and we're declaring it 
inside this block.

2337
02:41:11,400 --> 02:41:18,200
If we run that now when we get outside the block, 
we get an error because it’s not defined.

2338
02:41:18,200 --> 02:41:21,900
So, that’s another reason why people use let 
instead of var

2339
02:41:21,900 --> 02:41:28,300
is so that they can make sure the variable is only 
defined in the area they want it to be defined in.

2340
02:41:28,300 --> 02:41:32,200
But for now I’ll uncomment this out.

2341
02:41:32,200 --> 02:41:36,100
[Declare a Read-Only Variable 
with the const Keyword]

2342
02:41:36,100 --> 02:41:39,300
Const is another way to declare a variable.

2343
02:41:39,300 --> 02:41:43,400
It has all the features of let but it’s also read-only.

2344
02:41:43,400 --> 02:41:45,500
You cannot reassign a const.

2345
02:41:45,500 --> 02:41:48,200
So, let’s look at this program here.

2346
02:41:48,200 --> 02:41:50,500
We’re running this printManyTimes.

2347
02:41:50,500 --> 02:41:53,100
And it’s going to log out this sentence.

2348
02:41:53,100 --> 02:41:55,300
And the sentence is up here.

2349
02:41:55,300 --> 02:41:57,200
var sentence is declared.

2350
02:41:57,200 --> 02:41:59,500
And then we reassign it here.

2351
02:41:59,500 --> 02:42:02,900
So, first we declare the sentence to be the string 
“ is cool!”.

2352
02:42:02,900 --> 02:42:06,100
Then it’s reassigned to be the string 
“ is amazing!”.

2353
02:42:06,100 --> 02:42:08,600
So, if we run that it should work.

2354
02:42:08,600 --> 02:42:11,600
It prints freeCodeCamp is amazing! many times.

2355
02:42:11,600 --> 02:42:16,400
But if we change this to const let’s see what happens.

2356
02:42:16,400 --> 02:42:19,800
Now I’ll run this and we get an error.

2357
02:42:19,800 --> 02:42:22,600
“sentence” is read-only.

2358
02:42:22,600 --> 02:42:29,000
If you declare a variable with the const keyword 
you cannot reassign it afterwards.

2359
02:42:29,000 --> 02:42:35,600
This can be very helpful to prevent you from accidentally making mistakes later.

2360
02:42:35,600 --> 02:42:40,700
If you know for sure that you never want to 
reassign a variable, 

2361
02:42:40,700 --> 02:42:47,800
always use const so you don’t accidentally reassign 
it when you don’t mean to.

2362
02:42:47,800 --> 02:42:55,300
Another thing is when you’re using const 
it’s very common to use all capital letters.

2363
02:42:55,300 --> 02:42:59,300
So, like this, SENTENCE like that.

2364
02:42:59,300 --> 02:43:02,000
And that’s another away to remember that 
it’s a constant.

2365
02:43:02,000 --> 02:43:06,600
So, if I rename this here, 
I’m also going to have to repeat it here.

2366
02:43:06,600 --> 02:43:10,900
And while we're at it, we're going to change this to let 

2367
02:43:10,900 --> 02:43:15,300
because for the most part 
you should only use const or let, 

2368
02:43:15,300 --> 02:43:18,700
but there are certain circumstances 
where you would use var.

2369
02:43:18,700 --> 02:43:22,600
And also in some other videos 
in this course I’ll be using var.

2370
02:43:22,600 --> 02:43:26,500
But in your own code you should mainly use 
const and let.

2371
02:43:26,500 --> 02:43:29,000
Let’s reload this to see what happens.

2372
02:43:29,000 --> 02:43:30,200
And it worked.

2373
02:43:30,200 --> 02:43:32,700
freeCodeCamp is cool! many times.

2374
02:43:32,700 --> 02:43:39,100
We can no longer say that freeCodeCamp is awesome, 
even though we know it actually is.

2375
02:43:39,100 --> 02:43:43,800
[Mutate an Array Declared with const]

2376
02:43:43,800 --> 02:43:49,800
While you cannot reassign a variable declare with 
const you can mutate an array.

2377
02:43:49,800 --> 02:43:52,500
So, look at this example that’s not going to work.

2378
02:43:52,500 --> 02:43:57,600
First we declare the variable s 
and we assign it to an array.

2379
02:43:57,600 --> 02:43:59,600
We declare with const.

2380
02:43:59,600 --> 02:44:02,600
And now we're going to reassign the variable s here.

2381
02:44:02,600 --> 02:44:06,900
But if we do that we're going to get the error “s” 
is read-only.

2382
02:44:06,900 --> 02:44:12,700
However, we can update the array 
using bracket notation.

2383
02:44:12,700 --> 02:44:15,200
So, I’ll just comment that out.

2384
02:44:15,200 --> 02:44:18,600
And using bracket notation, I’ll do index [0].

2385
02:44:18,600 --> 02:44:20,900
I’ll assign to the 2.

2386
02:44:20,900 --> 02:44:27,300
Index [1], I’ll assign that to 5.

2387
02:44:27,300 --> 02:44:33,500
And then index [2] I’ll assign that to 7.

2388
02:44:33,500 --> 02:44:38,500
And just like that it is going to reassign the array.

2389
02:44:38,500 --> 02:44:41,500
So, if I just do a console.log here.

2390
02:44:41,500 --> 02:44:50,700
Console.log and put the array in there, 
we should see the new array here, [2, 5, 7].

2391
02:44:50,700 --> 02:44:54,800
[Prevent Object Mutation]

2392
02:44:54,800 --> 02:45:01,900
As seen previously, a const declaration alone 
doesn’t really protect your data from mutation.

2393
02:45:01,900 --> 02:45:07,600
If you have an object or an array, you can still 
mutate it even if it’s declared with const.

2394
02:45:07,600 --> 02:45:14,500
There is something called object.freeze 
that will prevent data mutation.

2395
02:45:14,500 --> 02:45:17,200
So, let me talk to you about object.freeze.

2396
02:45:17,200 --> 02:45:20,700
First of all, let’s understand this function here.

2397
02:45:20,700 --> 02:45:24,100
We're using this function to demonstrate 
object.freeze.

2398
02:45:24,100 --> 02:45:29,600
So, it’s going to create this constant, 
a math constant with the Pi in it.

2399
02:45:29,600 --> 02:45:31,200
This is an object.

2400
02:45:31,200 --> 02:45:35,100
And right now this can still be changed.

2401
02:45:35,100 --> 02:45:40,600
So, if we look down here, this is a try catch block.

2402
02:45:40,600 --> 02:45:44,000
We'll talk about try catch blocks in more detail later.

2403
02:45:44,000 --> 02:45:49,500
But for now, you just have to know that it’s going to 
try what’s in the first part of the block.

2404
02:45:49,500 --> 02:45:55,000
And if there’s an error, then it’s going to go into 
the catch part and it’s going to log it out.

2405
02:45:55,000 --> 02:46:01,200
So, right now we're going to try to change 
MATH_CONSTANTS.PI to 99.

2406
02:46:01,200 --> 02:46:08,500
And if you can see right here, we're going 
to return the MATH_CONSTANTS.PI.

2407
02:46:08,500 --> 02:46:13,300
And down here we are putting it 
into a variable called PI.

2408
02:46:13,300 --> 02:46:19,500
So, if we run this you’ll see 
that we console.log PI and it’s 99.

2409
02:46:19,500 --> 02:46:25,500
But wait a second, we don’t want PI to change 
because we know that PI never changes.

2410
02:46:25,500 --> 02:46:29,200
That’s why we're going to use object.freeze.

2411
02:46:29,200 --> 02:46:30,800
So, I’ll put it right here.

2412
02:46:30,800 --> 02:46:34,700
I’m going to do object.freeze.

2413
02:46:34,700 --> 02:46:41,300
And in parenthesis I’ll put the object 
which is (MATH_CONSTANTS).

2414
02:46:41,300 --> 02:46:44,000
Now I’ve frozen MATH_CONSTANTS.

2415
02:46:44,000 --> 02:46:50,200
So when it tries to change MATH_CONSTANTS.PI 
here it’s not going to work 

2416
02:46:50,200 --> 02:46:55,900
and it’s going to go into this catch block 
and it’s going to log out the error or the exception.

2417
02:46:55,900 --> 02:46:57,300
So, let me run that.

2418
02:46:57,300 --> 02:46:58,800
And you’ll see.

2419
02:46:58,800 --> 02:47:03,800


2420
02:47:03,800 --> 02:47:04,700
So, we had an error.

2421
02:47:04,700 --> 02:47:08,600
And we can see here that PI stays the same at 3,1004.

2422
02:47:08,600 --> 02:47:13,600
So whenever you have an object and you don’t want 
any of the items in the object to change, 

2423
02:47:13,600 --> 02:47:15,700
use object.freeze.

2424
02:47:15,700 --> 02:47:20,700
[Use Arrow Functions to Write Concise Anonymous Functions]

2425
02:47:20,700 --> 02:47:24,200
This function here is called an anonymous function.

2426
02:47:24,200 --> 02:47:26,000
It doesn’t have a name.

2427
02:47:26,000 --> 02:47:29,400
It is assigned to this variable magic.

2428
02:47:29,400 --> 02:47:34,700
But there’s no word right before the function keyword 
to assign the name to the function.

2429
02:47:34,700 --> 02:47:40,400
Whenever you have an anonymous function 
you can convert it into an arrow function.

2430
02:47:40,400 --> 02:47:43,400
That makes it a little quicker to write.

2431
02:47:43,400 --> 02:47:47,300
So, instead of the word function, 
I’m going to take that out completely.

2432
02:47:47,300 --> 02:47:49,900
And then put an arrow here.

2433
02:47:49,900 --> 02:47:54,600
So, this is the same thing except 
it’s just a little quicker to write.

2434
02:47:54,600 --> 02:47:57,500
But we can shorten this even more.

2435
02:47:57,500 --> 02:48:04,400
If we're just returning one value here 
we don’t even need the return keyword.

2436
02:48:04,400 --> 02:48:07,200
And we don’t need the curly braces.

2437
02:48:07,200 --> 02:48:09,200
So, I can delete all this.

2438
02:48:09,200 --> 02:48:12,000
And I can delete all this here.

2439
02:48:12,000 --> 02:48:17,700
And now this is the full function from before, 
but it’s just really shortened up.

2440
02:48:17,700 --> 02:48:20,900
And to make this even nicer, 
we're not going to use var.

2441
02:48:20,900 --> 02:48:22,500
I’m going to change this to const.

2442
02:48:22,500 --> 02:48:27,500
[Write Arrow Functions with Parameters]

2443
02:48:27,500 --> 02:48:31,900
Just like in a normal function, 
you can pass arguments to arrow functions.

2444
02:48:31,900 --> 02:48:36,000
So let me show you how to convert this function 
into an arrow function.

2445
02:48:36,000 --> 02:48:39,200
So, it’s a normal function now 
and it has two arguments.

2446
02:48:39,200 --> 02:48:43,300
And then it’s going to concatenate 
the two arrays passed in.

2447
02:48:43,300 --> 02:48:46,500
So, first we'll take off the function keyword.

2448
02:48:46,500 --> 02:48:49,300
We're going to leave these parenthesis 
with the parameters.

2449
02:48:49,300 --> 02:48:51,100
Now I’ll put the arrow.

2450
02:48:51,100 --> 02:48:53,400
Since all we're doing is returning this, 

2451
02:48:53,400 --> 02:48:56,600
we don’t even need the return keyword 
and we don’t need the curly braces.

2452
02:48:56,600 --> 02:48:58,900
So, I’ll take that off.

2453
02:48:58,900 --> 02:49:00,500
We'll take this off.

2454
02:49:00,500 --> 02:49:02,800
And now we’ve done this.

2455
02:49:02,800 --> 02:49:07,800
I just converted that function into an arrow function 
and it has these two parameters.

2456
02:49:07,800 --> 02:49:11,500
So, we just have the parameters in parenthesis.

2457
02:49:11,500 --> 02:49:12,900
We have the arrow.

2458
02:49:12,900 --> 02:49:16,100
And then we have what’s being returned 
right after the arrow.

2459
02:49:16,100 --> 02:49:22,500
So, if I run that you’ll see that we concatenate 
the two arrays that are passed in in this example.

2460
02:49:22,500 --> 02:49:25,700
And then for good measure we'll change this to const.

2461
02:49:25,700 --> 02:49:30,200
[Write Higher Order Arrow Functions]

2462
02:49:30,200 --> 02:49:36,000
Arrow functions work really well with higher order 
functions such as map, filter, and reduce.

2463
02:49:36,000 --> 02:49:41,000
I’ll go into more detail at a different time 
about map, filter, and reduce.

2464
02:49:41,000 --> 02:49:48,100
But the main thing to know is that they take functions 
as arguments for processing collections of data.

2465
02:49:48,100 --> 02:49:54,700
Whenever one function takes another function as an 
argument, that’s a good time for an arrow function.

2466
02:49:54,700 --> 02:49:59,800
So, what we're going to do here 
is we're going to update this function right here.

2467
02:49:59,800 --> 02:50:03,900
We want it to compute the square 
of only the positive integers in the array.

2468
02:50:03,900 --> 02:50:06,900
So, it’s passed in this array which is this.

2469
02:50:06,900 --> 02:50:10,500
And we want to filter out everything 
that’s not a positive integer.

2470
02:50:10,500 --> 02:50:14,700
So, I’m going to use the filter 
and map functions to do that.

2471
02:50:14,700 --> 02:50:21,500
But the main thing I want you to look at is the arrow 
functions that I’m passing in to filter and map.

2472
02:50:21,500 --> 02:50:26,300
This line is going to be a lot more succinct 
because of the arrow functions.

2473
02:50:26,300 --> 02:50:31,400
So, ,we have the squaredIntegers 
is going to be the arr.

2474
02:50:31,400 --> 02:50:35,000
And we're going to filter this.
So, .filter.

2475
02:50:35,000 --> 02:50:39,400
Now, again, I’m not really going to explain in detail 
what the filter function does, 

2476
02:50:39,400 --> 02:50:41,200
but that will be something for another time.

2477
02:50:41,200 --> 02:50:43,100
Just look at this arrow function.

2478
02:50:43,100 --> 02:50:44,900
We're going to create this arrow function.

2479
02:50:44,900 --> 02:50:46,800
We're starting it just like this.

2480
02:50:46,800 --> 02:50:53,500
Now before I showed you that you passed an 
arguments in parenthesis for an arrow function.

2481
02:50:53,500 --> 02:50:57,400
But if you only have a single argument like this, 
the number argument, 

2482
02:50:57,400 --> 02:50:59,700
you don’t need parenthesis around the argument.

2483
02:50:59,700 --> 02:51:02,700
You can just put the argument and then the arrow.

2484
02:51:02,700 --> 02:51:05,500
So, this is the beginning of the arrow function.

2485
02:51:05,500 --> 02:51:09,800
And then we'll see what’s returned
 from the arrow function.

2486
02:51:09,800 --> 02:51:15,100
First we want to filter this array 
so we only have numbers that are integers 

2487
02:51:15,100 --> 02:51:17,300
and numbers that are more than zero.

2488
02:51:17,300 --> 02:51:21,700
So, we'll do Number.isInteger.

2489
02:51:21,700 --> 02:51:26,300
And then we will pass in the number.

2490
02:51:26,300 --> 02:51:33,800
And number is more than 0.

2491
02:51:33,800 --> 02:51:38,400
So, let me complete the parenthesis here.

2492
02:51:38,400 --> 02:51:42,300
Now the result of this filter command 

2493
02:51:42,300 --> 02:51:49,400
will be an array with all the numbers 
that are more than 0 and also integers.

2494
02:51:49,400 --> 02:51:54,900
So, that will be 4, 42, and 6.

2495
02:51:54,900 --> 02:52:01,300
But after we get that new array we want to get t
he square of each number in that array.

2496
02:52:01,300 --> 02:52:04,700
So, that’s where we’re going to use the map function.

2497
02:52:04,700 --> 02:52:08,900
Now the map function takes a function as its argument.

2498
02:52:08,900 --> 02:52:14,300
But instead of writing a full function out 
we can use an arrow function.

2499
02:52:14,300 --> 02:52:18,900
So, we're going to pass in x to the function.

2500
02:52:18,900 --> 02:52:22,100
And then there’s going to be an arrow function.

2501
02:52:22,100 --> 02:52:27,400
Now x just means every element from the array 
that’s being passed to it.

2502
02:52:27,400 --> 02:52:32,200
So, remember the map is getting the array for 42, 6.

2503
02:52:32,200 --> 02:52:36,100
x means for every element in the array 
this is what we're going to do to it.

2504
02:52:36,100 --> 02:52:42,100
x * x because it’s going to be squared.

2505
02:52:42,100 --> 02:52:47,800
Again, the main point of the lesson is not 
to understand the filter and map functions, 

2506
02:52:47,800 --> 02:52:50,200
but to see that we can put an arrow function, 

2507
02:52:50,200 --> 02:52:56,600
we can pass in an arrow function and it makes it 
so we can fit everything really succinctly on one line.

2508
02:52:56,600 --> 02:53:00,300
So, let’s reload this and see if it works.

2509
02:53:00,300 --> 02:53:04,200
Now we have [16, 1764, 36].

2510
02:53:04,200 --> 02:53:08,300
[Write Higher Order Arrow Functions]

2511
02:53:08,300 --> 02:53:12,200
In order to create more flexible functions 
you can use default parameters.

2512
02:53:12,200 --> 02:53:17,900
The default parameter kicks in when the argument 
is not specified or is undefined.

2513
02:53:17,900 --> 02:53:22,700
So, for instance, with this increment function 
we want to change it.

2514
02:53:22,700 --> 02:53:24,500
We want to change the increment function.

2515
02:53:24,500 --> 02:53:29,800
So, you can pass in two arguments, 
the 5 and 2 to increment by 2.

2516
02:53:29,800 --> 02:53:35,100
Or you can just pass in the one argument, 
the 5 if you want to increment by 1.

2517
02:53:35,100 --> 02:53:37,800
So, here are the numbers we're passing in.

2518
02:53:37,800 --> 02:53:39,400
A number and a value.

2519
02:53:39,400 --> 02:53:42,600
So, we just have to put value = 1.

2520
02:53:42,600 --> 02:53:48,300
So now if a value isn’t passed in, 
it will be set to 1 automatically, 

2521
02:53:48,300 --> 02:53:52,000
but if it is passed in, it will be set to 
whatever is passed in.

2522
02:53:52,000 --> 02:53:59,500
So, if we run this we can look on the console, 
we have 7 for this first one and 6 for the second.

2523
02:53:59,500 --> 02:54:03,700
[Use the Rest Operator with Function Parameters]

2524
02:54:03,700 --> 02:54:09,500
The rest operator allows you to create a function 
that takes a variable number of arguments.

2525
02:54:09,500 --> 02:54:11,500
The rest operator is three dots.

2526
02:54:11,500 --> 02:54:13,800
So, we have this function here.

2527
02:54:13,800 --> 02:54:19,500
And it’s taking three arguments, x, y, and z 
and it’s summing them.

2528
02:54:19,500 --> 02:54:25,000
So, at first it’s converting these x, y, z 
into an array called args.

2529
02:54:25,000 --> 02:54:27,800
And then it’s reducing them.

2530
02:54:27,800 --> 02:54:32,100
So, it’s summing them all up here 
and then returning the results.

2531
02:54:32,100 --> 02:54:38,500
So, right now if we just run this, 
it’s going to log 6 because 1 + 2 + 3 is 6.

2532
02:54:38,500 --> 02:54:42,000
But we can change this to use the rest operator.

2533
02:54:42,000 --> 02:54:45,200
So, we're still going to pass in 1, 2, 3.

2534
02:54:45,200 --> 02:54:53,900
But where it’s accepted here, where we have the 
arguments here, x, y, z, I’m just going to put ....

2535
02:54:53,900 --> 02:54:55,300
That’s the rest operator.

2536
02:54:55,300 --> 02:54:56,600
Just ....

2537
02:54:56,600 --> 02:54:59,100
And I’m going to put args.

2538
02:54:59,100 --> 02:55:02,100
So, with this rest operator, ..., 

2539
02:55:02,100 --> 02:55:07,200
it will convert everything that’s passed in 
into one array and the array is called args.

2540
02:55:07,200 --> 02:55:09,900
So, now we don’t need this anymore.

2541
02:55:09,900 --> 02:55:12,600
And it should work the same.

2542
02:55:12,600 --> 02:55:14,700
If we run this, we'll get 6.

2543
02:55:14,700 --> 02:55:18,400
But we can also now add any number of numbers.

2544
02:55:18,400 --> 02:55:21,900
So, I’ll put a 4 on the end and 10.

2545
02:55:21,900 --> 02:55:23,900
It’s going to add those numbers together.

2546
02:55:23,900 --> 02:55:26,900
So, before we could only pass in three arguments.

2547
02:55:26,900 --> 02:55:30,300
And now, we can have any number of arguments.

2548
02:55:30,300 --> 02:55:34,200
[Use the Spread Operator to Evaluate Arrays In-Place]

2549
02:55:34,200 --> 02:55:38,100
The spread operator looks just like the rest operator.

2550
02:55:38,100 --> 02:55:39,300
Three dots.

2551
02:55:39,300 --> 02:55:43,600
But it expands an already existing array.

2552
02:55:43,600 --> 02:55:46,400
Or it spreads out an array.

2553
02:55:46,400 --> 02:55:51,600
So, it takes an array and spreads it out 
into its individual parts.

2554
02:55:51,600 --> 02:55:54,400
So, here we have an array with some months.

2555
02:55:54,400 --> 02:55:58,800
And the spread operator can spread this array, 

2556
02:55:58,800 --> 02:56:04,700
this arr1 into the individual months 
instead of the actual array here.

2557
02:56:04,700 --> 02:56:09,800
You can only use it in an argument 
to a function or in an array literal.

2558
02:56:09,800 --> 02:56:11,400
So, let’s look at this.

2559
02:56:11,400 --> 02:56:16,500
So, right now we're setting arr2 to equal arr1.

2560
02:56:16,500 --> 02:56:20,100
In this example we're not actually copying it.

2561
02:56:20,100 --> 02:56:25,200
Because if we change arr1, 
if we set the index of arr1 to ‘potato’ 

2562
02:56:25,200 --> 02:56:33,600
and we log arr2, you’ll see that index [0] is “potato” 
even though we're logging arr2 

2563
02:56:33,600 --> 02:56:37,500
and we only changed arr1 
because these are equal.

2564
02:56:37,500 --> 02:56:40,000
arr2 and arr1 are the same.

2565
02:56:40,000 --> 02:56:43,200
But what if we want arr2 to be a copy of arr1 ?

2566
02:56:43,200 --> 02:56:45,300
We can use the spread operator.

2567
02:56:45,300 --> 02:56:49,000
Now we can’t just use the spread operator like this.

2568
02:56:49,000 --> 02:56:50,600
That’s not going to work.

2569
02:56:50,600 --> 02:56:54,700
But if we put this inside brackets, which is an array,

2570
02:56:54,700 --> 02:57:00,400
 it will spread out the contents of arr1 
into this new array.

2571
02:57:00,400 --> 02:57:04,100
So, we're not making arr2 equal to arr1.

2572
02:57:04,100 --> 02:57:09,800
We're making arr2 equal all of the contents of arr1 
so they’ll be different.

2573
02:57:09,800 --> 02:57:11,000
So, if we run this again, 

2574
02:57:11,000 --> 02:57:17,600
you’ll see that it says “January” for the first element 
in the array instead of “potato”.

2575
02:57:17,600 --> 02:57:22,200
[Use Destructuring Assignment 
to Assign Variables from Objects]

2576
02:57:22,200 --> 02:57:26,300
The next few lesson will be about 
destructuring assignment.

2577
02:57:26,300 --> 02:57:32,900
This is a special syntax for neatly assigning values 
taken directly from an object to a variable.

2578
02:57:32,900 --> 02:57:35,200
So, look at this object here.

2579
02:57:35,200 --> 02:57:37,200
We have this object with three elements.

2580
02:57:37,200 --> 02:57:40,700
We have the x, y, and z with their values.

2581
02:57:40,700 --> 02:57:44,100
And it’s all in the voxel variable.

2582
02:57:44,100 --> 02:57:49,400
So, if we want to take each individual element 
in this object 

2583
02:57:49,400 --> 02:57:54,200
and assign it to its own variable, 
this is the old way of doing it.

2584
02:57:54,200 --> 02:57:57,900
So, we can do vox with an x.
This stores x.

2585
02:57:57,900 --> 02:58:00,800
voxel.y stores y.
voxel.z stores z.

2586
02:58:00,800 --> 02:58:09,500
Now with destructuring, there’s a simpler and quicker 
way to assign variables for each element in an object.

2587
02:58:09,500 --> 02:58:13,400
So, here’s the destructuring syntax right here.

2588
02:58:13,400 --> 02:58:18,000
This time, we are creating variables a, b, and c 

2589
02:58:18,000 --> 02:58:24,600
and assigning them to a values 
from the object x, y, and z.

2590
02:58:24,600 --> 02:58:27,500
We can see we put it in curly braces here.

2591
02:58:27,500 --> 02:58:30,100
And we just say it equals the object.

2592
02:58:30,100 --> 02:58:31,500
It equals voxel.

2593
02:58:31,500 --> 02:58:36,000
You can read it like this, get the field of x 
and copy into the value a.

2594
02:58:36,000 --> 02:58:39,500
So, get the field of x from the object, 
copy into the value a.

2595
02:58:39,500 --> 02:58:43,100
Get the field of y from the object, 
copy into the value b.

2596
02:58:43,100 --> 02:58:47,400
Get the field of z, copy it into the value c.

2597
02:58:47,400 --> 02:58:53,600
So, this is just a quicker way of assigning things 
from an object into variables.

2598
02:58:53,600 --> 02:58:59,800
Now we're going to use destructuring to obtain 
the average temperature for tomorrow 

2599
02:58:59,800 --> 02:59:03,200
from the input object AVG_TEMPERATURES.

2600
02:59:03,200 --> 02:59:04,800
So, we have AVG_TEMPERATURES.

2601
02:59:04,800 --> 02:59:08,700
It has today and tomorrow’s temperatures.

2602
02:59:08,700 --> 02:59:14,000
And then the average temperature 
is inputted into this function here.

2603
02:59:14,000 --> 02:59:20,700
So, I’m going to change this line here 
to use destructuring 

2604
02:59:20,700 --> 02:59:26,900
and destructure the AVG_TEMPERATURES 
object here that’s passed into this function.

2605
02:59:26,900 --> 02:59:30,800
So, first I’m just going to put 
the AVG_TEMPERATURES variable here.

2606
02:59:30,800 --> 02:59:35,600
And then on this side of the equals sign 
I’m going to have to use the destructuring.

2607
02:59:35,600 --> 02:59:38,500
So, I’ll put the curly braces.

2608
02:59:38,500 --> 02:59:42,200
And we'll put tomorrow.

2609
02:59:42,200 --> 02:59:47,000
And then a colon, and then the other curly brace.

2610
02:59:47,000 --> 02:59:53,600
So, this is saying get the tomorrow field 
from the AVG_TEMPERATURES object 

2611
02:59:53,600 --> 02:59:57,800
and assign it to the tempOfTomorrow variable.

2612
02:59:57,800 --> 03:00:07,900
So, if we run this, we should see it says 79 in console 
because we got the tempOfTomorrow variable.

2613
03:00:07,900 --> 03:00:11,100
We returned tempOfTomorrow, 
and it was logged right here.

2614
03:00:11,100 --> 03:00:17,100
So, we successfully used destructuring to get the 
tomorrow variable out of AVG_TEMPERATURES.

2615
03:00:17,100 --> 03:00:21,600
[Destructuring Assignment with Nested Objects]

2616
03:00:21,600 --> 03:00:26,200
We can also use destructuring assignment 
to assign variables from nested objects.

2617
03:00:26,200 --> 03:00:30,600
We have this nested object right here, 
the local forecast.

2618
03:00:30,600 --> 03:00:34,700
And inside we have some nested objects.

2619
03:00:34,700 --> 03:00:38,800
So, we have the forecast from today 
and the forecast for tomorrow.

2620
03:00:38,800 --> 03:00:43,900
So, here we have getMaxOfTmrw 
where we’re going to pass in the forecast.

2621
03:00:43,900 --> 03:00:48,000
And here we can see the LOCAL_FORECAST 
becomes the forecast variable.

2622
03:00:48,000 --> 03:00:50,700
And we're trying to figure out the maxOfTomorrow.

2623
03:00:50,700 --> 03:00:54,900
So, we are going to use destructuring 
to figure that out.

2624
03:00:54,900 --> 03:00:58,500
So, it’s going to equal forecast.

2625
03:00:58,500 --> 03:01:01,900
And remember that is a nested object.

2626
03:01:01,900 --> 03:01:06,500
So, here, when you’re destructuring 
you’re always going to use the curly braces.

2627
03:01:06,500 --> 03:01:10,400
And we are first going to get tomorrow.

2628
03:01:10,400 --> 03:01:17,700
And on the other side of the colon we're going to 
have some more curly braces because it’s nested.

2629
03:01:17,700 --> 03:01:23,000
So, we need to go inside of the tomorrow object 
and we need the max.

2630
03:01:23,000 --> 03:01:24,400
So, we'll do max.

2631
03:01:24,400 --> 03:01:26,900
And then we have the colon.

2632
03:01:26,900 --> 03:01:29,200
And maxOfTomorrow.

2633
03:01:29,200 --> 03:01:33,300
Now we need two sets of squiggly braces here.

2634
03:01:33,300 --> 03:01:35,600
So, we have this one.

2635
03:01:35,600 --> 03:01:37,700
And this one.

2636
03:01:37,700 --> 03:01:40,900
And so we’ve destructured two times.

2637
03:01:40,900 --> 03:01:44,500
And the variable is maxOfTomorrow.

2638
03:01:44,500 --> 03:01:50,000
So, we’ve set the max that was inside tomorrow 
to maxOfTomorrow.

2639
03:01:50,000 --> 03:01:54,200
So, if I run this, you’ll see it’s 84,600.

2640
03:01:54,200 --> 03:01:59,000
[Use Destructuring Assignment 
to Assign Variables from Arrays]

2641
03:01:59,000 --> 03:02:02,900
You can use destructuring assignment 
to assign variables from arrays.

2642
03:02:02,900 --> 03:02:05,000
Look at this example here.

2643
03:02:05,000 --> 03:02:08,200
So, we have this array of [1, 2, 3, 4, 5, 6] 

2644
03:02:08,200 --> 03:02:15,500
and we're assigning the variable z and x to the first 
two numbers of the array, 1 and 2.

2645
03:02:15,500 --> 03:02:20,300
The difference between destructuring 
from arrays and destructuring from objects 

2646
03:02:20,300 --> 03:02:26,300
is that you cannot specify which element 
from the array to go into a variable.

2647
03:02:26,300 --> 03:02:28,100
It just goes in order.

2648
03:02:28,100 --> 03:02:35,200
However, if we wanted number 4 to be going to 
a variable, we can just do like this.

2649
03:02:35,200 --> 03:02:37,900
We would just add some commas.

2650
03:02:37,900 --> 03:02:40,900
So, we put a comma with nothing in it, like that.

2651
03:02:40,900 --> 03:02:42,500
Two commas in a row.

2652
03:02:42,500 --> 03:02:44,100
And I’ll put a y here.

2653
03:02:44,100 --> 03:02:48,200
So, now we have the first element, 
the second element, we skip the third element, 

2654
03:02:48,200 --> 03:02:50,200
and then we have the fourth element.

2655
03:02:50,200 --> 03:02:57,100
So, if I console.log z, x, and y 
we should see 1, 2, and 4.

2656
03:02:57,100 --> 03:02:59,100
Here’s another thing you can do.

2657
03:02:59,100 --> 03:03:04,200
You can use destructuring of arrays 
to switch the places of variables.

2658
03:03:04,200 --> 03:03:06,500
Let me uncomment out these.

2659
03:03:06,500 --> 03:03:15,400
And what I’m going to do is use destructuring 
to switch the places of a and b.

2660
03:03:15,400 --> 03:03:17,000
So, it’ll be like this.

2661
03:03:17,000 --> 03:03:20,000
I’ll say [a, b].

2662
03:03:20,000 --> 03:03:24,500
And I’ll say = [b, a].

2663
03:03:24,500 --> 03:03:29,300
So now it’s just taking this and switching the places.

2664
03:03:29,300 --> 03:03:36,700
So instead of a being 8 and b equals 6, 
it’s now going to log out 6 and 8.

2665
03:03:36,700 --> 03:03:37,800
So, let’s see.

2666
03:03:37,800 --> 03:03:39,900
Yeah, it worked.

2667
03:03:39,900 --> 03:03:44,000
[Use Destructuring assignment 
with the Rest Operator]

2668
03:03:44,000 --> 03:03:48,800
We can use destructuring assignment 
with the rest operator to reassign array elements.

2669
03:03:48,800 --> 03:03:54,100
We can see in this example we have this array, 
the digits 1 through 10 in the array.

2670
03:03:54,100 --> 03:03:57,500
And we have this removeFirstTwo function.

2671
03:03:57,500 --> 03:03:58,900
We’re calling it here.

2672
03:03:58,900 --> 03:04:00,700
And we're passing in the source.

2673
03:04:00,700 --> 03:04:01,900
That’s the source array.

2674
03:04:01,900 --> 03:04:03,500
And it becomes the list.

2675
03:04:03,500 --> 03:04:08,500
So, we want to return the array 
with the first two elements removed.

2676
03:04:08,500 --> 03:04:12,800
So, let’s use the rest operator inside an array here.

2677
03:04:12,800 --> 03:04:16,500
So, we'll use the rest operator, the three little dots.

2678
03:04:16,500 --> 03:04:23,400
And to remove the first two, I just have to put two 
commas here with nothing in between them.

2679
03:04:23,400 --> 03:04:28,400
So, it’s saying do nothing for the first element, 
do nothing for second element.

2680
03:04:28,400 --> 03:04:32,300
Everything else, put into the arr variable.

2681
03:04:32,300 --> 03:04:37,800
We could have assigned the first two numbers 
in the array to two other variables.

2682
03:04:37,800 --> 03:04:48,500
I could do a, b, and then a would be 1, b would be 2, 
and then arr would be an array of 3, 4, 5, 6, 7, 8, 9, 10.

2683
03:04:48,500 --> 03:04:53,500
But right now we just need to return the array 
with the first two elements missing.

2684
03:04:53,500 --> 03:04:57,600
So, if I run that you’ll see that we did that.

2685
03:04:57,600 --> 03:05:02,700
If you look in the console, we've logged the array 
and the first two elements are missing.

2686
03:05:02,700 --> 03:05:05,200
And then we have the original array down here.

2687
03:05:05,200 --> 03:05:09,100
[Use Destructuring Assignment to Pass an Object 
as a Function’s Parameters]

2688
03:05:09,100 --> 03:05:13,700
You can use destructuring assignment 
to pass an object as a function’s parameter.

2689
03:05:13,700 --> 03:05:15,700
Let me show you what I mean.

2690
03:05:15,700 --> 03:05:18,500
Right now we have this half function.

2691
03:05:18,500 --> 03:05:21,000
And it’s getting the stats argument.

2692
03:05:21,000 --> 03:05:24,600
So, the stats is being passed what is called down here.

2693
03:05:24,600 --> 03:05:29,200
And it’s passing in this whole object, 
so this whole stats object.

2694
03:05:29,200 --> 03:05:34,700
But you can see within this function 
we're only using stats.max and stats.min.

2695
03:05:34,700 --> 03:05:42,400
So, instead of passing the entire stats into this 
function, we can just pass in what we need.

2696
03:05:42,400 --> 03:05:44,500
So, this is what we're going to do.

2697
03:05:44,500 --> 03:05:52,000
I’m going to put in some curly braces here 
and just put max and min.

2698
03:05:52,000 --> 03:06:01,900
So, now when the stats get passed in, 
it’s destructured into just the max and min variables.

2699
03:06:01,900 --> 03:06:04,600
And the max and min from the function 
gets passed in.

2700
03:06:04,600 --> 03:06:10,300
So now instead of doing stats.max 
we can just do max.

2701
03:06:10,300 --> 03:06:14,200
Instead of stats.min we can do min.

2702
03:06:14,200 --> 03:06:19,000
So, if we reload that it’s going to work 
exactly like it did before, 

2703
03:06:19,000 --> 03:06:22,200
but now we only pass in what we need.

2704
03:06:22,200 --> 03:06:25,400
This is commonly used with API calls.

2705
03:06:25,400 --> 03:06:30,000
When you are getting information 
from an Ajax request or an API request, 

2706
03:06:30,000 --> 03:06:32,800
it will often have a lot more information 
than what you need.

2707
03:06:32,800 --> 03:06:38,300
And you can use destructuring to get it down to 
what we actually want to work with.

2708
03:06:38,300 --> 03:06:42,200
[Create Strings using Template Literals]

2709
03:06:42,200 --> 03:06:47,900
Template literals are a special type of string 
that makes creating complex strings easier.

2710
03:06:47,900 --> 03:06:50,600
You make them with this backtick.

2711
03:06:50,600 --> 03:06:54,100
So, here’s an example of a template literal right here.

2712
03:06:54,100 --> 03:06:58,400
We have the beginning backtick 
and we have the ending backtick.

2713
03:06:58,400 --> 03:07:04,100
This would be in place of using a quotation, 
a single or double quotation mark.

2714
03:07:04,100 --> 03:07:07,800
A few advantages of using these template literals, 

2715
03:07:07,800 --> 03:07:13,700
these backticks instead of quotation marks, are one, 
you can make multiline strings.

2716
03:07:13,700 --> 03:07:15,800
You can see this has two lines.

2717
03:07:15,800 --> 03:07:18,500
Here’s the first line and here’s the second line.

2718
03:07:18,500 --> 03:07:23,400
And if we log the greeting, it’s going to 
put the new line right in there.

2719
03:07:23,400 --> 03:07:30,000
Another thing is you can add single or double 
quotation marks right in the string 

2720
03:07:30,000 --> 03:07:31,800
and you don’t have to escape them.

2721
03:07:31,800 --> 03:07:35,700
The third thing is you can put variables 
right in the string.

2722
03:07:35,700 --> 03:07:38,900
So, if we see this, see the $.

2723
03:07:38,900 --> 03:07:41,400
And then we have these curly braces.

2724
03:07:41,400 --> 03:07:48,500
And so, anything in between these curly braces 
that start with the $ is Javascript.

2725
03:07:48,500 --> 03:07:53,100
So, right now we just have this variable,
 person.name which gets the name from up here.

2726
03:07:53,100 --> 03:07:56,800
And then here we have person.age 
which gets the age from right there.

2727
03:07:56,800 --> 03:08:01,800
So, it makes things easier 
that you can put variables right in the strings.

2728
03:08:01,800 --> 03:08:03,700
So, if we run that, you’ll see.

2729
03:08:03,700 --> 03:08:08,300


2730
03:08:08,300 --> 03:08:13,100
And normally it would actually also be printed 
with a new line.

2731
03:08:13,100 --> 03:08:17,400
But with this exact code editor and console, 
it doesn’t show the new line.

2732
03:08:17,400 --> 03:08:21,800
So, there’s going to be a coding challenge 
that we're going to do right down here.

2733
03:08:21,800 --> 03:08:25,000
We have this makeList function.

2734
03:08:25,000 --> 03:08:31,700
And we want it to create a list based 
on the array that’s passed in.

2735
03:08:31,700 --> 03:08:36,400
So, when we call makeList, we pass in result.failure.

2736
03:08:36,400 --> 03:08:37,300
Well, here’s result.

2737
03:08:37,300 --> 03:08:39,600
result.failure is this array here.

2738
03:08:39,600 --> 03:08:43,700
And we want it to return an array that looks like this.

2739
03:08:43,700 --> 03:08:52,400
Each element in the array is a template literal 
that has some HTML in it 

2740
03:08:52,400 --> 03:08:57,000
and then it also has this no-var, var-on-top, 

2741
03:08:57,000 --> 03:09:01,100
and linebreak that comes right from this array 
that’s passed in.

2742
03:09:01,100 --> 03:09:04,300
So, let’s use template literal to create that.

2743
03:09:04,300 --> 03:09:11,200
So, instead of setting this to equal null, 
I’m going to start this off to be an empty array.

2744
03:09:11,200 --> 03:09:15,800
Now, there’s many ways to do this, 
but I’m going to use the classic for loop.

2745
03:09:15,800 --> 03:09:18,100
So, we'll do for().

2746
03:09:18,100 --> 03:09:22,300
And hopefully, you’ll remember 
how to make a for loop.

2747
03:09:22,300 --> 03:09:30,500
We'll do (let i = 0 while i is less than arr.length).

2748
03:09:30,500 --> 03:09:34,600
And then at the end we will increment i.

2749
03:09:34,600 --> 03:09:42,600
So, inside this for loop we'll do 
resultDisplayArray.push.

2750
03:09:42,600 --> 03:09:46,500
And then here is where I’m going to 
use the template literal.

2751
03:09:46,500 --> 03:09:48,100
Put a backtick.

2752
03:09:48,100 --> 03:09:51,100
And I’ll put this HTML code here.

2753
03:09:51,100 --> 03:09:57,700
<li class=”text-warning”>.

2754
03:09:57,700 --> 03:10:05,500
And now this next part is going to be a variable 
because it changes for each array element here.

2755
03:10:05,500 --> 03:10:11,100
So, I’m going to do dollar sign 
and then the curly braces.

2756
03:10:11,100 --> 03:10:13,000
And now I can just do arr.

2757
03:10:13,000 --> 03:10:15,900
And then index[i].

2758
03:10:15,900 --> 03:10:18,900
Now end curly brace.

2759
03:10:18,900 --> 03:10:23,800
And then I can just put the </li>.

2760
03:10:23,800 --> 03:10:24,900
Okay.

2761
03:10:24,900 --> 03:10:30,200
And if we console.log this out 
because we just finished that, 

2762
03:10:30,200 --> 03:10:38,900
I do console.log(resultDisplayArray) 
the array looks just like it’s supposed to be.

2763
03:10:38,900 --> 03:10:41,400
If you look in the console, it returns correctly.

2764
03:10:41,400 --> 03:10:46,700
[Write Concise Object Literal Declarations 
Using Simple Fields]

2765
03:10:46,700 --> 03:10:51,300
ES6 added some nice support 
for easily defining object literals.

2766
03:10:51,300 --> 03:10:56,100
If we look at this function here, 
this function is an arrow function.

2767
03:10:56,100 --> 03:11:00,000
It takes in three variables, name, age, and gender.

2768
03:11:00,000 --> 03:11:03,400
And it’s going to return an object.

2769
03:11:03,400 --> 03:11:10,900
And the object is going to have a series of key value 
pairs where the key is the name, age, and gender.

2770
03:11:10,900 --> 03:11:13,700
And the values are the passed in variable names.

2771
03:11:13,700 --> 03:11:15,700
The passed in names, age, and gender.

2772
03:11:15,700 --> 03:11:21,500
So, if you look in the console 
you can see this currently does.

2773
03:11:21,500 --> 03:11:23,300
We did the createPerson.

2774
03:11:23,300 --> 03:11:25,400
We passed in a name, age, and gender.

2775
03:11:25,400 --> 03:11:29,000
And you can see in the console, the object is name.

2776
03:11:29,000 --> 03:11:31,100
And “Zodiac Hasbro”, age 56, gender:  “male”.

2777
03:11:31,100 --> 03:11:33,800
So, you can see there’s some repetition.

2778
03:11:33,800 --> 03:11:38,000
We’re repeating name:  
name, age:  age, gender:  gender.

2779
03:11:38,000 --> 03:11:41,700
Now the first name is the key 
and the second name is the value.

2780
03:11:41,700 --> 03:11:45,100
But there’s a way to just make this simpler.

2781
03:11:45,100 --> 03:11:51,300
If you know that you want to create an object 
where the key is the name of the variable 

2782
03:11:51,300 --> 03:11:56,100
and the value is the value of the variable, 
there’s an easier way to do it.

2783
03:11:56,100 --> 03:11:58,600
We can actually delete this whole thing here.

2784
03:11:58,600 --> 03:12:02,500
And this is how we're going to do it.

2785
03:12:02,500 --> 03:12:07,100
We'll just do name, age, gender.

2786
03:12:07,100 --> 03:12:10,500
Javascript knows that it’s going to return this object 

2787
03:12:10,500 --> 03:12:15,900
and it’s going to have three key value pairs, 
the name, age and gender.

2788
03:12:15,900 --> 03:12:19,800
So, if I reload this, you’ll see in the console 
it looks exactly the same 

2789
03:12:19,800 --> 03:12:24,200
because this code does the same thing 
that the previous code did.

2790
03:12:24,200 --> 03:12:28,100
[Write Concise Declarative Functions]

2791
03:12:28,100 --> 03:12:30,400
An object can contain a function.

2792
03:12:30,400 --> 03:12:34,700
This is the long way to put a function within an object.

2793
03:12:34,700 --> 03:12:37,000
But there is a simpler way.

2794
03:12:37,000 --> 03:12:39,300
We have the setGear function.

2795
03:12:39,300 --> 03:12:45,000
But instead of using the function keyword 
and this colon, we can just delete all that.

2796
03:12:45,000 --> 03:12:47,800
And the now this is the new way.

2797
03:12:47,800 --> 03:12:51,700
If I load this again, you’ll see 3 in the console 
just like it was before.

2798
03:12:51,700 --> 03:12:55,300
Because we've been able to set the gear 
using that function.

2799
03:12:55,300 --> 03:12:59,400
[Use class Syntax to Define a Constructor Function]

2800
03:12:59,400 --> 03:13:04,700
ES6 provides a syntax to create objects 
using the class keyword.

2801
03:13:04,700 --> 03:13:08,400
So, here’s the older way to create an object.

2802
03:13:08,400 --> 03:13:10,900
It’s with the new keyword.

2803
03:13:10,900 --> 03:13:14,800
We can instantiate an object using this new keyword.

2804
03:13:14,800 --> 03:13:17,300
And we're instantiating the SpaceShuttle object.

2805
03:13:17,300 --> 03:13:20,700
We have to have this constructor function up here.

2806
03:13:20,700 --> 03:13:23,900
So, we use this to construct the object.

2807
03:13:23,900 --> 03:13:26,900
Where we pass in the target planet, ‘Jupiter’.

2808
03:13:26,900 --> 03:13:30,300
And we said the targetPlanet of this.targetPlanet.

2809
03:13:30,300 --> 03:13:37,400
Once we create the new object like this, 
that allows us to do zeus.targetPlanet.

2810
03:13:37,400 --> 03:13:40,600
So, zeus.targetPlanet which we set to Jupiter.

2811
03:13:40,600 --> 03:13:44,100
So, in the console you can see Jupiter.

2812
03:13:44,100 --> 03:13:48,400
The class syntax replaces 
the constructor function creation.

2813
03:13:48,400 --> 03:13:50,300
So, I’m going to delete that.

2814
03:13:50,300 --> 03:13:51,900
We're going to use the class syntax.

2815
03:13:51,900 --> 03:13:56,200
So, I’ll do class SpaceShuttle.

2816
03:13:56,200 --> 03:13:59,200
And then we have the curly brace here.

2817
03:13:59,200 --> 03:14:03,500
And so, inside here we have a constructor.

2818
03:14:03,500 --> 03:14:08,100
So, do constructor(targetPlanet).

2819
03:14:08,100 --> 03:14:10,900
And then that’s all.

2820
03:14:10,900 --> 03:14:13,600
We just have to put in the curly brace.

2821
03:14:13,600 --> 03:14:17,700
And this works exactly the same as before.

2822
03:14:17,700 --> 03:14:20,500
We’re using the class keyword and this constructor.

2823
03:14:20,500 --> 03:14:28,900
So, down here we are going to do the same thing 
for a vegetable class.

2824
03:14:28,900 --> 03:14:35,300
So, for the vegetable class, 
we'll have class Vegetable.

2825
03:14:35,300 --> 03:14:38,500
And we're going to have a constructor 
with the (name).

2826
03:14:38,500 --> 03:14:44,000
this.name = name.

2827
03:14:44,000 --> 03:14:53,900
So, now that we have this, we can set this Vegetable 
to makeClass which will return a Vegetable class.

2828
03:14:53,900 --> 03:14:55,500
So, that’s up here.

2829
03:14:55,500 --> 03:15:01,400
And then when we do new Vegetable 
and passing ‘carrot’, this carrot will go into here.

2830
03:15:01,400 --> 03:15:03,500
And it’ll get set as this.name.

2831
03:15:03,500 --> 03:15:09,900
So, when we console.log carrot.name, 
we should get carrot.

2832
03:15:09,900 --> 03:15:14,500
[Use getters and setters to Control Access 
to an Object]

2833
03:15:14,500 --> 03:15:18,600
With the class object you often want to obtain 
values from the object 

2834
03:15:18,600 --> 03:15:21,300
and set a value of a property within an object.

2835
03:15:21,300 --> 03:15:23,600
This are often called getters and setters.

2836
03:15:23,600 --> 03:15:28,900
So in this class object, we have the constructor 
which we already talked about.

2837
03:15:28,900 --> 03:15:35,100
We also have a getter and setter 
to get and set the writer.

2838
03:15:35,100 --> 03:15:38,600
So we can get the writer 
and we can set the writer.

2839
03:15:38,600 --> 03:15:41,100
Getter functions are meant to simply return 

2840
03:15:41,100 --> 03:15:45,000
or get the value of an object’s private variable 
to the user 

2841
03:15:45,000 --> 03:15:47,700
without the user directly accessing 
the private variable.

2842
03:15:47,700 --> 03:15:54,600
So, the private variable is this _author 
that gets set when you construct the object.

2843
03:15:54,600 --> 03:16:00,300
And then when we do get writer, 
it’s going to return this ._author.

2844
03:16:00,300 --> 03:16:04,000
So, you never actually interact directly 
with this variable, 

2845
03:16:04,000 --> 03:16:07,600
but it’s going to get the writer 
which is the author here.

2846
03:16:07,600 --> 03:16:09,700
And when you’re setting, it’s the same.

2847
03:16:09,700 --> 03:16:16,300
So, you’re never interacting with the _author, 
but you can set that with the writer setter.

2848
03:16:16,300 --> 03:16:22,500
This change could invoke calculations or even 
overriding the previous value completely.

2849
03:16:22,500 --> 03:16:25,900
So, you can have any number of code lines 
in this setter 

2850
03:16:25,900 --> 03:16:33,000
to ultimately maybe do different calculations before 
you set it or calculations before you get the property.

2851
03:16:33,000 --> 03:16:38,500
So, what we're going to do is make our own getter 
and setter for the Thermostat class.

2852
03:16:38,500 --> 03:16:43,000
We're going to create a Thermostat class 
and we're going to have a getter and setter.

2853
03:16:43,000 --> 03:16:48,300
So, here’s the thing about this challenge, 
is that when we construct the class, 

2854
03:16:48,300 --> 03:16:51,300
it’s going to accept Fahrenheit temperature, 

2855
03:16:51,300 --> 03:16:55,400
but we're going to create a getter and setter 
in the class to obtain the temperature in Celsius.

2856
03:16:55,400 --> 03:16:59,700
So, it’s going to have to do the calculation 
right within the class.

2857
03:16:59,700 --> 03:17:01,100
So, let’s do that.

2858
03:17:01,100 --> 03:17:05,700
We're going to do a class of Thermostat.

2859
03:17:05,700 --> 03:17:09,600
And in this class we need the constructor.

2860
03:17:09,600 --> 03:17:15,100
When you first create the Thermostat 
you’re going to pass in a temperature.

2861
03:17:15,100 --> 03:17:18,500
And remember, this is going to be Fahrenheit.

2862
03:17:18,500 --> 03:17:23,300
Now within this constructor, 
we're going to set a private variable.

2863
03:17:23,300 --> 03:17:26,500
this._temp.

2864
03:17:26,500 --> 03:17:33,700
So, the word this just means that this variable 
is only accessible within this class here.

2865
03:17:33,700 --> 03:17:40,300
And the _temp – whenever you start a variable 
with an _ 

2866
03:17:40,300 --> 03:17:45,100
that’s going to generally signify 
that it’s a private variable.

2867
03:17:45,100 --> 03:17:48,600
That you’re not supposed to access it 
outside of that scope or outside of that class.

2868
03:17:48,600 --> 03:17:51,100
So, we're going to set the temp.

2869
03:17:51,100 --> 03:17:58,200
And we're not going to just put this._temp = temp 
because it’s passed in as a Fahrenheit 

2870
03:17:58,200 --> 03:18:01,300
and we want to convert it to Celsius.

2871
03:18:01,300 --> 03:18:13,000
I just happen to have the equation for Celsius, 
so it’s 5/9 * (temp – 32).

2872
03:18:13,000 --> 03:18:17,500
So, now we can create the getter and setter.

2873
03:18:17,500 --> 03:18:22,600
So, for getter we’ll do get temperature.

2874
03:18:22,600 --> 03:18:28,800
And we're just going to return this._temp.

2875
03:18:28,800 --> 03:18:33,400
Which now it’s in Celsius 
because we're storing the value in Celsius 

2876
03:18:33,400 --> 03:18:36,600
even though the thermostat is created in Fahrenheit.

2877
03:18:36,600 --> 03:18:39,300
So, with the setter, it’s going to be the same.

2878
03:18:39,300 --> 03:18:43,600
set temperature(updatedTemp).

2879
03:18:43,600 --> 03:18:48,200
And it’s now going to still be in Celsus.

2880
03:18:48,200 --> 03:18:54,900
So, this._temp = updatedTemp.

2881
03:18:54,900 --> 03:18:58,800
So, let’s look at the code down here, 
how we're using it.

2882
03:18:58,800 --> 03:19:02,200
So, the const Thermostat = makeClass().

2883
03:19:02,200 --> 03:19:06,300
This makeClass function is going to return 
this thermostat object here.

2884
03:19:06,300 --> 03:19:11,300
And then we're going to do 
const thermos = new Thermostat.

2885
03:19:11,300 --> 03:19:15,500
So, when you’re instantiating an object 
you always use the new keyword.

2886
03:19:15,500 --> 03:19:17,500
new thermostat, that’s this.

2887
03:19:17,500 --> 03:19:19,600
And we're passing in 76.

2888
03:19:19,600 --> 03:19:22,300
That goes into the constructor, the temp.

2889
03:19:22,300 --> 03:19:29,700
And so we do this calculation to convent that 
Fahrenheit to the Celsius in this local variable here.

2890
03:19:29,700 --> 03:19:33,800
And then let temp = themos.temperature.

2891
03:19:33,800 --> 03:19:41,600
So, thermos.temperature is going to use the getter, 
get temperature, and it’s going to return this._temp.

2892
03:19:41,600 --> 03:19:46,100
So, a key thing to look at is that there are now parenthesis after this.

2893
03:19:46,100 --> 03:19:52,100
So, generally, if something is a function, 
you would see parenthesis after the function name, 

2894
03:19:52,100 --> 03:19:57,800
but if it’s a variable or a property name, 
it’s going to not have parenthesis.

2895
03:19:57,800 --> 03:20:02,900
So, getters and setters 
are accessed similar to properties.

2896
03:20:02,900 --> 03:20:07,200
And then we can use the setter here, 
thermo.temperature = 26, 

2897
03:20:07,200 --> 03:20:10,400
and then it sets it with the updated temperature.

2898
03:20:10,400 --> 03:20:14,300
And now we can say 
temp = thermos.temperature.

2899
03:20:14,300 --> 03:20:19,300
And if we do a console.log here, 
we can do that with the temp.

2900
03:20:19,300 --> 03:20:23,700
And it should have the new temperature if load that.

2901
03:20:23,700 --> 03:20:25,400
26.

2902
03:20:25,400 --> 03:20:29,000
[Understand the Differences Between 
import and require]

2903
03:20:29,000 --> 03:20:35,000
In the past people would use the require function 
to import functions and code from other files.

2904
03:20:35,000 --> 03:20:37,500
But now we have import and export.

2905
03:20:37,500 --> 03:20:41,600
You can export code in one file and then import it 
in another file.

2906
03:20:41,600 --> 03:20:47,100
It also allows you to only import certain functions 
from a file or certain variables.

2907
03:20:47,100 --> 03:20:49,100
Let me show you how it works.

2908
03:20:49,100 --> 03:20:52,600
So, in this file, we have this capitalized string function.

2909
03:20:52,600 --> 03:20:55,100
We're passing in this string “hello”.

2910
03:20:55,100 --> 03:20:58,100
And we want to log out the capitalized strings.

2911
03:20:58,100 --> 03:21:03,600
But right now it just has an error because 
there is no capitalizeString function in this file.

2912
03:21:03,600 --> 03:21:07,700
However, in this other file, 
we do have a capitalizeString function.

2913
03:21:07,700 --> 03:21:13,000
In this string function .js we have export.

2914
03:21:13,000 --> 03:21:15,700
This is the export statement I was talking about.

2915
03:21:15,700 --> 03:21:18,400
And then it’s exporting this function.

2916
03:21:18,400 --> 03:21:20,500
It’s actually a variable.

2917
03:21:20,500 --> 03:21:23,900
Capitalize string, that’s set to equal a function.

2918
03:21:23,900 --> 03:21:27,800
This is an arrow function, where we pass in a string.

2919
03:21:27,800 --> 03:21:32,600
And then we return the string.toUpperCase.

2920
03:21:32,600 --> 03:21:38,400
Now toUpperCase is just a string function 
that makes ever letter uppercase.

2921
03:21:38,400 --> 03:21:42,900
So, we can import this in our other file.

2922
03:21:42,900 --> 03:21:45,700
So, let’s go back to our other file.

2923
03:21:45,700 --> 03:21:51,600
And I will import – and with the import statement 
we're going to use curly braces.

2924
03:21:51,600 --> 03:21:55,500
And then I’ll put capitalizeString.

2925
03:21:55,500 --> 03:22:00,100
And then we have to say 
what we're importing it from.

2926
03:22:00,100 --> 03:22:02,600
We want to import it from.

2927
03:22:02,600 --> 03:22:04,500
And this is where I put the file name.

2928
03:22:04,500 --> 03:22:09,300
Now normally you’re going to start with a ./ 
which just means the current directory.

2929
03:22:09,300 --> 03:22:11,100
And I’ll type in the file name.

2930
03:22:11,100 --> 03:22:13,400
“string_function”.

2931
03:22:13,400 --> 03:22:19,600
Now, the file name has a .js after it, 
but that’s assumed.

2932
03:22:19,600 --> 03:22:21,200
So, you don’t have to put .js.

2933
03:22:21,200 --> 03:22:23,800
You can just put the file name without the extension.

2934
03:22:23,800 --> 03:22:27,900
So, if I run this, you can see HELLO! 
in all capital letters.

2935
03:22:27,900 --> 03:22:32,700
It successfully imported this function 
from the other file and we used it in this file.

2936
03:22:32,700 --> 03:22:36,600
[Use export to Reuse a Code Block]

2937
03:22:36,600 --> 03:22:41,400
I’ve talked a little bit about export in the last lesson, 
but now I’m going to go into more detail.

2938
03:22:41,400 --> 03:22:48,300
You export functions and variables from one file 
so that you can import them into another file.

2939
03:22:48,300 --> 03:22:50,800
That’s how you can reuse different code.

2940
03:22:50,800 --> 03:22:53,300
So, we have this function here.

2941
03:22:53,300 --> 03:22:55,200
This is a capitalizeString function.

2942
03:22:55,200 --> 03:22:57,900
It actually just capitalizes the first letter of the string.

2943
03:22:57,900 --> 03:23:00,700
And then leaves the rest of the string lowercase.

2944
03:23:00,700 --> 03:23:04,800
And before, I showed you 
you can just put export right before here.

2945
03:23:04,800 --> 03:23:07,100
But we can export it a different way.

2946
03:23:07,100 --> 03:23:15,300
So, I’ll do export and then curly braces 
capitalizeString.

2947
03:23:15,300 --> 03:23:19,700
And so now we just exported this function.

2948
03:23:19,700 --> 03:23:24,700
And to export a variable like this 
we have const foo =”bar”, const bar = “foo”.

2949
03:23:24,700 --> 03:23:30,200
To export these variables 
you just type in export before.

2950
03:23:30,200 --> 03:23:37,300
So now in this file, we're exporting this function 
and these two variables.

2951
03:23:37,300 --> 03:23:39,000
And then we can import them into another file.

2952
03:23:39,000 --> 03:23:43,100
[Use * to Import Everything from a File]

2953
03:23:43,100 --> 03:23:46,401
If a file exports multiple different things, 

2954
03:23:46,401 --> 03:23:50,500
you can import each thing individually 
or you can import everything.

2955
03:23:50,500 --> 03:23:54,100
So, let me show you how you would import 
everything from a file.

2956
03:23:54,100 --> 03:23:55,500
It’s just import.

2957
03:23:55,500 --> 03:23:58,400
And then you’re going to put an asterisk or a star.

2958
03:23:58,400 --> 03:24:00,300
And then you’re going to put as.
import * as.

2959
03:24:00,300 --> 03:24:04,500
And then you have to create an object 
to store everything in.

2960
03:24:04,500 --> 03:24:09,500
So, I’m going to import stuff from a file 
called capitalizeStrings.

2961
03:24:09,500 --> 03:24:13,900
I’m going to call this captalizeStrings.

2962
03:24:13,900 --> 03:24:15,900
So, this could really be anything.

2963
03:24:15,900 --> 03:24:18,200
I’m creating an object with this.

2964
03:24:18,200 --> 03:24:21,600
And then I’m going to see what I’m importing it from.

2965
03:24:21,600 --> 03:24:24,800
And then I just put the file name.

2966
03:24:24,800 --> 03:24:30,300
In this case, it’s just going to be “capitalize_strings”.

2967
03:24:30,300 --> 03:24:34,400
Sometimes you would have to put a ./ 
if it’s in the same directory there.

2968
03:24:34,400 --> 03:24:36,500
And then I’ll make sure to put a semicolon at the end.

2969
03:24:36,500 --> 03:24:41,300
So, if you’re importing everything, 
you always start off with import * as.

2970
03:24:41,300 --> 03:24:43,200
And then this could be anything.

2971
03:24:43,200 --> 03:24:45,300
It could be any object name that you create.

2972
03:24:45,300 --> 03:24:46,700
And then you’re going to put from.

2973
03:24:46,700 --> 03:24:49,700
And then you put the “file name” 
in quotation marks just like that.

2974
03:24:49,700 --> 03:24:53,800
[Create an Export Fallback with export default]

2975
03:24:53,800 --> 03:24:57,500
Before when I talked about exports, 
I was talking about named exports.

2976
03:24:57,500 --> 03:25:00,400
There’s also something called an export default.

2977
03:25:00,400 --> 03:25:02,700
This is a fallback export.

2978
03:25:02,700 --> 03:25:07,300
And it’s often used if you only want to 
export one thing from a file.

2979
03:25:07,300 --> 03:25:12,300
So, let’s say I want this to be my fallback export.

2980
03:25:12,300 --> 03:25:15,500
I’m just going to only export this one thing 
from the file.

2981
03:25:15,500 --> 03:25:19,000
I can just put export default.

2982
03:25:19,000 --> 03:25:22,200
So, now we know that this is just the fallback.

2983
03:25:22,200 --> 03:25:25,600
Basically, just the one thing we're going to 
export from this file.

2984
03:25:25,600 --> 03:25:29,500
[Import a Default Export]

2985
03:25:29,500 --> 03:25:33,400
So, we talked about exporting a default export.

2986
03:25:33,400 --> 03:25:36,800
Now I’m going to show you how to import 
a default export.

2987
03:25:36,800 --> 03:25:40,300
It’s pretty much the same as before 
but there is a slight difference.

2988
03:25:40,300 --> 03:25:44,400
So we are going to pretend we have a file 
called math_functions 

2989
03:25:44,400 --> 03:25:47,400
that has a default export name subtract.

2990
03:25:47,400 --> 03:25:49,900
So, let me show you how you would import that.

2991
03:25:49,900 --> 03:25:53,100
So, it’s going to be import subtract.

2992
03:25:53,100 --> 03:25:56,300
And we’ve already reached the difference here.

2993
03:25:56,300 --> 03:26:00,200
If it’s not a default export, 
you’ll put curly braces around this.

2994
03:26:00,200 --> 03:26:04,500
But it is a default export so we are not 
going to use curly braces.

2995
03:26:04,500 --> 03:26:07,100
But we still have to say what it’s from.

2996
03:26:07,100 --> 03:26:12,800
So, from “math_functions”.

2997
03:26:12,800 --> 03:26:16,900
Okay, so that is how you would 
import a default export.

2998
03:26:16,900 --> 03:26:20,800
Well, thanks for watching.

2999
03:26:20,800 --> 03:26:22,400
Don’t forget to subscribe.

3000
03:26:22,400 --> 03:26:30,900
And remember, use your code for good.

3001
03:26:30,900 --> 03:26:42,600
Visit freeCodeCamp.org