Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,460 --> 00:00:03,090
Welcome back.
2
00:00:03,090 --> 00:00:07,030
Let's now start to really learn the JavaScript language
3
00:00:07,030 --> 00:00:10,033
starting with values and variables.
4
00:00:11,280 --> 00:00:12,113
And let's start
5
00:00:12,113 --> 00:00:15,470
by getting rid of some of the code that we have here.
6
00:00:15,470 --> 00:00:17,713
So this one here, isn't doing anything.
7
00:00:18,740 --> 00:00:21,000
And let's also delete this one
8
00:00:21,000 --> 00:00:24,253
so that we don't get that annoying popup all the time.
9
00:00:25,120 --> 00:00:29,670
So in this section, I will be using persons as examples
10
00:00:29,670 --> 00:00:34,440
for example, a person's name, a person's age or a job.
11
00:00:34,440 --> 00:00:35,570
All right?
12
00:00:35,570 --> 00:00:38,800
But anyway, let's talk about values now.
13
00:00:38,800 --> 00:00:42,750
So a value is basically a piece of data.
14
00:00:42,750 --> 00:00:44,750
So it's the most fundamental unit
15
00:00:44,750 --> 00:00:48,010
of information that we have in programming.
16
00:00:48,010 --> 00:00:51,833
For example, this text, Jonas, is a value.
17
00:00:53,320 --> 00:00:54,153
All right?
18
00:00:54,153 --> 00:00:56,290
So this here is a value.
19
00:00:56,290 --> 00:00:59,740
And again, if we want to actually see this in the console
20
00:00:59,740 --> 00:01:03,705
let's say console.log and then open up the parenthesis
21
00:01:03,705 --> 00:01:08,705
and then close them here and then the semicolons.
22
00:01:10,410 --> 00:01:15,410
So if I save and reload, then of course we get Jonas.
23
00:01:15,780 --> 00:01:16,613
Okay?
24
00:01:16,613 --> 00:01:19,010
And so Jonas here is the value
25
00:01:20,850 --> 00:01:24,510
or we can, of course, have different values
26
00:01:24,510 --> 00:01:27,573
for example, here 23 as the value,
27
00:01:29,760 --> 00:01:30,593
right?
28
00:01:30,593 --> 00:01:33,360
And so now we see 23 in the console.
29
00:01:33,360 --> 00:01:36,100
And the same is true, here.
30
00:01:36,100 --> 00:01:39,800
So in this line of code where the values are actually 40
31
00:01:40,760 --> 00:01:45,000
and eight and 23 and 10.
32
00:01:45,000 --> 00:01:47,590
So all these four are different values.
33
00:01:47,590 --> 00:01:50,300
And then these mathematical operators here
34
00:01:50,300 --> 00:01:53,760
joined them together to form just one value.
35
00:01:53,760 --> 00:01:56,670
And that value is then 61.
36
00:01:56,670 --> 00:01:57,503
Okay?
37
00:01:57,503 --> 00:02:00,460
And so a value is basically the smallest unit
38
00:02:00,460 --> 00:02:04,360
of information that we have in JavaScript.
39
00:02:04,360 --> 00:02:08,450
Now, one extremely useful thing that we can do with values
40
00:02:08,450 --> 00:02:11,140
is to store them into variables.
41
00:02:11,140 --> 00:02:14,973
And so this way we can reuse them over and over again,
42
00:02:16,290 --> 00:02:19,210
for example we can say, let,
43
00:02:19,210 --> 00:02:20,970
and then the name of the variable
44
00:02:22,280 --> 00:02:27,280
and then assign a value like Jonas to this variable.
45
00:02:27,350 --> 00:02:28,183
Okay?
46
00:02:28,183 --> 00:02:32,550
And so what we did here is called declaring a variable.
47
00:02:32,550 --> 00:02:33,470
Okay?
48
00:02:33,470 --> 00:02:36,310
And so this will actually create a real variable
49
00:02:36,310 --> 00:02:38,290
in your computer's memory
50
00:02:38,290 --> 00:02:42,750
and we'll store this value inside of that variable.
51
00:02:42,750 --> 00:02:46,040
And actually that is exactly what we did up here,
52
00:02:46,040 --> 00:02:47,540
right in the beginning.
53
00:02:47,540 --> 00:02:51,170
So here we declared a variable called JS
54
00:02:51,170 --> 00:02:55,130
and assigned the value of amazing to that variable.
55
00:02:55,130 --> 00:02:56,010
Right?
56
00:02:56,010 --> 00:02:58,040
And so now it hopefully makes sense to you
57
00:02:58,040 --> 00:02:59,913
what we did back then.
58
00:03:00,930 --> 00:03:05,930
So I like to imagine a variable, like being a box.
59
00:03:06,020 --> 00:03:09,620
So in the real world, a box can hold some object
60
00:03:09,620 --> 00:03:11,330
for example, a book,
61
00:03:11,330 --> 00:03:13,680
and we can then write a label on the box
62
00:03:13,680 --> 00:03:15,820
to describe what's in it.
63
00:03:15,820 --> 00:03:18,950
And then we can find the object later when we need it
64
00:03:18,950 --> 00:03:21,310
by using that label.
65
00:03:21,310 --> 00:03:24,750
And variables actually work in the exact same way.
66
00:03:24,750 --> 00:03:28,880
So here, basically we have a box called firstName
67
00:03:28,880 --> 00:03:33,320
and into that box, we put the value of Jonas.
68
00:03:33,320 --> 00:03:36,120
And now if we want to use this value
69
00:03:36,120 --> 00:03:39,770
all we have to do is to basically use this label
70
00:03:39,770 --> 00:03:42,720
or in other words, this variable name.
71
00:03:42,720 --> 00:03:45,280
So first name in this case.
72
00:03:45,280 --> 00:03:47,410
And so let's use it actually.
73
00:03:47,410 --> 00:03:50,600
And for that, once again, I will use console.log
74
00:03:51,500 --> 00:03:53,810
and you will see me using console.log
75
00:03:53,810 --> 00:03:57,000
throughout this entire course, actually.
76
00:03:57,000 --> 00:04:00,530
So whenever we need to output something from our code
77
00:04:00,530 --> 00:04:04,800
to the browser, we always use console.log like this.
78
00:04:04,800 --> 00:04:08,260
And so here now, instead of passing a literal value
79
00:04:08,260 --> 00:04:11,510
like we did here and here and here,
80
00:04:11,510 --> 00:04:13,390
now we can pass in,
81
00:04:13,390 --> 00:04:16,003
So we can write here, the variable name,
82
00:04:18,920 --> 00:04:20,253
so first name.
83
00:04:21,280 --> 00:04:22,113
Okay?
84
00:04:23,330 --> 00:04:27,690
And if I save and reload, it let's see what happens.
85
00:04:27,690 --> 00:04:29,820
Indeed, we get Jonas.
86
00:04:29,820 --> 00:04:32,350
So from line number eight.
87
00:04:32,350 --> 00:04:34,460
And so that's right here.
88
00:04:34,460 --> 00:04:36,340
And that means that indeed
89
00:04:36,340 --> 00:04:39,253
or variable declaration up here worked.
90
00:04:40,160 --> 00:04:41,690
And if we now change this
91
00:04:41,690 --> 00:04:46,690
to Bob, let's say, then here we should get Bob.
92
00:04:47,230 --> 00:04:48,630
Right?
93
00:04:48,630 --> 00:04:50,663
And indeed, now it's Bob.
94
00:04:52,300 --> 00:04:53,333
Let's put it back.
95
00:04:54,230 --> 00:04:58,620
And of course we can now use this variable name many times.
96
00:04:58,620 --> 00:05:01,420
So let's just copy and paste this here a couple of times
97
00:05:02,380 --> 00:05:04,723
and give it a save.
98
00:05:05,800 --> 00:05:09,230
And so now we have it three times
99
00:05:09,230 --> 00:05:11,820
and that means that whenever JavaScript sees
100
00:05:11,820 --> 00:05:15,360
this variable name here it will basically replace it
101
00:05:15,360 --> 00:05:19,870
with the original value that we assigned to the variable.
102
00:05:19,870 --> 00:05:24,130
So again, that's Jonas and this is extremely useful
103
00:05:24,130 --> 00:05:26,640
because now if I want to change the first name
104
00:05:26,640 --> 00:05:30,020
to something else, I only have to do it in one place.
105
00:05:30,020 --> 00:05:31,063
So just here.
106
00:05:31,960 --> 00:05:34,890
So let's change it here to Matilda
107
00:05:34,890 --> 00:05:37,740
and if I save it now and reload,
108
00:05:37,740 --> 00:05:40,503
of course it will change in all the three places.
109
00:05:41,520 --> 00:05:45,550
So this is one of the big advantages of variables.
110
00:05:45,550 --> 00:05:48,650
Without variables, I would now have to manually change
111
00:05:48,650 --> 00:05:51,630
the value everywhere to Matilda.
112
00:05:51,630 --> 00:05:56,350
But like this everywhere where I reference this variable
113
00:05:56,350 --> 00:05:59,540
it will automatically changed to Matilda.
114
00:05:59,540 --> 00:06:01,610
So that's one of the most important things
115
00:06:01,610 --> 00:06:04,870
to keep in mind about variables.
116
00:06:04,870 --> 00:06:05,703
Great.
117
00:06:05,703 --> 00:06:08,440
And now that we know what a variable is
118
00:06:08,440 --> 00:06:11,270
let's just very quickly talk about conventions
119
00:06:11,270 --> 00:06:14,000
and rules for naming variables
120
00:06:14,000 --> 00:06:18,050
because we shouldn't just give random names to variables.
121
00:06:18,050 --> 00:06:20,360
So first, the way that I named this
122
00:06:20,360 --> 00:06:23,780
variable here is called camelCase,
123
00:06:23,780 --> 00:06:26,970
camelCase means that whenever I have multiple words
124
00:06:26,970 --> 00:06:31,970
in a variable name, I write the first word with a lowercase
125
00:06:32,310 --> 00:06:35,883
and then all the next words with upper case, like this.
126
00:06:37,920 --> 00:06:42,833
So if it was just first, we would write it like this.
127
00:06:47,200 --> 00:06:51,703
But if we had more than one word, like first name person
128
00:06:53,200 --> 00:06:55,540
then you'll see that all the subsequent words
129
00:06:55,540 --> 00:06:58,890
are written with this uppercase letter.
130
00:06:58,890 --> 00:07:02,540
And this is kind of a standard in the JavaScript world.
131
00:07:02,540 --> 00:07:05,710
But of course, there are other ways of naming variables.
132
00:07:05,710 --> 00:07:07,130
For example, we could write
133
00:07:09,905 --> 00:07:11,110
first_name
134
00:07:11,110 --> 00:07:13,300
with an underscore like this,
135
00:07:13,300 --> 00:07:15,960
and this is very popular in other languages
136
00:07:15,960 --> 00:07:20,190
like Ruby or like this.
137
00:07:20,190 --> 00:07:21,023
Okay?
138
00:07:21,023 --> 00:07:23,750
And you can use whatever you like most
139
00:07:23,750 --> 00:07:26,040
just keep in mind that it's kind of a standard
140
00:07:26,040 --> 00:07:29,800
in JavaScript to write variable names like this.
141
00:07:29,800 --> 00:07:32,987
So usually whenever you see other people's code
142
00:07:32,987 --> 00:07:35,290
the variables will usually be written
143
00:07:35,290 --> 00:07:37,663
using a the camelCase notation.
144
00:07:38,830 --> 00:07:40,710
So that's kind of a convention of
145
00:07:40,710 --> 00:07:43,420
how to name variables in JavaScript
146
00:07:43,420 --> 00:07:47,010
but there are also some actual hard rules in JavaScript
147
00:07:47,010 --> 00:07:49,740
about how we can name variables.
148
00:07:49,740 --> 00:07:54,740
For example we cannot write something like this
149
00:07:54,800 --> 00:07:59,800
like three years and set it to the value of three.
150
00:08:00,860 --> 00:08:03,380
So this is an illegal variable name
151
00:08:03,380 --> 00:08:07,010
and VS code actually warns us right away here.
152
00:08:07,010 --> 00:08:08,840
And again that's because this variable name
153
00:08:08,840 --> 00:08:10,730
starts with a number.
154
00:08:10,730 --> 00:08:12,100
And if we try it to load this
155
00:08:12,100 --> 00:08:15,410
in JavaScript, we would get this error.
156
00:08:15,410 --> 00:08:20,210
So that's an invalid or unexpected token here.
157
00:08:20,210 --> 00:08:22,590
And it's important to actually start reading
158
00:08:22,590 --> 00:08:26,170
these error messages right from the beginning of the course.
159
00:08:26,170 --> 00:08:29,630
So we see that this is a so-called syntax error
160
00:08:29,630 --> 00:08:33,460
which means that we did a mistake in writing or a code.
161
00:08:33,460 --> 00:08:36,660
So that's a mistake in the code's syntax
162
00:08:36,660 --> 00:08:40,190
and we can also see the line where the error occurred.
163
00:08:40,190 --> 00:08:45,010
So line 13 so that we can then go ahead and fix it
164
00:08:45,010 --> 00:08:48,440
and notice how this error was shown in the console.
165
00:08:48,440 --> 00:08:51,663
Even though we didn't use console.log in this case.
166
00:08:52,590 --> 00:08:53,810
Okay?
167
00:08:53,810 --> 00:08:56,040
So we don't need to use console.log
168
00:08:56,040 --> 00:08:58,160
for the console to show errors.
169
00:08:58,160 --> 00:08:59,730
All the errors that we make
170
00:08:59,730 --> 00:09:02,280
will always end up in the console.
171
00:09:02,280 --> 00:09:06,573
And also here with this, well, error icon.
172
00:09:07,840 --> 00:09:11,450
Now anyway, back to our naming conventions here.
173
00:09:11,450 --> 00:09:12,850
So we already learned
174
00:09:12,850 --> 00:09:15,850
that variable names cannot start with a number.
175
00:09:15,850 --> 00:09:19,290
And in fact, variable names can only contain numbers
176
00:09:19,290 --> 00:09:22,693
letters, underscores, or the dollar assign.
177
00:09:24,340 --> 00:09:26,180
So for example, if we try to write
178
00:09:26,180 --> 00:09:28,560
Jonas and Matilda
179
00:09:31,000 --> 00:09:33,460
equals JM
180
00:09:33,460 --> 00:09:34,980
we would, once again,
181
00:09:34,980 --> 00:09:36,843
get a syntax error.
182
00:09:38,180 --> 00:09:39,013
Right?
183
00:09:39,013 --> 00:09:42,533
And this time it's telling us unexpected token, &.
184
00:09:43,856 --> 00:09:45,990
And, and again that's because this symbol here
185
00:09:45,990 --> 00:09:48,280
is illegal in variable names.
186
00:09:48,280 --> 00:09:49,830
They can only contain numbers,
187
00:09:49,830 --> 00:09:53,560
letters, underscores, or the dollar sign.
188
00:09:53,560 --> 00:09:56,353
So this here, for example, would be allowed.
189
00:09:58,160 --> 00:10:02,150
So if we reload now, we get no more errors here.
190
00:10:02,150 --> 00:10:05,870
Another error might occur when we try to name a variable
191
00:10:05,870 --> 00:10:08,640
using a reserved JavaScript keyboard.
192
00:10:08,640 --> 00:10:12,693
For example, if we did this, so new,
193
00:10:14,030 --> 00:10:16,080
for example set it to 27,
194
00:10:16,080 --> 00:10:18,583
then this would also not be allowed.
195
00:10:20,100 --> 00:10:22,780
So you see unexpected token new.
196
00:10:22,780 --> 00:10:27,240
And that's because new is a reserved keyword in JavaScript
197
00:10:27,240 --> 00:10:29,520
as we will see a little bit later.
198
00:10:29,520 --> 00:10:32,693
And the same goes for something like function.
199
00:10:35,340 --> 00:10:38,290
So again unexpected token here,
200
00:10:38,290 --> 00:10:40,040
if we wanted to fix that we could,
201
00:10:40,040 --> 00:10:44,010
for example, start this variable name with an underscore
202
00:10:44,010 --> 00:10:46,590
or with the dollar sign.
203
00:10:46,590 --> 00:10:49,050
So that's the only two symbols that are allowed
204
00:10:49,050 --> 00:10:52,110
besides letters and numbers.
205
00:10:52,110 --> 00:10:54,690
Another variable name that's kind of reserved
206
00:10:54,690 --> 00:10:58,333
but still actually allowed to use is the word name.
207
00:10:59,230 --> 00:11:01,023
So we could do this.
208
00:11:03,100 --> 00:11:04,780
And it would actually work.
209
00:11:04,780 --> 00:11:08,730
But in some cases, this creates some problems.
210
00:11:08,730 --> 00:11:11,970
Because again, this is kind of a reserved keyword
211
00:11:11,970 --> 00:11:13,930
but it's still legal to use.
212
00:11:13,930 --> 00:11:15,970
But since it is a keyword,
213
00:11:15,970 --> 00:11:19,400
never call your variables just name.
214
00:11:19,400 --> 00:11:20,233
Okay?
215
00:11:20,233 --> 00:11:24,763
That's why I always call them first name, like this.
216
00:11:26,250 --> 00:11:27,210
Let's actually get rid
217
00:11:27,210 --> 00:11:30,393
of this one because we already have first name up there.
218
00:11:31,840 --> 00:11:33,223
Now another convention is
219
00:11:33,223 --> 00:11:35,500
that we should not start a variable name
220
00:11:35,500 --> 00:11:39,750
with an uppercase letter, so we should not
221
00:11:39,750 --> 00:11:40,583
do
222
00:11:41,600 --> 00:11:42,720
this.
223
00:11:42,720 --> 00:11:45,590
So that person, Jonas.
224
00:11:45,590 --> 00:11:49,720
Now again, it's a convention, so that's not illegal.
225
00:11:49,720 --> 00:11:52,750
It's just that we use this kind of variable names
226
00:11:52,750 --> 00:11:55,920
with an uppercase letter for a specific use case
227
00:11:55,920 --> 00:11:59,350
in JavaScript, which is object-oriented programming
228
00:11:59,350 --> 00:12:01,690
as we will see later in the course.
229
00:12:01,690 --> 00:12:05,570
So for now never do this, but instead you should write it
230
00:12:05,570 --> 00:12:09,600
like this, with a lower case letter starting.
231
00:12:09,600 --> 00:12:13,250
On the same note variables that are all in uppercase
232
00:12:13,250 --> 00:12:16,883
are reserved for constants that we know will never change.
233
00:12:17,980 --> 00:12:20,830
For example, the number PI
234
00:12:20,830 --> 00:12:25,830
which is like 3.1415, and so on and so forth.
235
00:12:26,750 --> 00:12:30,100
So we know that this number is never gonna change.
236
00:12:30,100 --> 00:12:31,660
And so that's a constant.
237
00:12:31,660 --> 00:12:34,480
And for that, we have a convention of writing it
238
00:12:34,480 --> 00:12:35,970
in all upper case.
239
00:12:35,970 --> 00:12:38,750
and VS code actually marks this variable name
240
00:12:38,750 --> 00:12:40,130
with a different color
241
00:12:40,130 --> 00:12:43,463
because it knows about this convention that we use.
242
00:12:44,300 --> 00:12:46,600
Of course you could also write it like this,
243
00:12:46,600 --> 00:12:50,400
but then this would be kind of weird actually.
244
00:12:50,400 --> 00:12:54,090
So if it's a real constant, write it in uppercase
245
00:12:54,090 --> 00:12:57,780
like this, so that's a pretty normal convention there
246
00:12:57,780 --> 00:13:00,230
in programming as a whole.
247
00:13:00,230 --> 00:13:02,000
Finally, to finish this lecture
248
00:13:02,000 --> 00:13:04,660
let's talk about one final convention,
249
00:13:04,660 --> 00:13:06,040
which is to make sure
250
00:13:06,040 --> 00:13:08,930
that our variable names are descriptive
251
00:13:08,930 --> 00:13:12,370
and that's very important to write cleaner code.
252
00:13:12,370 --> 00:13:14,450
So when you name your variables
253
00:13:14,450 --> 00:13:16,510
it should be really easy to understand
254
00:13:16,510 --> 00:13:19,970
exactly what value the variable is holding
255
00:13:19,970 --> 00:13:23,200
just by reading the name of the variable.
256
00:13:23,200 --> 00:13:25,320
And that's kind of what we did up here
257
00:13:25,320 --> 00:13:27,700
by calling this one first name.
258
00:13:27,700 --> 00:13:30,260
But let me show you another example.
259
00:13:30,260 --> 00:13:35,163
For example, let's say my first job,
260
00:13:37,500 --> 00:13:38,333
programmer
261
00:13:39,790 --> 00:13:43,093
and then my current job,
262
00:13:45,930 --> 00:13:47,090
teacher.
263
00:13:47,090 --> 00:13:50,983
So this is much, much better than writing this.
264
00:13:52,040 --> 00:13:54,940
So job one programmer
265
00:13:58,670 --> 00:14:00,793
and job two a teacher.
266
00:14:04,170 --> 00:14:05,950
So which set of variables
267
00:14:05,950 --> 00:14:08,890
do you think is more descriptive?
268
00:14:08,890 --> 00:14:11,880
Is it these ones or these ones?
269
00:14:11,880 --> 00:14:13,760
And it hope that you agree with me
270
00:14:13,760 --> 00:14:15,650
that it's much easier to understand
271
00:14:15,650 --> 00:14:19,220
what programmer and teacher are in this case here
272
00:14:19,220 --> 00:14:21,560
by simply looking at the variable name.
273
00:14:21,560 --> 00:14:24,210
So we know that my first job was a programmer
274
00:14:24,210 --> 00:14:26,650
and that my current job is teacher.
275
00:14:26,650 --> 00:14:29,360
While down here, well, we would simply know
276
00:14:29,360 --> 00:14:31,790
that these are two different jobs.
277
00:14:31,790 --> 00:14:33,970
We don't know anything about them.
278
00:14:33,970 --> 00:14:37,650
And so this approach up here is a lot better.
279
00:14:37,650 --> 00:14:38,780
So keep that in mind,
280
00:14:38,780 --> 00:14:41,580
whenever you write your own variable names
281
00:14:41,580 --> 00:14:43,380
and actually keep all of this in mind,
282
00:14:43,380 --> 00:14:44,610
that we just talked about,
283
00:14:44,610 --> 00:14:46,280
for naming your variables.
284
00:14:46,280 --> 00:14:47,160
Okay?
285
00:14:47,160 --> 00:14:51,730
So just to quickly recap what a variable actually is,
286
00:14:51,730 --> 00:14:56,730
it is basically a box into which we can store a value.
287
00:14:56,780 --> 00:14:58,720
So we give that box a name
288
00:14:58,720 --> 00:15:01,790
which in this case here is first name
289
00:15:01,790 --> 00:15:05,280
or in this case here, it's my first job, for example.
290
00:15:05,280 --> 00:15:07,990
And then into that box, with that label,
291
00:15:07,990 --> 00:15:09,720
we can store a value
292
00:15:09,720 --> 00:15:13,700
which in this case is this programmer string here.
293
00:15:13,700 --> 00:15:15,000
Then later into code,
294
00:15:15,000 --> 00:15:18,093
we can reference that variable over and over again,
295
00:15:20,600 --> 00:15:23,053
for example, like this,
296
00:15:24,240 --> 00:15:26,260
my first job.
297
00:15:26,260 --> 00:15:31,260
And if I save this, then of course here we see programmer.
298
00:15:31,530 --> 00:15:33,350
Once again you probably saw
299
00:15:33,350 --> 00:15:35,600
my code changing here automatically
300
00:15:35,600 --> 00:15:38,390
from the single quotes, two double quotes
301
00:15:38,390 --> 00:15:42,840
but that is just my automatic formatting doing its work.
302
00:15:42,840 --> 00:15:47,393
And now if we want it to change this here, let's say coder.
303
00:15:48,900 --> 00:15:51,840
Then it would change across the entire program.
304
00:15:51,840 --> 00:15:54,030
And now we get coder here.
305
00:15:54,030 --> 00:15:56,920
And that's what variables are all about.
306
00:15:56,920 --> 00:16:00,000
They're one of the most important things of programming.
307
00:16:00,000 --> 00:16:02,020
And so make sure to really understand them
308
00:16:02,020 --> 00:16:03,233
before you move on.
22417
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.