Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
JavaScript has always been a forgiving language. But, it’s lack of constraints has caused much confusion around block scoping and variable re-assignment. In this video we’ll review two new variable types: let and const.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Variables in JavaScript can
sometimes be a bit confusing.
0:00
We need to be aware of the scope
our variables live in and
0:03
try not to pollute the global
scope shared by all scripts.
0:06
Otherwise our variables could collide,
overwriting each other and
0:09
causing difficult to track
problems in our program.
0:13
For most of its life,
0:16
JavaScript has had just one way to
create variables, the var keyword.
0:17
ES 2015 gives us two new keywords that
reduce the pain of variable name suit.
0:22
So let's look at how
we can use the let and
0:28
const keywords to constrain our variables.
0:31
We're going to use
workspaces in this course.
0:35
So if you'd like to follow along simply
launch the workspace for this video.
0:37
And throughout the course I'll be
including use strict statements
0:40
at the top of each JavaScript file.
0:44
The statement prevents you from
making mistakes in your code.
0:46
If you make a mistake it will
throw an exception at runtime.
0:49
First let's take a look
at the file var-scope.js.
0:52
In the file I have a variable named
hello declared with the var keyword,
0:56
then a function with another
hello variable declared.
1:02
Over in the console,
when I run the script node var-scope.js,
1:06
I first see hi logged to the console,
then hello.
1:11
So as you can see, the var keyword
does have function level scoping,
1:16
which is useful, although it's not
as useful as block level scoping,
1:21
which is available with the ES2015 let and
const keywords.
1:25
Now let's take a look at
the file let-loop-scope.js.
1:32
A block can be either a loop,
if statement, or function.
1:36
In the file we have an immediately
invoked function called initLoop.
1:40
In the initLoop block there's a doLoop
function that takes a value and
1:45
logs it to the console.
1:50
And below the doLoop function block is a
for loop which loops ten times and exits.
1:51
So let's see what this does
in the console by running
1:57
node let-loop-scope.js, and cool.
2:00
We can see that it's a simple loop
that logs results to the console.
2:05
So where could this go wrong?
2:10
The loop should execute ten times and
exit, right?
2:11
So what would happen if inside
the do-loop-function we changed
2:14
the value of i?
2:19
So let's try i = 3 and
run it in the console.
2:21
And this results in an infinite loop.
2:29
I'll stop the execution of the script
by pressing Ctrl+C on my keyboard.
2:31
Then back in our function,
2:36
we can prevent that infinite loop from
happening if we use the let keyword.
2:38
So in the for loop, I'm going to
replace the var keyword with let.
2:44
I'll run my file again and great,
the interpreter threw an exception,
2:50
and pointed me to
the offending line of code.
2:56
It tells me that on line
five i is not defined.
2:59
So I'll go back to that function, remove
that line of code, and run my file again.
3:04
Perfect.
3:14
This works because the i variable
only exists in the context,
3:17
or scope, of the for loop.
3:22
This is what's called block-level scoping.
3:25
Remember the var keyword assigns
the variable to the outer context,
3:28
in our case the immediately
invoked function expression.
3:33
The let keyword on the other hand, does
not get assigned to the outer context.
3:36
So the doLoop function can't access my for
loops i variable.
3:42
Again a block is either a loop,
if statement, or a function.
3:47
So earlier when I tried to change
the value of i in the doLoop function
3:51
the interpreter couldn't find a variable
named i, so it threw the exception.
3:55
Next, open up the file
duplicate-variables.js.
4:00
In the file, I have two variables
with the same name of student and
4:04
two different values.
4:09
Over in the console,
4:13
I'll run node duplicate-variables.js
to see what gets logged.
4:14
And here we see that the first student Ken
4:19
was replaced with the second student,
James.
4:23
You can prevent this by using
either the let or const keyword.
4:27
So back in my file,
I'm going to change the first var keyword,
4:32
to const, save it,
run it again in the console.
4:36
And now the interpreter
threw an exception.
4:44
It reads, identifier student has already
been declared, and that's right.
4:47
So this kind of exception will only occur
when you attempt to declare a let or const
4:54
variable within the same scope to which
the same variable name already exists.
5:00
In other words, you can declare a let or
5:05
const variable with the same name in
a different scope, but not the same scope.
5:08
Let me show you an example.
5:14
In the file, nested-scope.js,
you'll see that there's
5:16
an immediately invoked function that
logs two students to the console.
5:21
The root scope has a const
variable named student, and
5:26
the createStudent function also has
a const variable named student.
5:31
I'll run this file in the console
to see what gets logged.
5:36
And we see that it returns no exceptions,
and two students are locked, good.
5:41
Now I wonder what would happen
if I re-assign the value
5:46
of the root student variable.
5:51
So I'm going to remove the const keyword
from within the createStudent function.
5:53
Run my file again.
6:01
And now I have an exception.
6:03
It reads, assignment to constant variable.
6:05
Well that's because the const keyword,
6:09
prevents us from assigning
a variable a new value.
6:12
It allows a one time assignment only.
6:16
So, if I go back and
change the root const keyword to let,
6:19
you should see something different.
6:25
Now if you're reassigning a value for
a let variable,
6:27
make sure not to use the let keyword again
and use the assignment already given.
6:31
So I'll run node
nested-scope.js in the console.
6:37
And the student variable
has been reassigned,
6:41
and now we're logging to the console,
the same student, two times.
6:44
Keep in mind, that both let and
6:50
const variables can be accessed
from nested or child scopes.
6:53
So, for instance, if I move the let
statement outside of the root
6:57
function scope, the console will
still log the student Ken twice.
7:02
If you're ever not sure when to use
let versus const or const over let,
7:10
remember use let when you need
to reassign a variable or
7:15
scope a variable at the block level.
7:19
And use const when you do not
want a variable's value to
7:22
change throughout your project.
7:25
We've covered a lot here already.
7:28
But if you wanna dig deeper, look in
the teacher's notes for more information.
7:30
In the next video we'll look at
a new way of formatting strings.
7:34
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up