1
00:00:00,310 --> 00:00:04,050
For most of JavaScript's life there's
been only one way to create or

2
00:00:04,050 --> 00:00:06,760
declare a variable, the var keyword.

3
00:00:06,760 --> 00:00:09,840
Although many JavaScript programmers
still use the var keyword,

4
00:00:09,840 --> 00:00:13,820
some of the behaviors of using var
can be problematic or unexpected.

5
00:00:13,820 --> 00:00:16,970
For instance, a variable might
accidentally get changed or

6
00:00:16,970 --> 00:00:19,530
overwritten with a different value
further down in your program,

7
00:00:19,530 --> 00:00:22,020
which can be really difficult to catch.

8
00:00:22,020 --> 00:00:25,060
The JavaScript programming
language gets updated regularly.

9
00:00:25,060 --> 00:00:27,930
And nowadays you'll see variables
written using the keywords let or

10
00:00:27,930 --> 00:00:31,890
const, which let you put a value into
them like you do with the var keyword.

11
00:00:31,890 --> 00:00:34,210
But they have different rules
about how you use them and

12
00:00:34,210 --> 00:00:35,620
change their values in your program.

13
00:00:36,680 --> 00:00:39,410
So now I'll teach you how const and
let work and

14
00:00:39,410 --> 00:00:43,149
demonstrate why you might want to use them
instead of var when declaring variables.

15
00:00:44,580 --> 00:00:47,300
>> Let and const work similarly to var.

16
00:00:47,300 --> 00:00:51,320
In each case you use the keyword var,
const, or let followed by a name for

17
00:00:51,320 --> 00:00:56,060
the variable, an equal sign, and
a value you want to put into the variable.

18
00:00:56,060 --> 00:01:00,240
We started with the var keyword since it's
a little easier to remember that var means

19
00:01:00,240 --> 00:01:01,632
that something is a variable.

20
00:01:01,632 --> 00:01:06,170
And you'll still see var keyword used to
declare variables, but modern JavaScript

21
00:01:06,170 --> 00:01:10,270
development has shifted over to let and
const because of their benefits.

22
00:01:10,270 --> 00:01:13,510
In many cases,
they can make your code less error prone.

23
00:01:13,510 --> 00:01:17,430
So what's the difference between var,
let, and const?

24
00:01:17,430 --> 00:01:20,124
And when should you use
one method over another?

25
00:01:20,124 --> 00:01:23,708
Well we're not far enough into
JavaScript to truly understand and

26
00:01:23,708 --> 00:01:26,550
benefit from the usefulness of let and
const.

27
00:01:26,550 --> 00:01:29,380
But I'll teach you the basics of each
starting with the const keyword.

28
00:01:30,830 --> 00:01:35,409
In the JS folder,
open the file named let-const.js.

29
00:01:35,409 --> 00:01:41,018
Will not work in this file, so let's
make sure to update the script tag and

30
00:01:41,018 --> 00:01:45,197
index.html so
that it points to the let-const.js.

31
00:01:45,197 --> 00:01:48,432
You don't need to write your
variables in separate file like this,

32
00:01:48,432 --> 00:01:53,060
it's just a new file we're using to
learn about the let and const keywords.

33
00:01:53,060 --> 00:01:57,360
So const is often considered the best
choice for declaring variables.

34
00:01:57,360 --> 00:02:01,610
Const is short for constant, meaning that
the value of the variable should not

35
00:02:01,610 --> 00:02:04,010
change, it should remain constant.

36
00:02:04,010 --> 00:02:08,630
Const lets you protect the variable from
being overwritten by any accidental or

37
00:02:08,630 --> 00:02:10,600
stray assignments in your code.

38
00:02:10,600 --> 00:02:13,170
In other words,
once you create a constant and

39
00:02:13,170 --> 00:02:16,380
assign it a value,
you can't assign it another value.

40
00:02:16,380 --> 00:02:17,590
Let me show you what I mean.

41
00:02:17,590 --> 00:02:21,310
Let's again declare a variable,
or in this case a constant,

42
00:02:21,310 --> 00:02:25,380
called score, and assign it a value of 5.

43
00:02:25,380 --> 00:02:30,800
Then use console.log to display
the value of score in the console.

44
00:02:30,800 --> 00:02:36,440
When I refresh the browser, I see 5
logged to the console, as expected.

45
00:02:36,440 --> 00:02:39,960
Earlier, you learned how to use
the addition assignment operator

46
00:02:39,960 --> 00:02:44,630
to manipulate or add to the content stored
in a variable, like a score for example.

47
00:02:44,630 --> 00:02:50,990
So let's try to add 5 to the score
constant with score += 5.

48
00:02:54,004 --> 00:02:56,350
This time we get different results.

49
00:02:56,350 --> 00:02:59,620
There is an Uncaught TypeError
in the console

50
00:02:59,620 --> 00:03:03,320
that says assignment to constant variable.

51
00:03:03,320 --> 00:03:08,210
If there's one detail you should
remember about using const is that

52
00:03:08,210 --> 00:03:13,480
you cannot change or manipulate the value
of a constant through reassignment.

53
00:03:13,480 --> 00:03:17,169
You're also not able to
re-declare a constant.

54
00:03:17,169 --> 00:03:22,742
For example, re-declaring score and
setting it to 5 produces

55
00:03:22,742 --> 00:03:29,050
the Uncaught SyntaxError identifier
score has already been declared.

56
00:03:30,240 --> 00:03:32,975
The same happens if I re-declare
using the var keyword.

57
00:03:40,913 --> 00:03:45,123
You'll use const variables frequently to
store values that shouldn't change while

58
00:03:45,123 --> 00:03:49,590
the program runs, like product prices,
a password, or username, for example.

59
00:03:49,590 --> 00:03:51,860
You can assign any value to a constant.

60
00:03:51,860 --> 00:03:53,310
In a later course you'll, for instance,

61
00:03:53,310 --> 00:03:56,350
use constants to select
elements of a web page.

62
00:03:56,350 --> 00:03:58,840
Imagine an application with hundreds or

63
00:03:58,840 --> 00:04:03,460
even thousands of lines of code that uses
many variables that should not change.

64
00:04:03,460 --> 00:04:05,850
If you're declaring those
variables with var,

65
00:04:05,850 --> 00:04:08,420
it could cause bugs that
can be hard to find.

66
00:04:08,420 --> 00:04:10,530
For example, a score, product price,

67
00:04:10,530 --> 00:04:14,490
or user name might unexpectedly
get overwritten entirely.

68
00:04:14,490 --> 00:04:18,140
So the const keyword is one safeguard
to prevent that from happening.

69
00:04:18,140 --> 00:04:22,940
For this reason, const should be your
first choice when declaring variables.

70
00:04:22,940 --> 00:04:27,470
However, for a variable whose value
should change while the program runs,

71
00:04:27,470 --> 00:04:29,330
constants are not the best choice.

72
00:04:29,330 --> 00:04:33,820
For example, you wouldn't const
to store the score of a game

73
00:04:33,820 --> 00:04:38,040
since you know that the score needs to
change as the player plays the game.

74
00:04:38,040 --> 00:04:42,660
In that case, use the let key word
when you want to reassign a variable.

75
00:04:42,660 --> 00:04:45,660
In that respect, let works just like var.

76
00:04:45,660 --> 00:04:50,838
So let's declare let score

77
00:04:50,838 --> 00:04:55,796
= 5 and score += 10.

78
00:04:57,849 --> 00:05:02,117
The console outputs the expected value,
15.

79
00:05:02,117 --> 00:05:06,746
The let keyword is almost the same as var,
it lets you define a variable but

80
00:05:06,746 --> 00:05:08,550
limits how you can use it.

81
00:05:08,550 --> 00:05:12,768
For example,
let's say that later in your program you

82
00:05:12,768 --> 00:05:16,906
re-declare a let variable,
like let score = 20.

83
00:05:19,425 --> 00:05:22,064
This produces an Uncaught SyntaxError that

84
00:05:22,064 --> 00:05:25,132
says identifier score has
already been declared,

85
00:05:25,132 --> 00:05:29,970
whereas var would let you overwrite
the value in the initial assignment.

86
00:05:29,970 --> 00:05:34,697
For example, if I change each let to var,

87
00:05:37,475 --> 00:05:41,040
Notice how the value of score is now 20.

88
00:05:41,040 --> 00:05:44,620
This behavior could produce
bugs in your program

89
00:05:44,620 --> 00:05:48,970
because you might accidentally
use the same variable twice.

90
00:05:48,970 --> 00:05:52,390
So let offers more protection and
helps prevent you from doing that.

91
00:05:53,570 --> 00:05:56,775
There are other details and
differences between let and

92
00:05:56,775 --> 00:06:00,140
const which you're not
required to know about yet but

93
00:06:00,140 --> 00:06:03,278
you'll learn more about them in
later courses and workshops.

94
00:06:03,278 --> 00:06:06,590
Let and const will come in handy when
you start working with functions, for

95
00:06:06,590 --> 00:06:10,145
example, and when you learn
something called scope, the area or

96
00:06:10,145 --> 00:06:13,910
context in which variables
are accessible inside of your program.

97
00:06:13,910 --> 00:06:17,448
Since let and const are considered
safer choices for declaring variables,

98
00:06:17,448 --> 00:06:19,943
I'm going to use them moving
forward in place of var.