1
00:00:01,760 --> 00:00:05,070
Now that we implemented this first example,

2
00:00:05,070 --> 00:00:10,060
this first demo, I wanna introduce another new concept,

3
00:00:10,060 --> 00:00:12,280
which is not related to the Dom,

4
00:00:12,280 --> 00:00:15,630
but which is important in JavaScript, in general,

5
00:00:15,630 --> 00:00:17,050
which is a bit more advanced,

6
00:00:17,050 --> 00:00:19,160
and which therefore fits perfectly

7
00:00:19,160 --> 00:00:21,620
into this section, as well.

8
00:00:21,620 --> 00:00:24,350
And this concept is about Variables

9
00:00:24,350 --> 00:00:29,257
and a variation of those variables, called Constants.

10
00:00:30,550 --> 00:00:32,750
Now, we did learn about variables, already,

11
00:00:32,750 --> 00:00:34,170
in the last core section,

12
00:00:34,170 --> 00:00:38,320
and we saw plenty of examples for variables in action.

13
00:00:38,320 --> 00:00:40,130
Just in case you forgot it,

14
00:00:40,130 --> 00:00:43,610
Variables are these labeled data containers,

15
00:00:43,610 --> 00:00:45,470
which we use to store data,

16
00:00:45,470 --> 00:00:47,980
so that we can then use one and the same data

17
00:00:47,980 --> 00:00:50,130
in different parts of our code,

18
00:00:50,130 --> 00:00:52,940
possibly all the multiple times.

19
00:00:52,940 --> 00:00:55,570
Now, variables are called variables

20
00:00:55,570 --> 00:00:59,740
because we can change the values stored in a variable.

21
00:00:59,740 --> 00:01:02,990
We can overwrite the value stored in a variable

22
00:01:02,990 --> 00:01:04,360
with a new one.

23
00:01:04,360 --> 00:01:07,480
If I created a variable with the "let" keyword,

24
00:01:07,480 --> 00:01:10,640
then I can override the value stored in that variable

25
00:01:10,640 --> 00:01:13,590
with a brand new value, if I want to.

26
00:01:13,590 --> 00:01:16,450
And therefore, thus far in this course,

27
00:01:16,450 --> 00:01:19,900
where we only learned about these kinds of variables,

28
00:01:19,900 --> 00:01:23,310
we only worked with such true variables,

29
00:01:23,310 --> 00:01:24,933
which could really change.

30
00:01:25,890 --> 00:01:27,810
Now, often in development, though,

31
00:01:27,810 --> 00:01:32,550
you also deal with so-called Constant values.

32
00:01:32,550 --> 00:01:36,090
So, values which you store in a variable once,

33
00:01:36,090 --> 00:01:39,020
but which you then never change.

34
00:01:39,020 --> 00:01:42,240
So variables where the value actually never changes

35
00:01:42,240 --> 00:01:44,140
are called Constants.

36
00:01:44,140 --> 00:01:47,260
And therefore the name "variable" is a bit strange

37
00:01:47,260 --> 00:01:49,860
because they're not really variable,

38
00:01:49,860 --> 00:01:52,730
but variable is a general term in programming

39
00:01:52,730 --> 00:01:54,800
describing these data containers,

40
00:01:54,800 --> 00:01:56,590
and therefore in JavaScript,

41
00:01:56,590 --> 00:01:59,470
we also call constants variables.

42
00:01:59,470 --> 00:02:02,740
Now constants are created with the "const" keyword,

43
00:02:02,740 --> 00:02:06,400
and up to this point, we haven't seen them yet.

44
00:02:06,400 --> 00:02:07,920
We haven't worked with them yet,

45
00:02:07,920 --> 00:02:09,460
and that's going to change

46
00:02:09,460 --> 00:02:11,020
and therefore I'll now show you

47
00:02:11,020 --> 00:02:15,050
why we might wanna use constants in certain scenarios,

48
00:02:15,050 --> 00:02:16,453
and how we use them.

49
00:02:17,340 --> 00:02:21,190
Now what's the the idea behind constants?

50
00:02:21,190 --> 00:02:22,030
First of all,

51
00:02:22,030 --> 00:02:25,090
it's an alternative to using the let keyword

52
00:02:25,090 --> 00:02:28,460
and to create a variable that can be changed.

53
00:02:28,460 --> 00:02:30,300
But the idea is simple.

54
00:02:30,300 --> 00:02:32,410
Sometimes you have variables,

55
00:02:32,410 --> 00:02:35,040
data containers, that contain a value

56
00:02:35,040 --> 00:02:39,700
which you actually never replace with a new value.

57
00:02:39,700 --> 00:02:42,470
So you might have some entered username,

58
00:02:42,470 --> 00:02:45,290
which you fetched from some input field,

59
00:02:45,290 --> 00:02:48,950
and maybe that never changes once you fetched it.

60
00:02:48,950 --> 00:02:52,450
So once the foreign was submitted, maybe.

61
00:02:52,450 --> 00:02:53,283
In that case,

62
00:02:53,283 --> 00:02:55,000
you can store it in a variable,

63
00:02:55,000 --> 00:02:57,320
but you can also mark it as a const,

64
00:02:57,320 --> 00:02:59,250
with that const keyword,

65
00:02:59,250 --> 00:03:02,910
to make it very clear to you, and to other developers,

66
00:03:02,910 --> 00:03:07,910
that this variable will actually never hold any other value

67
00:03:08,600 --> 00:03:11,590
than the one that was initially assigned,

68
00:03:11,590 --> 00:03:15,210
and if you would try to assign another value,

69
00:03:15,210 --> 00:03:16,440
as you're seeing it here

70
00:03:16,440 --> 00:03:19,260
in this little demo snippet I prepared,

71
00:03:19,260 --> 00:03:21,970
then you would get an error

72
00:03:21,970 --> 00:03:24,400
if this code would be executed,

73
00:03:24,400 --> 00:03:27,840
because you would be violating your own rules,

74
00:03:27,840 --> 00:03:28,970
or your own rule,

75
00:03:28,970 --> 00:03:32,430
which says that this variable, username,

76
00:03:32,430 --> 00:03:36,490
must not be overwritten with a new value.

77
00:03:36,490 --> 00:03:39,560
And that can add extra code safety,

78
00:03:39,560 --> 00:03:43,100
and ensure that the code is not changed

79
00:03:43,100 --> 00:03:45,820
in a way that breaks your program.

80
00:03:45,820 --> 00:03:49,370
That might not matter too much in small demos,

81
00:03:49,370 --> 00:03:51,270
or small projects,

82
00:03:51,270 --> 00:03:53,910
but in bigger projects and bigger scripts,

83
00:03:53,910 --> 00:03:56,240
where maybe multiple developers

84
00:03:56,240 --> 00:03:58,210
are working on the same code,

85
00:03:58,210 --> 00:04:00,450
this can add extra safety,

86
00:04:00,450 --> 00:04:03,213
which avoids unwanted errors.

87
00:04:04,583 --> 00:04:05,800
And, because of that,

88
00:04:05,800 --> 00:04:10,400
it is typically considered a good practice, as a developer,

89
00:04:10,400 --> 00:04:14,660
to be explicit in cases where you can be explicit

90
00:04:14,660 --> 00:04:18,019
about your intentions of your code.

91
00:04:18,019 --> 00:04:20,110
And if you know that some variable

92
00:04:20,110 --> 00:04:24,530
will never hold any other value than the initial value,

93
00:04:24,530 --> 00:04:28,310
whilst you can keep it as a variable,

94
00:04:28,310 --> 00:04:32,640
it is a good idea to turn it into a constant, instead,

95
00:04:32,640 --> 00:04:34,360
to make that very clear,

96
00:04:34,360 --> 00:04:38,453
that this variable will never receive a new value.

97
00:04:39,550 --> 00:04:42,530
And we can apply this to this demo project

98
00:04:42,530 --> 00:04:44,620
we worked on, thus far.

99
00:04:44,620 --> 00:04:47,430
If we have a look at our demo code here,

100
00:04:47,430 --> 00:04:52,417
there is indeed one thing you maybe recognize or see.

101
00:04:53,460 --> 00:04:55,200
And that's the fact that

102
00:04:55,200 --> 00:04:59,920
all the variables I am creating here never change.

103
00:04:59,920 --> 00:05:02,440
None of these variables change.

104
00:05:02,440 --> 00:05:04,710
I create two variables here,

105
00:05:04,710 --> 00:05:07,530
and I assigned values initially,

106
00:05:07,530 --> 00:05:11,003
and then I never assigned a new value thereafter.

107
00:05:12,524 --> 00:05:15,400
And the same is true for all other variables,

108
00:05:15,400 --> 00:05:17,500
and therefore we can.

109
00:05:17,500 --> 00:05:18,930
And that's important, we can,

110
00:05:18,930 --> 00:05:19,950
we don't have to,

111
00:05:19,950 --> 00:05:23,990
but we can turn them all into constants

112
00:05:23,990 --> 00:05:27,610
by replacing let with const.

113
00:05:27,610 --> 00:05:30,000
And the advantage we get from that

114
00:05:30,000 --> 00:05:31,570
is that we make it clear

115
00:05:31,570 --> 00:05:35,323
that these values should never change.

116
00:05:36,840 --> 00:05:39,113
So that's what we can do.

117
00:05:40,130 --> 00:05:44,330
And I did mention at the beginning of this course section,

118
00:05:44,330 --> 00:05:45,750
that, as a developer,

119
00:05:45,750 --> 00:05:48,600
we sometimes wanna be very strict

120
00:05:48,600 --> 00:05:51,070
and we want to ensure that our code

121
00:05:51,070 --> 00:05:53,050
is not getting used incorrectly,

122
00:05:53,050 --> 00:05:56,170
either by us or by other developers.

123
00:05:56,170 --> 00:05:59,100
And here, I actually have a good example for this,

124
00:05:59,100 --> 00:06:00,510
why it might be a good idea

125
00:06:00,510 --> 00:06:02,763
to use a couple of constants here.

126
00:06:03,880 --> 00:06:07,160
Take these element variables,

127
00:06:07,160 --> 00:06:10,630
or constants now, up there,

128
00:06:10,630 --> 00:06:14,420
Actually, these variables, as they were before,

129
00:06:14,420 --> 00:06:17,860
should never receive new values,

130
00:06:17,860 --> 00:06:22,340
because our other code relies on the fact

131
00:06:22,340 --> 00:06:25,250
that in this productNameInputElement

132
00:06:25,250 --> 00:06:28,840
we have that input element, as a value,

133
00:06:28,840 --> 00:06:31,310
because we wanna add an event listener to that,

134
00:06:31,310 --> 00:06:33,630
and because we, for example, wanna extract

135
00:06:33,630 --> 00:06:35,523
the max length from that.

136
00:06:36,920 --> 00:06:39,890
So if we would leave that as a variable,

137
00:06:39,890 --> 00:06:43,440
we, theoretically, could write code

138
00:06:43,440 --> 00:06:47,010
where we overwrite the value stored in this variable

139
00:06:47,010 --> 00:06:49,120
with a different value,

140
00:06:49,120 --> 00:06:51,950
maybe with a different HTML element,

141
00:06:51,950 --> 00:06:54,840
and all of a sudden our other code

142
00:06:54,840 --> 00:06:58,090
that depends on this being the initial value,

143
00:06:58,090 --> 00:07:01,770
the productNameInput field would break.

144
00:07:01,770 --> 00:07:05,210
And of course that is kind of a made up scenario here

145
00:07:05,210 --> 00:07:08,400
because this is a very short and simple script.

146
00:07:08,400 --> 00:07:11,810
And we are the only developer working on this.

147
00:07:11,810 --> 00:07:13,890
But as you get more experienced,

148
00:07:13,890 --> 00:07:17,400
and as you start building more complex websites,

149
00:07:17,400 --> 00:07:21,590
it will not be unusual that you have longer scripts

150
00:07:21,590 --> 00:07:24,140
and that you maybe work on them in a team.

151
00:07:24,140 --> 00:07:27,550
And if you then start overriding some variable,

152
00:07:27,550 --> 00:07:31,090
that one of your colleagues needs, with a different value,

153
00:07:31,090 --> 00:07:33,830
because you think it doesn't matter, for example,

154
00:07:33,830 --> 00:07:36,453
all of a sudden, some other code breaks.

155
00:07:37,320 --> 00:07:40,580
That's why it's optional here in the end,

156
00:07:40,580 --> 00:07:42,450
because this is simple,

157
00:07:42,450 --> 00:07:46,880
but why it, generally, is considered a good practice

158
00:07:46,880 --> 00:07:51,330
to use constants, if you can be that explicit,

159
00:07:51,330 --> 00:07:54,930
and if you never plan on changing that value,

160
00:07:54,930 --> 00:07:57,130
because then you can lock that in

161
00:07:57,130 --> 00:07:59,723
and ensure that it never changes.

162
00:08:00,900 --> 00:08:02,600
But when I do that,

163
00:08:02,600 --> 00:08:05,160
there are a couple of parts in that code

164
00:08:05,160 --> 00:08:07,210
that could be confusing.

165
00:08:07,210 --> 00:08:11,230
For example, I'm creating constants here in this function,

166
00:08:11,230 --> 00:08:13,130
but, wait a second.

167
00:08:13,130 --> 00:08:17,230
Can't this function execute more than once?

168
00:08:17,230 --> 00:08:19,310
It executes for every key stroke,

169
00:08:19,310 --> 00:08:22,330
so technically these variables do change

170
00:08:22,330 --> 00:08:24,023
with every keystroke, right?

171
00:08:25,060 --> 00:08:27,060
Well, not really.

172
00:08:27,060 --> 00:08:29,430
This function executes with every keystroke,

173
00:08:29,430 --> 00:08:30,290
that is correct,

174
00:08:30,290 --> 00:08:33,690
but once it's done executing,

175
00:08:33,690 --> 00:08:37,970
all the variables that were created during the execution,

176
00:08:37,970 --> 00:08:40,169
and that are stored in memory,

177
00:08:40,169 --> 00:08:42,730
because that is where the variables are stored,

178
00:08:42,730 --> 00:08:45,200
they are stored in your computer memory.

179
00:08:45,200 --> 00:08:48,270
All those variables are thrown away,

180
00:08:48,270 --> 00:08:50,110
not what you see on the page

181
00:08:50,110 --> 00:08:54,160
and not any changes that were maybe made by your function,

182
00:08:54,160 --> 00:08:57,030
but the variables which are stored in memory

183
00:08:57,030 --> 00:09:01,583
are thrown away and deleted once this execution finishes.

184
00:09:02,780 --> 00:09:06,310
That means that when the function executes the next time,

185
00:09:06,310 --> 00:09:11,310
for another keystroke, brand new variables are created.

186
00:09:11,580 --> 00:09:13,930
Yes, they have the same name as before,

187
00:09:13,930 --> 00:09:17,760
but they occupy new parts of your computer memory,

188
00:09:17,760 --> 00:09:20,070
because the old ones were deleted.

189
00:09:20,070 --> 00:09:24,080
So, technically, we don't change existing variables,

190
00:09:24,080 --> 00:09:26,920
we always create new ones,

191
00:09:26,920 --> 00:09:28,000
and, therefore,

192
00:09:28,000 --> 00:09:31,450
during the function execution they are constant,

193
00:09:31,450 --> 00:09:33,140
because thereafter they are deleted,

194
00:09:33,140 --> 00:09:34,863
they are never overwritten.

195
00:09:36,290 --> 00:09:39,150
Now, another confusing thing could be

196
00:09:39,150 --> 00:09:41,630
that we do change some of the elements

197
00:09:41,630 --> 00:09:44,170
that are stored in constants.

198
00:09:44,170 --> 00:09:46,620
But for example, on remainingCharsElement,

199
00:09:46,620 --> 00:09:48,260
which is this constant here,

200
00:09:48,260 --> 00:09:51,010
I am changing the text content.

201
00:09:51,010 --> 00:09:53,370
Or on productNameInputElement,

202
00:09:53,370 --> 00:09:55,750
I am adding an event listener.

203
00:09:55,750 --> 00:09:57,740
So, clearly, I am changing

204
00:09:57,740 --> 00:10:01,300
the objects stored in these constants.

205
00:10:01,300 --> 00:10:02,360
And that is correct,

206
00:10:02,360 --> 00:10:04,200
I am changing these objects.

207
00:10:04,200 --> 00:10:07,100
I am changing these Dom elements for example,

208
00:10:07,100 --> 00:10:10,730
but I'm still not changing

209
00:10:10,730 --> 00:10:14,000
the constants, the data containers.

210
00:10:14,000 --> 00:10:17,020
It is super important to understand that,

211
00:10:17,020 --> 00:10:19,240
the value stored in a constant,

212
00:10:19,240 --> 00:10:23,930
in this case here, is the entire HTML element object.

213
00:10:23,930 --> 00:10:26,853
In this case, the object representing the input.

214
00:10:27,840 --> 00:10:31,500
Now, I would only change the constant itself

215
00:10:31,500 --> 00:10:34,500
if I reassign a value with an equal sign,

216
00:10:34,500 --> 00:10:37,040
not to some property of the object,

217
00:10:37,040 --> 00:10:39,680
but to the constant itself.

218
00:10:39,680 --> 00:10:43,010
So if I would reach out to my remaining CharsElement,

219
00:10:43,010 --> 00:10:45,940
and I tried assigning a new value like this,

220
00:10:45,940 --> 00:10:48,853
then I would try to change the constant.

221
00:10:50,020 --> 00:10:53,900
If I instead change the value of some property in there,

222
00:10:53,900 --> 00:10:56,420
then the constant stays the same.

223
00:10:56,420 --> 00:10:59,450
It's just the object stored in the constant

224
00:10:59,450 --> 00:11:02,630
where some of its properties change.

225
00:11:02,630 --> 00:11:04,940
The object itself is the same as before,

226
00:11:04,940 --> 00:11:06,990
just some of its properties changed,

227
00:11:06,990 --> 00:11:09,460
but the object stored in the constant,

228
00:11:09,460 --> 00:11:11,940
and therefore the value of the constant itself,

229
00:11:11,940 --> 00:11:14,640
overall was not overwritten.

230
00:11:14,640 --> 00:11:18,070
And that can definitely be confusing,

231
00:11:18,070 --> 00:11:21,240
but it's essentially just important to keep in mind

232
00:11:21,240 --> 00:11:24,960
that values inside of an object

233
00:11:24,960 --> 00:11:27,770
are just that, values in an object,

234
00:11:27,770 --> 00:11:30,900
not the values stored directly in a constant.

235
00:11:30,900 --> 00:11:33,630
The value stored in a constant is just the object.

236
00:11:33,630 --> 00:11:35,480
And as long as we don't override that

237
00:11:35,480 --> 00:11:37,250
with a brand new object,

238
00:11:37,250 --> 00:11:40,840
and we try to assign a new value to that constant

239
00:11:40,840 --> 00:11:42,560
with the equal character again,

240
00:11:42,560 --> 00:11:44,360
as long as we don't do that,

241
00:11:44,360 --> 00:11:46,513
the constant didn't change.

242
00:11:47,730 --> 00:11:49,530
If that's still a bit confusing,

243
00:11:49,530 --> 00:11:52,380
it is something that will become clearer with more practice,

244
00:11:52,380 --> 00:11:55,020
and the deeper you dive into JavaScript.

245
00:11:55,020 --> 00:11:58,280
Here, we are still only scratching the surface,

246
00:11:58,280 --> 00:12:01,050
we are still only getting started with it.

247
00:12:01,050 --> 00:12:04,370
Nonetheless, I wanted to touch on this concept

248
00:12:04,370 --> 00:12:07,630
and I wanted to bring back constants,

249
00:12:07,630 --> 00:12:10,000
because it is quite common

250
00:12:10,000 --> 00:12:14,650
to use as many constants as possible to make it very clear

251
00:12:14,650 --> 00:12:17,040
whether some variable in your code

252
00:12:17,040 --> 00:12:20,070
will eventually be overwritten with a new value,

253
00:12:20,070 --> 00:12:23,303
or whether it is constant and thus never change.