1
00:00:02,090 --> 00:00:04,560
Now that we explored try catch,

2
00:00:04,560 --> 00:00:07,250
I wanna dive into a totally different,

3
00:00:07,250 --> 00:00:10,300
yet slightly related concept.

4
00:00:10,300 --> 00:00:14,170
I wanna talk about scoping of variables,

5
00:00:14,170 --> 00:00:16,860
constants and functions.

6
00:00:16,860 --> 00:00:19,070
Now what's scoping?

7
00:00:19,070 --> 00:00:23,830
Scoping simply means that variables, constants and functions

8
00:00:23,830 --> 00:00:27,810
can only be used in certain places.

9
00:00:27,810 --> 00:00:31,580
Now for example, if I create a read file function

10
00:00:31,580 --> 00:00:35,500
in errors.js, I can only use it in that file,

11
00:00:35,500 --> 00:00:40,430
unless I export it with module exports.

12
00:00:40,430 --> 00:00:42,740
Then we can export an object

13
00:00:42,740 --> 00:00:47,320
and export our read file function like this if we want to.

14
00:00:47,320 --> 00:00:49,770
That's what you saw before in the course already.

15
00:00:50,610 --> 00:00:54,690
This is only the case in NodeJS, though.

16
00:00:54,690 --> 00:00:57,420
In browser side JavaScript,

17
00:00:57,420 --> 00:01:00,750
you can't use this module exports feature,

18
00:01:00,750 --> 00:01:02,870
but there you also don't need to,

19
00:01:02,870 --> 00:01:05,510
because in browser side JavaScript,

20
00:01:05,510 --> 00:01:10,510
if you simply have a couple of script tags in your HTML file

21
00:01:10,730 --> 00:01:13,940
that import different JavaScript files,

22
00:01:13,940 --> 00:01:18,190
the variables and functions defined in those files

23
00:01:18,190 --> 00:01:22,320
will be accessible in our files automatically.

24
00:01:22,320 --> 00:01:25,570
So that file-based scoping,

25
00:01:25,570 --> 00:01:30,387
locking in values into a file, is exclusive to NodeJS.

26
00:01:31,910 --> 00:01:34,630
But we also have different forms of scoping

27
00:01:34,630 --> 00:01:38,393
that apply to both the browser and NodeJS.

28
00:01:39,480 --> 00:01:42,210
And the most important aspect here

29
00:01:42,210 --> 00:01:46,370
or the most important thing to note about scoping here

30
00:01:46,370 --> 00:01:50,170
is that constants and functions and variables

31
00:01:50,170 --> 00:01:54,763
are only available in the block where you defined them.

32
00:01:55,800 --> 00:01:57,490
Now what's a block?

33
00:01:57,490 --> 00:02:01,070
A block in JavaScript is simply a section of code

34
00:02:01,070 --> 00:02:03,430
that's wrapped by curly braces,

35
00:02:03,430 --> 00:02:08,430
with the exception of the creation of an object.

36
00:02:08,470 --> 00:02:11,880
If you use curly braces on the right side of an equals sign

37
00:02:11,880 --> 00:02:13,300
to create an object,

38
00:02:13,300 --> 00:02:16,940
then in here, we don't have a block of code.

39
00:02:16,940 --> 00:02:20,823
Instead here, we're using curly braces to create an object.

40
00:02:21,850 --> 00:02:24,340
In all our places in the code,

41
00:02:24,340 --> 00:02:26,790
like here, when we define a function,

42
00:02:26,790 --> 00:02:31,250
or if we try and catch, or if we have a for loop,

43
00:02:31,250 --> 00:02:33,700
whenever we have curly braces here,

44
00:02:33,700 --> 00:02:37,390
these curly braces mark a block of code.

45
00:02:37,390 --> 00:02:39,970
A block of code that belongs to the loop,

46
00:02:39,970 --> 00:02:42,970
a block of code that belongs to this function,

47
00:02:42,970 --> 00:02:47,670
or a block of code that belongs to try, or catch.

48
00:02:47,670 --> 00:02:49,870
And if I define a constant here

49
00:02:49,870 --> 00:02:52,380
in this block here, for example,

50
00:02:52,380 --> 00:02:54,733
it's only available in this block.

51
00:02:55,730 --> 00:03:00,120
I can't console log file data here

52
00:03:00,120 --> 00:03:02,053
outside of the try block.

53
00:03:02,930 --> 00:03:05,360
If I try to do that,

54
00:03:05,360 --> 00:03:09,223
and I then execute this errors.json file,

55
00:03:10,440 --> 00:03:14,363
I get an error that file data is not defined.

56
00:03:15,800 --> 00:03:20,800
Because here in line 9, file data is totally unknown.

57
00:03:20,920 --> 00:03:22,440
The constant file data,

58
00:03:22,440 --> 00:03:24,450
which I create in the try block,

59
00:03:24,450 --> 00:03:27,583
is only available inside of that try block.

60
00:03:28,420 --> 00:03:31,230
So console logging it here would work

61
00:03:31,230 --> 00:03:34,180
if we wouldn't fail to read from the file system.

62
00:03:34,180 --> 00:03:36,543
Console logging it here fails.

63
00:03:37,760 --> 00:03:41,310
If we wanna access file data in both the try block

64
00:03:41,310 --> 00:03:42,750
and in this line,

65
00:03:42,750 --> 00:03:46,480
we instead have to create a variable file data

66
00:03:46,480 --> 00:03:48,550
in the function block,

67
00:03:48,550 --> 00:03:52,870
in which both the try block and line 10 are,

68
00:03:52,870 --> 00:03:54,990
and then instead of creating a new constant

69
00:03:54,990 --> 00:03:56,430
of that same name,

70
00:03:56,430 --> 00:04:00,193
we simply assign file data here in try.

71
00:04:01,070 --> 00:04:03,150
Because that's always important.

72
00:04:03,150 --> 00:04:06,440
When I say that variables, constants and functions

73
00:04:06,440 --> 00:04:10,010
are only available in the block in which they are defined,

74
00:04:10,010 --> 00:04:12,710
that also means that they are available

75
00:04:12,710 --> 00:04:14,733
in any nested blocks.

76
00:04:15,670 --> 00:04:17,870
So here, file data is defined

77
00:04:17,870 --> 00:04:20,920
in the read file function block.

78
00:04:20,920 --> 00:04:25,260
That also makes it available inside of the try block though,

79
00:04:25,260 --> 00:04:28,823
since the try block here is inside of that function block.

80
00:04:29,730 --> 00:04:32,900
So from outside to inside is supported,

81
00:04:32,900 --> 00:04:34,723
the other way around isn't.

82
00:04:35,880 --> 00:04:39,450
And this concept, which is called block scoping,

83
00:04:39,450 --> 00:04:41,740
is important to understand.

84
00:04:41,740 --> 00:04:43,400
It is important to understand

85
00:04:43,400 --> 00:04:47,210
that your constants and variables are only available

86
00:04:47,210 --> 00:04:49,900
inside of the block where you define them,

87
00:04:49,900 --> 00:04:52,820
not outside of that block.

88
00:04:52,820 --> 00:04:55,680
Now directly related to this idea

89
00:04:55,680 --> 00:04:59,030
of scoping variables and constants,

90
00:04:59,030 --> 00:05:00,750
we also have the concept

91
00:05:00,750 --> 00:05:04,290
of shadowing variables or constants.

92
00:05:04,290 --> 00:05:08,550
And you can see that here, if I actually re-add const

93
00:05:08,550 --> 00:05:11,800
in front of file data in line 6.

94
00:05:11,800 --> 00:05:16,800
Now file data already is a variable defined in line 4.

95
00:05:17,170 --> 00:05:20,730
And now instead of assigning to that existing variable,

96
00:05:20,730 --> 00:05:23,183
I am creating a brand-new constant.

97
00:05:24,130 --> 00:05:27,583
Now what will happen if we now try to execute this file?

98
00:05:28,810 --> 00:05:30,550
Let's give it a try.

99
00:05:30,550 --> 00:05:33,130
If I execute this, everything works,

100
00:05:33,130 --> 00:05:38,130
but please note that we get undefined here.

101
00:05:39,490 --> 00:05:42,773
And that's coming from line 10 actually.

102
00:05:44,220 --> 00:05:46,030
Now we're getting undefined here

103
00:05:46,030 --> 00:05:48,880
because file data in line 10

104
00:05:48,880 --> 00:05:52,730
is actually referring to this variable file data

105
00:05:52,730 --> 00:05:55,700
because they are in the same block of code.

106
00:05:55,700 --> 00:05:57,890
File data defined here,

107
00:05:57,890 --> 00:06:01,780
this constant file data which we are assigning in line 6,

108
00:06:01,780 --> 00:06:05,680
is not the file data we are referring to here,

109
00:06:05,680 --> 00:06:09,880
because file data here in line 6 is in a different block,

110
00:06:09,880 --> 00:06:11,313
in that try block.

111
00:06:12,300 --> 00:06:14,540
Now that's why we get undefined here

112
00:06:14,540 --> 00:06:16,470
when we try to refer to file data.

113
00:06:16,470 --> 00:06:18,950
It's simply referring to a different file data

114
00:06:18,950 --> 00:06:20,843
which hasn't received a value.

115
00:06:22,270 --> 00:06:24,950
But why aren't we getting an error

116
00:06:24,950 --> 00:06:28,950
if we try to redefine a variable or constant

117
00:06:28,950 --> 00:06:30,990
that already exists?

118
00:06:30,990 --> 00:06:33,200
Typically that's not possible.

119
00:06:33,200 --> 00:06:35,160
For example, I wouldn't be allowed

120
00:06:35,160 --> 00:06:39,272
to add a constant file data in the very next line

121
00:06:39,272 --> 00:06:42,513
after defining that variable with the same name.

122
00:06:43,610 --> 00:06:46,300
Well that's again related to scoping.

123
00:06:46,300 --> 00:06:50,260
If you do create variables or constants

124
00:06:50,260 --> 00:06:55,260
with clashing names in different scopes, that's allowed.

125
00:06:55,370 --> 00:06:58,760
Here in try, in a scope that's part of

126
00:06:58,760 --> 00:07:01,720
this overall read file function scope,

127
00:07:01,720 --> 00:07:03,580
I can create a new constant,

128
00:07:03,580 --> 00:07:06,830
and if that constant has the name of a variable

129
00:07:06,830 --> 00:07:10,650
or constant of the outer scope, that is allowed,

130
00:07:10,650 --> 00:07:15,650
and we simply shadow that outer variable or constant.

131
00:07:15,690 --> 00:07:19,560
That means we can use the outer variable or constant

132
00:07:19,560 --> 00:07:21,800
if you want to, like in this case,

133
00:07:21,800 --> 00:07:24,550
when I assign a value to it.

134
00:07:24,550 --> 00:07:27,340
But we can also create a different constant

135
00:07:27,340 --> 00:07:29,210
or variable of the same name,

136
00:07:29,210 --> 00:07:32,410
which will then have a higher priority

137
00:07:32,410 --> 00:07:34,853
inside of that inner block.

138
00:07:35,730 --> 00:07:37,720
So then we simply have a second constant,

139
00:07:37,720 --> 00:07:41,390
which is totally unrelated to this other variable

140
00:07:41,390 --> 00:07:43,950
or constant with the same name.

141
00:07:43,950 --> 00:07:46,480
This is something you can do.

142
00:07:46,480 --> 00:07:48,830
It's also not uncommon to do that,

143
00:07:48,830 --> 00:07:52,310
though if you find something like that to be confusing,

144
00:07:52,310 --> 00:07:54,950
you can of course always go for different names

145
00:07:54,950 --> 00:07:56,250
to make it clearer,

146
00:07:56,250 --> 00:07:59,683
which variable or constant belongs to which scope.

147
00:08:00,880 --> 00:08:03,070
Now here I will remove const again,

148
00:08:03,070 --> 00:08:06,020
but being aware of this shadowing concept,

149
00:08:06,020 --> 00:08:08,490
and that you can have clashing names

150
00:08:08,490 --> 00:08:11,560
is something that you should keep in mind.

151
00:08:11,560 --> 00:08:14,563
But that's already all you need to know about this feature.

