Preview
Video Player
00:00
00:00
The Solution
4:14The solution for the practicing let and const variables in JavaScript.
Hi, again.
0:00
How did it go?
0:01
Did you have any trouble?
0:02
If you did, that's totally fine.
0:04
Keep watching to see my solution, and
then go ahead and give it another go.
0:06
If you open up the let_const.js
file in workspaces, you'll see
0:11
two variable definitions, teachers and
courses, toward the top of the file.
0:14
These two variables were
declared using the const keyword.
0:19
This means that the variables
can not be reassigned.
0:23
Your first task in this practice
session was to write a function that
0:27
updated this teacher's array.
0:31
To do this, you may have tried to
reassign the teacher's variable
0:33
by setting it equal to a new array
that included all of the teachers.
0:37
If you try this,
you would have received an error message,
0:42
because const variables
can't be reassigned.
0:45
But just because an array was
declared using a const variable,
0:48
it doesn't mean that the array
itself can't be changed.
0:53
You could update or add to our teachers
array by using the push method and
0:56
the spread operator like I did here.
1:01
Don't worry if you haven't seen
the spread operator before.
1:04
It's a handy new syntax in ES2015
that lets you use iterables,
1:08
like arrays, in places where you'd
normally expect multiple elements.
1:13
For more information on this,
check out the teacher's notes.
1:18
Your second task was to fix
the printTreehouseSummary function so
1:22
that it outputs the correct
number of courses and teachers.
1:25
You'll notice that at the top of
the file we declared a variable i
1:30
using the var keyword, and set it equal
to the length of the course's array.
1:33
But uh-oh,
in our printTreehouseSummary function,
1:38
we're using that same
variable i in our for loop.
1:42
When our for loop is initialized,
1:46
our existing variable i becomes shadowed
by the i variable we declare in the loop.
1:48
This means that inside
our loop our existing or
1:54
global variable i is being overridden.
1:58
So before the end of our function, instead
of being equal to the number of courses,
2:01
i is actually equal to
the number of teachers.
2:06
Whoops!
2:10
This is a pretty simple fix though.
2:11
Thanks to the addition of
let variables in ES2015,
2:14
we can have another variable
i that is block scoped,
2:18
meaning it's only accessible in
the code block where it's used.
2:22
In our case, that's our for loop.
2:26
By changing var to let in our for
loop, we've eliminated our problem.
2:28
I should also note that i is not
really a meaningful variable name, and
2:35
problems like this can be
avoided by making sure that
2:40
all of your variables have clear and
meaningful names.
2:43
Now, when you try to run your code at
this point, you got that error message
2:47
I mentioned in the first video, were
you able to figured out what caused it?
2:52
If you guessed that the error was caused
by passing the newTeachers variable to
2:57
the addNewTeachers function before
it was declared, you'd be right.
3:02
Variables declared with the keyword var
can be accessed before they are declared.
3:08
let and
const variables differ in this way, and
3:13
you should always declare them
at the top of their scope.
3:16
By moving our newTeachers variable
to the top of our file or
3:20
simply before we call the addNewTeachers
function, Our code will now run.
3:24
Let's try it out.
3:32
Awesome, our code now runs and
3:40
prints out the proper number of
JavaScript courses and teachers.
3:42
If your code isn't working or
your output doesn't look like mine,
3:47
go back through this video and
check your code against my solution.
3:52
Also, don't hesitate to reach out to other
students in the Treehouse community.
3:56
Talking about your programming challenges
with other developers is another
4:00
great way to learn.
4:04
Hopefully you had fun with
this practice session and
4:05
feel more comfortable using const and
let variables in JavaScript.
4:07
Talk to you soon, and keep on coding.
4:12