Preview
Video Player
00:00
00:00
Creating Unchanging Variables With const
4:10Using the keyword `const` to create variables have a number of benefits including the ability to prevent the value from being reassigned.
The first method you should consider when
creating a variable is the const keyword.
0:00
This is often the best choice for
declaring variables.
0:06
Const is short for constant, meaning that
the value of the variable shouldn't change
0:09
it should remain constant.
0:14
For example const pi is equal to 3.14159.
0:16
Const let's you protects variables from
being overwritten by any stray assignments
0:21
in your code.
0:26
In other words,
once you create a constant,
0:27
you can't give it another value.
0:29
Let me show you what I mean.
0:32
If you want to follow along you can
open up the workspace on this page.
0:34
Open up pi.html, and
as you can see we've assigned
0:38
a value of 3.1459 to the constant Pi.
0:45
Click on preview and navigate to pi.html.
0:51
Open up the developer tools and
head over to the JavaScript console.
0:56
When we type pi, the value is logged.
1:01
Try to assign another value to pi.
1:05
We see we get an error type error
assignment to a constant variable.
1:11
You will use constants frequently.
1:17
In fact, it should be your first
choice when declaring variables.
1:19
You only use them to store numbers that
shouldn't change while your program runs.
1:22
For example, tax rates, dimensions
of user interface components, and
1:27
product prices are good examples.
1:31
And you'll use constants when your
select an elements on a page, or
1:33
when you are assigning
a function to a variable.
1:38
Any value can be assigned to a constant.
1:41
However, for a variable whose value will
change during the life of the program,
1:43
const are a bad choice.
1:48
For example you wouldn't want to
const to store a score of a game
1:50
since the score changes as
the player plays the game.
1:54
In that case, you'll use the let keyword.
1:59
I'll show show you how that
works in another video.
2:01
As I mentioned,
constants help you fix problems
2:05
that can easily crop up in
your JavaScript programs.
2:08
Let's take a look at a common
problem that you'll run into.
2:12
If you want to follow along, open up the
name.html file in these video's workspace.
2:15
Here's a simple script
with the variable name.
2:22
I'll preview this file and
check in the console.
2:25
Notice that the console says Andrew.
2:32
That's the value of the name
variable defined on line one.
2:36
The console then prints out Joe Craft,
2:40
which is logged by the create
full name function.
2:44
Now that the programs run,
what's the value of the name variable?
2:49
I'll just check that out in
the console by writing name.
2:54
It's now Joe Craft.
2:58
Andrew is gone.
3:00
The variable has been
overwritten by the function.
3:02
This is a simple scope issue.
3:06
The function is overwriting the name
variable in the global scope.
3:09
It's a problem that can pop up and
3:14
can be difficult to catch, however
const will help you spot the mistake.
3:16
Now when I preview this,
the console spits out an error.
3:24
You can't change a value of a constant.
3:33
Because I used const,
I can see that the simple mistake I made.
3:36
And I can go back into my script and
fix it
3:40
Simply adding const before
the name within the function keeps
3:48
that variable locked to
the scope of the function.
3:52
It's no longer trying to
reassign the name variable.
3:55
I'll preview this script one more time.
3:59
And no errors.
4:04
And I can log out name,
and it's still Andrew.
4:05
Hooray, I'm not gone.
4:08