1
00:00:10,100 --> 00:00:16,160
Hi, everyone, in this lesson, we are going to talk about variable scope, variable scope defines

2
00:00:16,160 --> 00:00:20,810
the accessibility of a variable from different parts of the code.

3
00:00:21,050 --> 00:00:26,210
In JavaScript, we have two main scopes, local and global.

4
00:00:26,450 --> 00:00:28,700
So let's start with the local scope.

5
00:00:28,880 --> 00:00:33,110
I'm just going to copy this function so we can use it as an example.

6
00:00:34,690 --> 00:00:43,330
So going back to Visual Studio Code, let's create this function called create names, just a very simple

7
00:00:43,330 --> 00:00:44,050
example.

8
00:00:44,260 --> 00:00:48,010
So now inside this function, we are creating this variable.

9
00:00:49,750 --> 00:00:53,610
Let's try a different name like person's name.

10
00:01:00,310 --> 00:01:03,880
And now let's execute this function once.

11
00:01:05,320 --> 00:01:12,580
So when we do this, let's save this and let's refresh the page, we can see that we are sending this

12
00:01:12,850 --> 00:01:14,170
value to the council.

13
00:01:14,410 --> 00:01:21,190
So following the logic, when we execute this function for the first time, we just created this variable.

14
00:01:21,340 --> 00:01:25,270
So now we should be able to access this variable directly.

15
00:01:27,080 --> 00:01:28,730
So now we can just try.

16
00:01:30,740 --> 00:01:36,950
To use it outside of this function, if we do this, let's save this and refresh the page.

17
00:01:37,160 --> 00:01:39,200
As you can see now, we have an error.

18
00:01:39,530 --> 00:01:45,380
JavaScript is telling us that this variable called person's name is not defined.

19
00:01:46,040 --> 00:01:50,750
This is because outside of functions is the global scope.

20
00:01:50,750 --> 00:01:54,390
And we never created this variable in the global scope.

21
00:01:54,410 --> 00:01:58,520
This is only accessible from inside this function.

22
00:02:00,090 --> 00:02:07,230
So this also means that before we had this function, if we had a variable, so let's just create a

23
00:02:07,230 --> 00:02:10,430
variable with the same name.

24
00:02:10,440 --> 00:02:19,700
So if you have a big website with a lot of functions, sometimes you may repeat variable names or variables

25
00:02:19,710 --> 00:02:25,560
like price, product, photo, product image or something like this.

26
00:02:25,560 --> 00:02:29,780
Maybe these names they repeat on different parts of the code.

27
00:02:30,330 --> 00:02:36,000
So when you work with the local scope, you won't have conflict between these variables.

28
00:02:36,210 --> 00:02:38,370
So now I'm just going to create one here.

29
00:02:42,350 --> 00:02:50,170
Let's assign John to it and now I'm just going to run this and let's see, what do we see in the console?

30
00:02:50,690 --> 00:02:56,600
So as you can see, there were no conflicts between these variables, even though they have the same

31
00:02:56,600 --> 00:02:57,250
names.

32
00:02:57,800 --> 00:03:06,050
One is a global variable that you can access from anywhere in the code and another one is just a local

33
00:03:06,050 --> 00:03:09,230
variable that belongs to this function.

34
00:03:09,830 --> 00:03:13,610
Now, let's try to change this example a little bit.

35
00:03:13,940 --> 00:03:19,430
So I'm going to erase this function instead of using a function.

36
00:03:19,430 --> 00:03:22,370
I'm just going to use an if statement.

37
00:03:22,550 --> 00:03:29,480
So I'm just going to create an if and here I'm going to use the value of true just so I can go inside

38
00:03:29,480 --> 00:03:32,810
this loop and now I'm going to do the same thing.

39
00:03:35,870 --> 00:03:39,830
So I'm going to create this variable from inside here.

40
00:03:42,040 --> 00:03:49,390
I'm going to send it to the council and then I'm going to send that original variable, so let's see

41
00:03:49,390 --> 00:03:51,160
what happens in this case.

42
00:03:53,130 --> 00:03:54,430
Refreshing the page.

43
00:03:54,780 --> 00:03:59,740
So now we can see that we just replace the value of that variable.

44
00:03:59,910 --> 00:04:01,560
So why did it happen?

45
00:04:01,770 --> 00:04:05,910
Well, this is because only functions have local scope.

46
00:04:06,570 --> 00:04:08,050
So this is not a function.

47
00:04:08,070 --> 00:04:09,990
This is an if statement.

48
00:04:10,230 --> 00:04:15,700
So any variable we create here is going to be part of the global scope.

49
00:04:15,720 --> 00:04:21,310
So since we use the same name, it's just replacing the variable that already existed.

50
00:04:21,810 --> 00:04:24,710
Well, this led to a lot of problems.

51
00:04:25,050 --> 00:04:31,910
So I'm going to show you one problem that can happen when you have this kind of conflict.

52
00:04:32,700 --> 00:04:34,430
So I'm going to start a loop.

53
00:04:35,310 --> 00:04:36,660
Let's start a loop here.

54
00:04:37,020 --> 00:04:41,840
And normally we use a as the name of the variable for loops.

55
00:04:41,850 --> 00:04:44,160
So A equals zero.

56
00:04:45,100 --> 00:04:48,280
A is less than three.

57
00:04:50,800 --> 00:04:52,810
And a plus plus.

58
00:04:54,010 --> 00:05:01,240
So now we go inside this loop and now I'm just going to do something here, console that long and I'm

59
00:05:01,240 --> 00:05:02,200
going to.

60
00:05:04,620 --> 00:05:06,750
Send parent Loopt.

61
00:05:07,960 --> 00:05:11,920
And then I'm going to keep track of the value of a.

62
00:05:12,950 --> 00:05:20,780
So if we do this, I don't know if I showed you this before this comma, so instead of concatenating

63
00:05:20,780 --> 00:05:22,890
values, we can just use comma.

64
00:05:22,910 --> 00:05:25,700
This only works for the console, that log.

65
00:05:26,600 --> 00:05:31,590
So in this case, we are just going to send these two values to the console.

66
00:05:31,880 --> 00:05:35,390
So let's try this and see what do we see there?

67
00:05:36,860 --> 00:05:42,560
So now, as you can see, we have parent loop, then we have the value of a of zero one two and then

68
00:05:42,560 --> 00:05:43,680
our loop ends.

69
00:05:43,970 --> 00:05:48,280
But in the previous lessons, we learned that we can do nested loops.

70
00:05:48,500 --> 00:05:53,060
So let's say inside here, we want to start another loop.

71
00:05:53,660 --> 00:05:56,150
So we are going to start a loop.

72
00:05:57,960 --> 00:06:01,440
And then we are just going to use the same variable name.

73
00:06:02,750 --> 00:06:09,140
Because, well, after all, it might not affect this ferryboat over here, so let's see if this is

74
00:06:09,140 --> 00:06:09,500
true.

75
00:06:10,640 --> 00:06:19,820
So now let's just do the same thing, but let's change it to child loop just so we can make sure what

76
00:06:19,820 --> 00:06:21,710
is going on inside our loop.

77
00:06:22,400 --> 00:06:23,510
Let's save this.

78
00:06:23,810 --> 00:06:25,460
Let's refresh the page.

79
00:06:26,030 --> 00:06:32,270
And now, as you can see, something went wrong here because our parent loop just stopped running at

80
00:06:32,270 --> 00:06:32,720
zero.

81
00:06:33,000 --> 00:06:34,820
Let's go down here so we can see.

82
00:06:35,120 --> 00:06:40,610
So we entered the parent loop, then a was zero, so we printed this.

83
00:06:41,000 --> 00:06:43,580
Now, inside this loop, we have another loop.

84
00:06:44,930 --> 00:06:52,490
So this is going to run multiple times and only when it ends, we're going to go back to the first one

85
00:06:52,490 --> 00:06:53,630
to continue running.

86
00:06:53,640 --> 00:06:56,840
But the thing is, we just used the same variable name.

87
00:06:57,620 --> 00:06:59,750
So when we finished with this loop.

88
00:07:00,860 --> 00:07:10,340
We had a equals three, this is why we jumped out of this loop and when we came back here, a was already

89
00:07:10,340 --> 00:07:13,430
three, so we did not enter this loop again.

90
00:07:13,430 --> 00:07:16,790
So we had a conflict between these two variables.

91
00:07:16,790 --> 00:07:18,580
And this could be a problem.

92
00:07:18,830 --> 00:07:25,280
I've seen times where this happened and then programmers were like, I trying to figure out what the

93
00:07:25,280 --> 00:07:28,190
problem is, why we don't have the results.

94
00:07:28,190 --> 00:07:33,560
We want only to find out that there was a conflict with variable names.

95
00:07:34,160 --> 00:07:38,960
So this is why keeping the local scope is important.

96
00:07:38,960 --> 00:07:43,280
But how can we do it with loops if we know that only functions?

97
00:07:43,730 --> 00:07:45,210
They have a local scope.

98
00:07:45,470 --> 00:07:48,500
Well, that was before E.S. six.

99
00:07:48,740 --> 00:07:51,950
So we is one of the versions of JavaScript.

100
00:07:52,310 --> 00:08:00,290
Akima is the organization that maintains JavaScript and is responsible for creating new versions.

101
00:08:00,560 --> 00:08:06,130
So in this version S six, they introduced a new keyword called Let.

102
00:08:06,410 --> 00:08:14,600
So when you are creating a variable instead of using VAR, if you use that it is going to be lacco inside

103
00:08:14,600 --> 00:08:18,190
any block of code inside curly braces.

104
00:08:18,500 --> 00:08:21,040
So this means loops and conditionals.

105
00:08:21,320 --> 00:08:26,750
So let's try to change our code now instead of using the VA keyword.

106
00:08:27,600 --> 00:08:31,260
Let's just use let here and let here.

107
00:08:32,440 --> 00:08:39,850
And now what this is going to do is creating a local variable inside this block of code, so this variable

108
00:08:39,850 --> 00:08:42,900
is not going to affect this one outside.

109
00:08:43,510 --> 00:08:49,210
If we do this and I run the loop again, we can see that now it was much different.

110
00:08:49,480 --> 00:08:52,360
So we have the first round of the parent loop.

111
00:08:52,960 --> 00:08:57,040
We run it three times, then it just ran again.

112
00:08:57,280 --> 00:09:03,540
Then we have the child loop running and then the third time, so one variable did not affect the other.

113
00:09:04,000 --> 00:09:05,200
So this is cool.

114
00:09:05,200 --> 00:09:14,350
But the problem is that the let key word or anything from the E6 version, it's not compatible with

115
00:09:14,350 --> 00:09:16,740
some versions of Internet Explorer.

116
00:09:17,050 --> 00:09:19,590
And I know this browser is horrible.

117
00:09:19,600 --> 00:09:20,950
You should not use this.

118
00:09:21,160 --> 00:09:26,320
But the truth is that many people around the world, they just use Internet Explorer.

119
00:09:26,500 --> 00:09:31,270
It's not because they're stupid, but it's just because they don't know it's bad.

120
00:09:31,540 --> 00:09:37,380
They just buy a computer that comes with windows and they just have Internet Explorer.

121
00:09:37,570 --> 00:09:42,130
So now Microsoft has a new browser that's much better.

122
00:09:42,130 --> 00:09:43,180
That is EDG.

123
00:09:43,360 --> 00:09:50,020
But some people just have older computers with Internet Explorer and they are just used to click on

124
00:09:50,020 --> 00:09:52,300
that icon and they just use it.

125
00:09:52,540 --> 00:10:00,820
So if you want to have full compatibility with your website, you should not use the LAT keyword yet.

126
00:10:01,030 --> 00:10:07,570
So in this case, well, the only thing you can do is just using a different variable name.

127
00:10:07,570 --> 00:10:11,860
So you have to be a bit careful when using nested loops like this.

128
00:10:12,520 --> 00:10:20,070
Just try to always pick different names and any time that it's possible, you should use functions,

129
00:10:20,380 --> 00:10:23,450
so then you won't have these kinds of conflicts.

130
00:10:23,710 --> 00:10:28,270
So now even using the VA keyword, but now we have.

131
00:10:29,120 --> 00:10:36,140
Different variable names, so we won't have any conflict, so let's just save this and let's refresh

132
00:10:36,140 --> 00:10:36,600
the page.

133
00:10:36,800 --> 00:10:40,940
So now we can see we have the same result using the VA keyword.

134
00:10:41,360 --> 00:10:48,860
Before we finish this lesson, let me just show you another key word that was introduced by ESX, which

135
00:10:48,860 --> 00:10:52,280
is the constant keyword or const.

136
00:10:53,500 --> 00:11:02,380
These are variables that you don't intend to change, so let's say I have a variable called pie, so

137
00:11:02,380 --> 00:11:05,550
pie is a number that's always going to be the same.

138
00:11:05,890 --> 00:11:07,270
We should never change it.

139
00:11:07,570 --> 00:11:09,940
So if I create it as a constant.

140
00:11:10,330 --> 00:11:13,040
So let's just use the const keyword.

141
00:11:13,780 --> 00:11:16,620
Now, this is just a regular variable.

142
00:11:17,200 --> 00:11:21,220
So this is the value of this constant.

143
00:11:22,060 --> 00:11:25,390
Now we can just call it just like a variable like this.

144
00:11:25,900 --> 00:11:33,400
And if we try to change its value, so let's try to assign a new value to it now we're going to have

145
00:11:33,400 --> 00:11:37,330
an error because we cannot change the value of constants.

146
00:11:37,330 --> 00:11:44,260
So this is going to make our code safer, because if someone tries to change this, it means that this

147
00:11:44,260 --> 00:11:46,650
person is doing something that's not right.

148
00:11:46,900 --> 00:11:53,740
So instead of just continuing and finding out the mistake later, which can be harder to spot by using

149
00:11:53,740 --> 00:11:59,620
the constant, when you don't want a variable to be changed, then you are going to have this protection,

150
00:11:59,620 --> 00:12:03,750
because when the person tries to do this, this is going to result in an error.

151
00:12:03,940 --> 00:12:09,990
But again, the const keyword can also break in some versions of Internet Explorer.

152
00:12:10,180 --> 00:12:12,480
So just be a bit careful with it.

153
00:12:12,970 --> 00:12:17,330
Now, before we finish, there's just one last thing that I want to show you.

154
00:12:17,350 --> 00:12:23,200
So let me just copy this example from the beginning of this video.

155
00:12:24,190 --> 00:12:26,320
Let me just comment all this.

156
00:12:31,340 --> 00:12:38,630
Now, I'm going to do the same thing, just creating a function to assign a name or to create a variable

157
00:12:38,630 --> 00:12:39,320
called name.

158
00:12:39,530 --> 00:12:41,280
Let's use a different name here.

159
00:12:41,330 --> 00:12:43,310
Let's say my name.

160
00:12:46,820 --> 00:12:49,640
Then let's do console log my name.

161
00:12:50,740 --> 00:12:54,760
And now let's try to access the variable from out of here.

162
00:12:59,520 --> 00:13:04,740
So now let's just run this function once just so we can create the variable.

163
00:13:05,860 --> 00:13:13,780
And if we refresh the page, we know what's going to happen, so the first time we created a variable,

164
00:13:14,110 --> 00:13:15,880
it was used inside a function.

165
00:13:15,880 --> 00:13:20,740
But then this is not accessible from outside of this function because of the local scope.

166
00:13:20,950 --> 00:13:27,970
However, if we create a variable without the VA keyword, so maybe throughout the course, I may have

167
00:13:27,970 --> 00:13:31,400
forgotten to use the VA keyword.

168
00:13:31,420 --> 00:13:33,090
So this is not an error.

169
00:13:33,100 --> 00:13:34,690
We won't have an error.

170
00:13:35,760 --> 00:13:41,820
Even if it's the first time we are calling this variable, but the thing is, when we create a variable

171
00:13:41,820 --> 00:13:48,960
without the key word, no matter if we are inside a function, it is going to be created in the global

172
00:13:49,200 --> 00:13:49,900
scope.

173
00:13:50,310 --> 00:13:58,530
So now, without the key word, if we save this and refresh the page, we can see that now we were able

174
00:13:58,530 --> 00:14:01,440
to access this variable outside this function.

175
00:14:02,520 --> 00:14:08,700
So just be a bit careful and try not to forget the VA key word when you are creating variables.

176
00:14:08,940 --> 00:14:11,550
Well, that was all that I wanted to say for the moment.

177
00:14:13,030 --> 00:14:18,580
I know this was a lot of stuff, and you might be asking yourself, OK, so what do I do with all this?

178
00:14:18,880 --> 00:14:25,200
Well, the purpose of this, Lasana, was just to show you what is a local and a global scope.

179
00:14:25,210 --> 00:14:27,100
How does it work in JavaScript?

180
00:14:27,310 --> 00:14:33,910
And when we get more advanced, we're going to have more opportunities of making use of this concept.

181
00:14:34,660 --> 00:14:37,210
So that was all I'll see when the next video.