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
Learn how const and let work, and why you might want to use them instead of var when declaring variables.
Resources
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
For most of JavaScript's life there's
been only one way to create or
0:00
declare a variable, the var keyword.
0:04
Although many JavaScript programmers
still use the var keyword,
0:06
some of the behaviors of using var
can be problematic or unexpected.
0:09
For instance, a variable might
accidentally get changed or
0:13
overwritten with a different value
further down in your program,
0:16
which can be really difficult to catch.
0:19
The JavaScript programming
language gets updated regularly.
0:22
And nowadays you'll see variables
written using the keywords let or
0:25
const, which let you put a value into
them like you do with the var keyword.
0:27
But they have different rules
about how you use them and
0:31
change their values in your program.
0:34
So now I'll teach you how const and
let work and
0:36
demonstrate why you might want to use them
instead of var when declaring variables.
0:39
>> Let and const work similarly to var.
0:44
In each case you use the keyword var,
const, or let followed by a name for
0:47
the variable, an equal sign, and
a value you want to put into the variable.
0:51
We started with the var keyword since it's
a little easier to remember that var means
0:56
that something is a variable.
1:00
And you'll still see var keyword used to
declare variables, but modern JavaScript
1:01
development has shifted over to let and
const because of their benefits.
1:06
In many cases,
they can make your code less error prone.
1:10
So what's the difference between var,
let, and const?
1:13
And when should you use
one method over another?
1:17
Well we're not far enough into
JavaScript to truly understand and
1:20
benefit from the usefulness of let and
const.
1:23
But I'll teach you the basics of each
starting with the const keyword.
1:26
In the JS folder,
open the file named let-const.js.
1:30
We'll now work in this file, so let's
make sure to update the script tag and
1:35
index.html so
that it points to the let-const.js.
1:41
You don't need to write your
variables in separate file like this,
1:45
it's just a new file we're using to
learn about the let and const keywords.
1:48
So const is often considered the best
choice for declaring variables.
1:53
Const is short for constant, meaning that
the value of the variable should not
1:57
change, it should remain constant.
2:01
Const lets you protect the variable from
being overwritten by any accidental or
2:04
stray assignments in your code.
2:08
In other words,
once you create a constant and
2:10
assign it a value,
you can't assign it another value.
2:13
Let me show you what I mean.
2:16
Let's again declare a variable,
or in this case a constant,
2:17
called score, and assign it a value of 5.
2:21
Then use console.log to display
the value of score in the console.
2:25
When I refresh the browser, I see 5
logged to the console, as expected.
2:30
Earlier, you learned how to use
the addition assignment operator
2:36
to manipulate or add to the content stored
in a variable, like a score for example.
2:39
So let's try to add 5 to the score
constant with score += 5.
2:44
This time we get different results.
2:54
There is an Uncaught TypeError
in the console
2:56
that says assignment to constant variable.
2:59
If there's one detail you should
remember about using const is that
3:03
you cannot change or manipulate the value
of a constant through reassignment.
3:08
You're also not able to
re-declare a constant.
3:13
For example, re-declaring score and
setting it to 5 produces
3:17
the Uncaught SyntaxError identifier
score has already been declared.
3:22
The same happens if I re-declare
using the var keyword.
3:30
You'll use const variables frequently to
store values that shouldn't change while
3:40
the program runs, like product prices,
a password, or username, for example.
3:45
You can assign any value to a constant.
3:49
In a later course you'll, for instance,
3:51
use constants to select
elements of a web page.
3:53
Imagine an application with hundreds or
3:56
even thousands of lines of code that uses
many variables that should not change.
3:58
If you're declaring those
variables with var,
4:03
it could cause bugs that
can be hard to find.
4:05
For example, a score, product price,
4:08
or user name might unexpectedly
get overwritten entirely.
4:10
So the const keyword is one safeguard
to prevent that from happening.
4:14
For this reason, const should be your
first choice when declaring variables.
4:18
However, for a variable whose value
should change while the program runs,
4:22
constants are not the best choice.
4:27
For example, you wouldn't const
to store the score of a game
4:29
since you know that the score needs to
change as the player plays the game.
4:33
In that case, use the let key word
when you want to reassign a variable.
4:38
In that respect, let works just like var.
4:42
So let's declare let score
4:45
= 5 and score += 10.
4:50
The console outputs the expected value,
15.
4:57
The let keyword is almost the same as var,
it lets you define a variable but
5:02
limits how you can use it.
5:06
For example,
let's say that later in your program you
5:08
re-declare a let variable,
like let score = 20.
5:12
This produces an Uncaught SyntaxError that
5:19
says identifier score has
already been declared,
5:22
whereas var would let you overwrite
the value in the initial assignment.
5:25
For example, if I change each let to var,
5:29
Notice how the value of score is now 20.
5:37
This behavior could produce
bugs in your program
5:41
because you might accidentally
use the same variable twice.
5:44
So let offers more protection and
helps prevent you from doing that.
5:48
There are other details and
differences between let and
5:53
const which you're not
required to know about yet but
5:56
you'll learn more about them in
later courses and workshops.
6:00
Let and const will come in handy when
you start working with functions, for
6:03
example, and when you learn
something called scope, the area or
6:06
context in which variables
are accessible inside of your program.
6:10
Since let and const are considered
safer choices for declaring variables,
6:13
I'm going to use them moving
forward in place of var.
6:17
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