1
00:00:00,848 --> 00:00:03,104
Let's talk about the different ways to use

2
00:00:03,104 --> 00:00:05,878
variables in JavaScript. We are going to

3
00:00:05,878 --> 00:00:08,358
talk about the difference between the let

4
00:00:08,358 --> 00:00:10,987
and const keyword. To explain this

5
00:00:10,987 --> 00:00:13,662
concept, I'll first use slides and then

6
00:00:13,662 --> 00:00:16,441
apply it in the loan application demo

7
00:00:16,441 --> 00:00:19,437
code. To understand let and const, we need

8
00:00:19,437 --> 00:00:22,195
to talk about variable scoping. Here's a

9
00:00:22,195 --> 00:00:24,513
function. Within the function, I can have

10
00:00:24,513 --> 00:00:27,078
a variable that uses var. Because I use

11
00:00:27,078 --> 00:00:29,231
var here, I can use this variable x

12
00:00:29,231 --> 00:00:31,398
throughout the function, including in an

13
00:00:31,398 --> 00:00:34,851
if block here. And I can even reassign it

14
00:00:34,851 --> 00:00:37,050
in this block, and that changes the

15
00:00:37,050 --> 00:00:39,304
meaning of x throughout the function. Even

16
00:00:39,304 --> 00:00:42,710
outside the block, x is Hello. That is

17
00:00:42,710 --> 00:00:45,482
because var has a global and function

18
00:00:45,482 --> 00:00:49,107
scope and doesn't have a block scope. Let

19
00:00:49,107 --> 00:00:51,251
is different from var in that respect. Let

20
00:00:51,251 --> 00:00:54,238
does have a block scope. You can use let

21
00:00:54,238 --> 00:00:56,878
just as you use var to declare variables,

22
00:00:56,878 --> 00:01:00,211
but let has a block scope. So here, x in

23
00:01:00,211 --> 00:01:02,878
the if block is a completely new variable

24
00:01:02,878 --> 00:01:04,691
and only applies to the scope of the

25
00:01:04,691 --> 00:01:08,146
block. So x outside of the block always is

26
00:01:08,146 --> 00:01:10,918
the value of the var, not of the let.

27
00:01:10,918 --> 00:01:14,686
Block scope also applies to const. In that

28
00:01:14,686 --> 00:01:17,838
respect, const is exactly the same as let

29
00:01:17,838 --> 00:01:20,868
and can also be used to declare variables.

30
00:01:20,868 --> 00:01:23,595
So just like let, const can have a block

31
00:01:23,595 --> 00:01:26,228
scope. So in this example, const x doesn't

32
00:01:26,228 --> 00:01:29,620
exist outside of the if block, so using it

33
00:01:29,620 --> 00:01:32,398
outside of the block will result in an

34
00:01:32,398 --> 00:01:35,944
error. Now consider this example. We use a

35
00:01:35,944 --> 00:01:38,595
var y here, and directly after that, I

36
00:01:38,595 --> 00:01:40,688
redeclare y as a let with a different

37
00:01:40,688 --> 00:01:43,254
value. That is not allowed and results in

38
00:01:43,254 --> 00:01:45,641
an error, and that is because I cannot

39
00:01:45,641 --> 00:01:48,312
declare the same variable as a let in the

40
00:01:48,312 --> 00:01:50,898
same scope. The same is true in any scope,

41
00:01:50,898 --> 00:01:54,011
including within a block scope. In the if

42
00:01:54,011 --> 00:01:57,272
block, I cannot redeclare y as a let, buy

43
00:01:57,272 --> 00:02:00,462
y can be redeclared as a var even though

44
00:02:00,462 --> 00:02:03,408
var has a global scope and the y var is

45
00:02:03,408 --> 00:02:05,923
already declared in the function. Now to

46
00:02:05,923 --> 00:02:09,106
solidify that. It is not allowed to

47
00:02:09,106 --> 00:02:11,985
redeclare an existing variable as a let in

48
00:02:11,985 --> 00:02:14,513
the same scope no matter if the existing

49
00:02:14,513 --> 00:02:17,528
variable was a let or a var. But of

50
00:02:17,528 --> 00:02:20,208
course, I can redeclare a let within its

51
00:02:20,208 --> 00:02:23,180
own scope. So in these if blocks I can

52
00:02:23,180 --> 00:02:25,132
declare lets with the same name because

53
00:02:25,132 --> 00:02:27,888
they don't exist outside of the scope.

54
00:02:27,888 --> 00:02:30,478
This scoping mechanism of lets also

55
00:02:30,478 --> 00:02:33,898
applies to const variables. Here is how

56
00:02:33,898 --> 00:02:36,732
const is unique. You can use const to

57
00:02:36,732 --> 00:02:39,302
declare a variable, like this array. But

58
00:02:39,302 --> 00:02:42,454
because it is a const, you cannot reassign

59
00:02:42,454 --> 00:02:44,366
it. This will result in an error no matter

60
00:02:44,366 --> 00:02:47,215
what the type of the value is that you try

61
00:02:47,215 --> 00:02:49,848
to reassign it to, including null.

62
00:02:49,848 --> 00:02:52,143
Reassigning is not allowed, but that

63
00:02:52,143 --> 00:02:55,454
doesn't mean that a const is an actual

64
00:02:55,454 --> 00:02:58,296
constant because you can change values of

65
00:02:58,296 --> 00:03:00,898
the assignment, like this. So you cannot

66
00:03:00,898 --> 00:03:03,317
change the thing to which the const is

67
00:03:03,317 --> 00:03:05,549
assigned to, but you can change the

68
00:03:05,549 --> 00:03:07,873
content of the thing. That's pretty

69
00:03:07,873 --> 00:03:10,368
confusing, right? If you do want to create

70
00:03:10,368 --> 00:03:12,608
a variable that has a value that cannot

71
00:03:12,608 --> 00:03:15,361
change, you can do that with

72
00:03:15,361 --> 00:03:17,767
Object.freeze, like this. So why would you

73
00:03:17,767 --> 00:03:20,408
use const instead of let, which has the

74
00:03:20,408 --> 00:03:23,363
same scoping properties? You'd use it to

75
00:03:23,363 --> 00:03:25,531
indicate that your intention is to not

76
00:03:25,531 --> 00:03:27,248
change the value that it represents. To

77
00:03:27,248 --> 00:03:29,888
me, const is more of a readability helper

78
00:03:29,888 --> 00:03:32,928
than anything else. Let's sum that up.

79
00:03:32,928 --> 00:03:35,707
Variables that are created with var have

80
00:03:35,707 --> 00:03:39,348
no block scope, but a global or function

81
00:03:39,348 --> 00:03:41,231
scope. Existing variables can be

82
00:03:41,231 --> 00:03:44,192
redeclared anywhere, and they can be used

83
00:03:44,192 --> 00:03:46,908
and reassigned anywhere in their scope.

84
00:03:46,908 --> 00:03:49,868
Let variables can have a block scope,

85
00:03:49,868 --> 00:03:52,220
although you can use them as global or

86
00:03:52,220 --> 00:03:54,489
function scoped variables as well. They

87
00:03:54,489 --> 00:03:57,858
cannot be redeclared within their scope,

88
00:03:57,858 --> 00:04:00,848
and let variables can only be reassigned

89
00:04:00,848 --> 00:04:03,365
and changed within their scope. That means

90
00:04:03,365 --> 00:04:05,645
that if a let variable is created in a

91
00:04:05,645 --> 00:04:08,247
block, it only exists there and can only

92
00:04:08,247 --> 00:04:11,423
be reassigned to another value there. Just

93
00:04:11,423 --> 00:04:14,177
like let variables, const variables can

94
00:04:14,177 --> 00:04:17,444
have a block scope. But different from let

95
00:04:17,444 --> 00:04:19,592
variables, const variables cannot be

96
00:04:19,592 --> 00:04:22,080
reassigned or redeclared. They aren't

97
00:04:22,080 --> 00:04:24,747
completely immutable though, as you can

98
00:04:24,747 --> 00:04:26,868
change the value that a const references,

99
00:04:26,868 --> 00:04:29,898
like a property in an object or array.

100
00:04:29,898 --> 00:04:32,187
Let's apply what we've learned. There

101
00:04:32,187 --> 00:04:34,579
aren't many places where I would use a

102
00:04:34,579 --> 00:04:36,978
const to indicate that I don't want to

103
00:04:36,978 --> 00:04:39,255
change the value, but here I have a

104
00:04:39,255 --> 00:04:41,694
function that generates a unique ID that I

105
00:04:41,694 --> 00:04:44,838
use as the ID for the loan applications.

106
00:04:44,838 --> 00:04:48,213
It uses this var here as the ID, and that

107
00:04:48,213 --> 00:04:51,417
shouldn't change. So I'll change this to a

108
00:04:51,417 --> 00:04:54,435
const. As discussed, the main function for

109
00:04:54,435 --> 00:04:56,608
const, besides the block scope, is to

110
00:04:56,608 --> 00:04:59,868
indicate that this value shouldn't change.

111
00:04:59,868 --> 00:05:02,772
Okay, let's move on. In this function, I

112
00:05:02,772 --> 00:05:04,349
look through the loan applications and

113
00:05:04,349 --> 00:05:07,208
create new select elements for them so

114
00:05:07,208 --> 00:05:09,518
that they appear in the drop-down list

115
00:05:09,518 --> 00:05:12,557
box. I use the var el here in the function

116
00:05:12,557 --> 00:05:15,507
scope and in this block scope in the for

117
00:05:15,507 --> 00:05:16,955
loop. This won't cause any problems

118
00:05:16,955 --> 00:05:19,348
because I can safely reassign a var, but

119
00:05:19,348 --> 00:05:21,772
it could be confusing. So here I will

120
00:05:21,772 --> 00:05:23,812
change this into a let, and for

121
00:05:23,812 --> 00:05:27,191
consistency, I do that here as well. If

122
00:05:27,191 --> 00:05:29,471
you ask me, you shouldn't change all your

123
00:05:29,471 --> 00:05:31,905
variables to let and const. It's perfectly

124
00:05:31,905 --> 00:05:34,997
fine to use var. I think that you should

125
00:05:34,997 --> 00:05:36,704
use these keywords mainly as readability

126
00:05:36,704 --> 00:05:39,116
helpers that indicate your intention for

127
00:05:39,116 --> 00:05:41,512
the variables. When you do that

128
00:05:41,512 --> 00:05:46,000
consistently, you will also benefit from their functionality.

