Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,100 --> 00:00:04,890
So with the import and export keywords
2
00:00:04,890 --> 00:00:09,060
and the related concepts, we already explored a bunch
3
00:00:09,060 --> 00:00:12,570
of crucial JavaScript concepts and features
4
00:00:12,570 --> 00:00:15,270
which we'll use heavily throughout this course.
5
00:00:15,270 --> 00:00:17,070
But of course, for this refresher
6
00:00:17,070 --> 00:00:19,230
I now also want to take a step back
7
00:00:19,230 --> 00:00:23,370
and also explore some other foundational JavaScript features
8
00:00:23,370 --> 00:00:25,140
and concepts like working
9
00:00:25,140 --> 00:00:29,550
with variables, values, functions, objects, and much more.
10
00:00:29,550 --> 00:00:32,250
And it definitely makes sense to start
11
00:00:32,250 --> 00:00:36,210
with variables, values, and operators, for that.
12
00:00:36,210 --> 00:00:38,010
In this app js file, I'll comment
13
00:00:38,010 --> 00:00:40,243
out all this code we wrote before
14
00:00:40,243 --> 00:00:43,290
because we don't need it here, and instead
15
00:00:43,290 --> 00:00:47,280
I now do want to revisit some foundational concepts related
16
00:00:47,280 --> 00:00:50,730
to variables and values and operators.
17
00:00:50,730 --> 00:00:53,430
Because in the end, when you're building an app
18
00:00:53,430 --> 00:00:57,540
with JavaScript or with React, which uses JavaScript
19
00:00:57,540 --> 00:01:01,740
of course it's in the end all about data and therefore
20
00:01:01,740 --> 00:01:05,190
in the end values you are working with in your code.
21
00:01:05,190 --> 00:01:06,450
If you take a look
22
00:01:06,450 --> 00:01:10,980
at applications like Twitter or Google Maps, those apps
23
00:01:10,980 --> 00:01:14,310
like all apps of course in the end are about data.
24
00:01:14,310 --> 00:01:16,830
The tweets you write and read are data.
25
00:01:16,830 --> 00:01:18,720
Your location is data.
26
00:01:18,720 --> 00:01:21,510
The location you want to go to is data.
27
00:01:21,510 --> 00:01:25,140
All these things are data that must be handled
28
00:01:25,140 --> 00:01:28,200
in your code and in your Java script code.
29
00:01:28,200 --> 00:01:32,250
You can therefore handle a broad variety of values.
30
00:01:32,250 --> 00:01:36,270
Most importantly, strings, numbers, booleans.
31
00:01:36,270 --> 00:01:39,600
This the special null and undefined values
32
00:01:39,600 --> 00:01:43,080
which simply mean that a certain data container
33
00:01:43,080 --> 00:01:46,590
a certain variable, doesn't contain any values yet.
34
00:01:46,590 --> 00:01:49,920
And also the special object value to which I'll get back
35
00:01:49,920 --> 00:01:54,630
later, now, a value in JavaScript can be created
36
00:01:54,630 --> 00:01:56,640
in the place where you need it.
37
00:01:56,640 --> 00:01:59,310
For example, if I want to output hello world here
38
00:01:59,310 --> 00:02:01,290
I can simply create the string.
39
00:02:01,290 --> 00:02:06,290
Hello world with double or single quotes, doesn't matter
40
00:02:06,540 --> 00:02:08,789
but quotes are of course needed.
41
00:02:08,789 --> 00:02:12,450
And if I then save this and reload my app
42
00:02:12,450 --> 00:02:15,720
I would see hello world in the console.
43
00:02:15,720 --> 00:02:18,570
So I can create values when I need them.
44
00:02:18,570 --> 00:02:20,640
For example, here, when I need a value
45
00:02:20,640 --> 00:02:22,680
as an input for this console
46
00:02:22,680 --> 00:02:26,313
log command that's built into the browser in the end.
47
00:02:27,420 --> 00:02:30,330
But it's also quite common that values should be stored.
48
00:02:30,330 --> 00:02:33,063
And for that, you're using variables.
49
00:02:33,960 --> 00:02:38,160
Variables are simply data containers where you store a value
50
00:02:38,160 --> 00:02:41,700
in a variable which carries any name of your choice.
51
00:02:41,700 --> 00:02:44,670
So you assign a name to a variable
52
00:02:44,670 --> 00:02:48,120
and you can then use this variable name as an identifier
53
00:02:48,120 --> 00:02:51,480
in your code to refer to that value that's stored
54
00:02:51,480 --> 00:02:56,340
in this variable whenever you need to use that value.
55
00:02:56,340 --> 00:02:58,560
And you typically use variables
56
00:02:58,560 --> 00:03:02,040
because they allow you to reuse a value
57
00:03:02,040 --> 00:03:05,520
and because they can help with code readability
58
00:03:05,520 --> 00:03:09,420
because often it makes sense to not define the value
59
00:03:09,420 --> 00:03:12,480
in the place where it's needed, but maybe instead ahead
60
00:03:12,480 --> 00:03:16,050
of time so that your overall code stays a bit cleaner
61
00:03:16,050 --> 00:03:17,460
and more readable.
62
00:03:17,460 --> 00:03:20,490
Now, in JavaScript variables can be created
63
00:03:20,490 --> 00:03:22,620
with the let keyword here.
64
00:03:22,620 --> 00:03:25,530
I could create a variable named user message
65
00:03:25,530 --> 00:03:27,870
though the name is up to you
66
00:03:27,870 --> 00:03:30,753
it just should follow certain rules.
67
00:03:32,730 --> 00:03:35,610
For example, it should be written using this camel
68
00:03:35,610 --> 00:03:39,840
case notation where you start with a lowercase character.
69
00:03:39,840 --> 00:03:43,980
And if your variable name then consists of multiple words
70
00:03:43,980 --> 00:03:45,930
every word inside of the word
71
00:03:45,930 --> 00:03:49,450
like message here starts with a capital case character
72
00:03:50,400 --> 00:03:54,090
and it must not contain any dashes or white space.
73
00:03:54,090 --> 00:03:56,670
So this variable name would be invalid just
74
00:03:56,670 --> 00:04:00,270
as this name would be, underscores would be allowed
75
00:04:00,270 --> 00:04:02,520
but are not common in JavaScript.
76
00:04:02,520 --> 00:04:03,540
Instead, as mentioned
77
00:04:03,540 --> 00:04:05,613
the convention is to use this notation.
78
00:04:06,540 --> 00:04:09,870
Variable names also may contain numbers
79
00:04:09,870 --> 00:04:12,000
but not at the beginning.
80
00:04:12,000 --> 00:04:12,833
In addition
81
00:04:12,833 --> 00:04:15,240
they also may not contain any special characters
82
00:04:15,240 --> 00:04:18,240
like an exclamation mark or a question mark.
83
00:04:18,240 --> 00:04:22,140
The only exception is the dollar sign and the underscore
84
00:04:22,140 --> 00:04:23,440
which I already mentioned.
85
00:04:24,300 --> 00:04:26,790
But other than that, the name is up to you.
86
00:04:26,790 --> 00:04:29,370
And then I could store this hello world text
87
00:04:29,370 --> 00:04:31,290
in user message.
88
00:04:31,290 --> 00:04:34,230
If I then want to use this value, for example here
89
00:04:34,230 --> 00:04:37,080
for logging it to the console, I would simply use the name
90
00:04:37,080 --> 00:04:41,430
of the variable and thereby refer to this value.
91
00:04:41,430 --> 00:04:43,290
And that's how I use a variable.
92
00:04:43,290 --> 00:04:46,830
And if I now want to lock this multiple times, for example
93
00:04:46,830 --> 00:04:51,030
I gain this reusability advantage by using a variable
94
00:04:51,030 --> 00:04:55,380
because instead of having to copy and paste that value
95
00:04:55,380 --> 00:04:59,370
I just define it once and then use that variable as often
96
00:04:59,370 --> 00:05:03,900
as I want to use that value that has the advantage that
97
00:05:03,900 --> 00:05:07,380
if that value ever needs to change, I only need to change it
98
00:05:07,380 --> 00:05:09,990
in one place instead of multiple places.
99
00:05:09,990 --> 00:05:13,558
And all the places in my code where I use that variable
100
00:05:13,558 --> 00:05:18,360
will automatically use that changed value, with that.
101
00:05:18,360 --> 00:05:21,840
If I reload this, I of course see hello world being output
102
00:05:21,840 --> 00:05:24,003
in the console twice.
103
00:05:26,310 --> 00:05:28,623
So that's how we create variables.
104
00:05:29,760 --> 00:05:33,060
Now, related to variables, we also have constants
105
00:05:33,060 --> 00:05:35,553
which are created with the const keyword.
106
00:05:36,450 --> 00:05:41,450
If I save this and reload, I again see HelloWorld being
107
00:05:42,570 --> 00:05:45,150
output twice here.
108
00:05:45,150 --> 00:05:49,590
So constants work like variables, they are data containers.
109
00:05:49,590 --> 00:05:53,700
But the key differences that constants must not be
110
00:05:53,700 --> 00:05:58,700
reassigned, if I try to assign a new value,
111
00:05:58,770 --> 00:06:01,140
a new string, for example, like this
112
00:06:01,140 --> 00:06:02,520
I'm getting an error
113
00:06:02,520 --> 00:06:06,183
that it's read only because it's a constant.
114
00:06:07,590 --> 00:06:11,220
If I were using let here instead of const
115
00:06:11,220 --> 00:06:12,930
everything would work instead.
116
00:06:12,930 --> 00:06:15,813
Now I would again see my log here in the console.
117
00:06:16,920 --> 00:06:18,450
So that's the key difference
118
00:06:18,450 --> 00:06:22,890
with let, I can use this single equal sign operator to
119
00:06:22,890 --> 00:06:26,043
assign a new value, with const, I can't.
120
00:06:27,360 --> 00:06:30,060
Now, there are different philosophies out there.
121
00:06:30,060 --> 00:06:31,560
In the JavaScript world
122
00:06:31,560 --> 00:06:35,550
certain developers like to use const as often as possible
123
00:06:35,550 --> 00:06:38,010
and I am one of those developers.
124
00:06:38,010 --> 00:06:40,860
Other developers want to use let all the time
125
00:06:40,860 --> 00:06:42,900
because it has less characters
126
00:06:42,900 --> 00:06:45,693
and therefore requires less code to type.
127
00:06:46,770 --> 00:06:49,980
But I prefer to be clear about my intentions
128
00:06:49,980 --> 00:06:53,310
and if I have a value that never should be reassigned.
129
00:06:53,310 --> 00:06:56,190
I personally prefer to use const.
130
00:06:56,190 --> 00:06:57,690
You can use whatever you want
131
00:06:57,690 --> 00:06:59,763
but you should know about the difference.
10735
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.