Hi, everyone, in this lesson, we are going to talk about variable scope, variable scope defines
the accessibility of a variable from different parts of the code.
In JavaScript, we have two main scopes, local and global.
So let's start with the local scope.
I'm just going to copy this function so we can use it as an example.
So going back to Visual Studio Code, let's create this function called create names, just a very simple
example.
So now inside this function, we are creating this variable.
Let's try a different name like person's name.
And now let's execute this function once.
So when we do this, let's save this and let's refresh the page, we can see that we are sending this
value to the council.
So following the logic, when we execute this function for the first time, we just created this variable.
So now we should be able to access this variable directly.
So now we can just try.
To use it outside of this function, if we do this, let's save this and refresh the page.
As you can see now, we have an error.
JavaScript is telling us that this variable called person's name is not defined.
This is because outside of functions is the global scope.
And we never created this variable in the global scope.
This is only accessible from inside this function.
So this also means that before we had this function, if we had a variable, so let's just create a
variable with the same name.
So if you have a big website with a lot of functions, sometimes you may repeat variable names or variables
like price, product, photo, product image or something like this.
Maybe these names they repeat on different parts of the code.
So when you work with the local scope, you won't have conflict between these variables.
So now I'm just going to create one here.
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?
So as you can see, there were no conflicts between these variables, even though they have the same
names.
One is a global variable that you can access from anywhere in the code and another one is just a local
variable that belongs to this function.
Now, let's try to change this example a little bit.
So I'm going to erase this function instead of using a function.
I'm just going to use an if statement.
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
this loop and now I'm going to do the same thing.
So I'm going to create this variable from inside here.
I'm going to send it to the council and then I'm going to send that original variable, so let's see
what happens in this case.
Refreshing the page.
So now we can see that we just replace the value of that variable.
So why did it happen?
Well, this is because only functions have local scope.
So this is not a function.
This is an if statement.
So any variable we create here is going to be part of the global scope.
So since we use the same name, it's just replacing the variable that already existed.
Well, this led to a lot of problems.
So I'm going to show you one problem that can happen when you have this kind of conflict.
So I'm going to start a loop.
Let's start a loop here.
And normally we use a as the name of the variable for loops.
So A equals zero.
A is less than three.
And a plus plus.
So now we go inside this loop and now I'm just going to do something here, console that long and I'm
going to.
Send parent Loopt.
And then I'm going to keep track of the value of a.
So if we do this, I don't know if I showed you this before this comma, so instead of concatenating
values, we can just use comma.
This only works for the console, that log.
So in this case, we are just going to send these two values to the console.
So let's try this and see what do we see there?
So now, as you can see, we have parent loop, then we have the value of a of zero one two and then
our loop ends.
But in the previous lessons, we learned that we can do nested loops.
So let's say inside here, we want to start another loop.
So we are going to start a loop.
And then we are just going to use the same variable name.
Because, well, after all, it might not affect this ferryboat over here, so let's see if this is
true.
So now let's just do the same thing, but let's change it to child loop just so we can make sure what
is going on inside our loop.
Let's save this.
Let's refresh the page.
And now, as you can see, something went wrong here because our parent loop just stopped running at
zero.
Let's go down here so we can see.
So we entered the parent loop, then a was zero, so we printed this.
Now, inside this loop, we have another loop.
So this is going to run multiple times and only when it ends, we're going to go back to the first one
to continue running.
But the thing is, we just used the same variable name.
So when we finished with this loop.
We had a equals three, this is why we jumped out of this loop and when we came back here, a was already
three, so we did not enter this loop again.
So we had a conflict between these two variables.
And this could be a problem.
I've seen times where this happened and then programmers were like, I trying to figure out what the
problem is, why we don't have the results.
We want only to find out that there was a conflict with variable names.
So this is why keeping the local scope is important.
But how can we do it with loops if we know that only functions?
They have a local scope.
Well, that was before E.S. six.
So we is one of the versions of JavaScript.
Akima is the organization that maintains JavaScript and is responsible for creating new versions.
So in this version S six, they introduced a new keyword called Let.
So when you are creating a variable instead of using VAR, if you use that it is going to be lacco inside
any block of code inside curly braces.
So this means loops and conditionals.
So let's try to change our code now instead of using the VA keyword.
Let's just use let here and let here.
And now what this is going to do is creating a local variable inside this block of code, so this variable
is not going to affect this one outside.
If we do this and I run the loop again, we can see that now it was much different.
So we have the first round of the parent loop.
We run it three times, then it just ran again.
Then we have the child loop running and then the third time, so one variable did not affect the other.
So this is cool.
But the problem is that the let key word or anything from the E6 version, it's not compatible with
some versions of Internet Explorer.
And I know this browser is horrible.
You should not use this.
But the truth is that many people around the world, they just use Internet Explorer.
It's not because they're stupid, but it's just because they don't know it's bad.
They just buy a computer that comes with windows and they just have Internet Explorer.
So now Microsoft has a new browser that's much better.
That is EDG.
But some people just have older computers with Internet Explorer and they are just used to click on
that icon and they just use it.
So if you want to have full compatibility with your website, you should not use the LAT keyword yet.
So in this case, well, the only thing you can do is just using a different variable name.
So you have to be a bit careful when using nested loops like this.
Just try to always pick different names and any time that it's possible, you should use functions,
so then you won't have these kinds of conflicts.
So now even using the VA keyword, but now we have.
Different variable names, so we won't have any conflict, so let's just save this and let's refresh
the page.
So now we can see we have the same result using the VA keyword.
Before we finish this lesson, let me just show you another key word that was introduced by ESX, which
is the constant keyword or const.
These are variables that you don't intend to change, so let's say I have a variable called pie, so
pie is a number that's always going to be the same.
We should never change it.
So if I create it as a constant.
So let's just use the const keyword.
Now, this is just a regular variable.
So this is the value of this constant.
Now we can just call it just like a variable like this.
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
an error because we cannot change the value of constants.
So this is going to make our code safer, because if someone tries to change this, it means that this
person is doing something that's not right.
So instead of just continuing and finding out the mistake later, which can be harder to spot by using
the constant, when you don't want a variable to be changed, then you are going to have this protection,
because when the person tries to do this, this is going to result in an error.
But again, the const keyword can also break in some versions of Internet Explorer.
So just be a bit careful with it.
Now, before we finish, there's just one last thing that I want to show you.
So let me just copy this example from the beginning of this video.
Let me just comment all this.
Now, I'm going to do the same thing, just creating a function to assign a name or to create a variable
called name.
Let's use a different name here.
Let's say my name.
Then let's do console log my name.
And now let's try to access the variable from out of here.
So now let's just run this function once just so we can create the variable.
And if we refresh the page, we know what's going to happen, so the first time we created a variable,
it was used inside a function.
But then this is not accessible from outside of this function because of the local scope.
However, if we create a variable without the VA keyword, so maybe throughout the course, I may have
forgotten to use the VA keyword.
So this is not an error.
We won't have an error.
Even if it's the first time we are calling this variable, but the thing is, when we create a variable
without the key word, no matter if we are inside a function, it is going to be created in the global
scope.
So now, without the key word, if we save this and refresh the page, we can see that now we were able
to access this variable outside this function.
So just be a bit careful and try not to forget the VA key word when you are creating variables.
Well, that was all that I wanted to say for the moment.
I know this was a lot of stuff, and you might be asking yourself, OK, so what do I do with all this?
Well, the purpose of this, Lasana, was just to show you what is a local and a global scope.
How does it work in JavaScript?
And when we get more advanced, we're going to have more opportunities of making use of this concept.
So that was all I'll see when the next video.