In this video.
Let's talk about global scope in details with code.
So back to Visual Studio code.
As usual, I have a folder called Functions and inside I have two files called HTML and my JavaScript.
Inside the HTML I have connected by JavaScript.
So let me close it.
And now let's open the JavaScript file.
Let's start with.
Global.
Scope.
So what is global scope?
Well, in JavaScript, global scope refers to the root scope of the problem, and global scope is a
default scope for variables and functions defined outside of any other scope.
So let's have a look.
Let's declare a variable say user, which is an object with two properties.
Name.
Of men.
And age.
Of 20 years.
So this variable called user is in global scope because we can access these variables anywhere in our
code, whether in a function, or we can console.log it without any error.
And again, global scope is created when your JavaScript code is loaded into the browser.
So as soon as I said this now when JavaScript has loaded into the browser.
So let's see if indeed our file has been loaded.
So first, let's check inside our console and see if there is an error.
And lucky for us, there is no error, meaning our code is successfully loaded.
But how sure I read that it has been loaded.
Well, let me show you.
Click on network and then click on or after.
Click on that.
Let's refresh our page.
Now this something has been displayed here.
We have the files that has been loaded into our browser.
The first one is our HTML and the second one is our JavaScript file.
If I open my HTML, let's see what we have.
We see that this is our syntax that we have written, but it has been converted into this code.
And if you click on script and then click on response, you will see the code that we have written.
And if you check the status code headers, you see that for this one, we see that we have status code.
Okay, meaning there is nothing wrong with it.
Our code has been successfully loaded.
But if I try to make some changes to the way requiring the scripts here, let's say our change the name
this one to let's say app the g is of which it doesn't exist.
If I save this file and next you see that now I get some error.
If I check my console here we see that we have some error if I click on network and then all and then
refresh to see that I get some error rate cut here.
That is code 404.
Meaning it hasn't found meaning that our file hasn't yet been loaded.
And you can see that I guess that is code for four.
And I have this red indicator meaning our file hasn't yet loaded.
So let's do it nicely by bringing back.
By bringing back our JavaScript?
Well, I asked Noma.
Now everything works perfectly.
The proof is that I want to show you.
Indeed, our file has been loaded into the browser, so back to our console.
Now let me remove this one.
Now the first scenario, and again for this variable, we can access it in any way in our code.
Let's say that you also have a variable cost, let's say amount.
Cost amount of money is equal to 100.
Let's say that for these variables I can pass into any function and it work nice for me.
Well, this technique is okay, but sometimes it can lead to problems if variables or function, the
global scope are accidentally overwritten or modified.
So let's see how we can modify these variables that can cause problem.
Let's create a function to display or get user info.
So function gets user info as that and my carry basis.
So this function will take in the user object.
Let me say object of user.
Let's dump the user name and age into the console as that.
So I would take the object user and then third name and then the age.
Let's say your name is and then my dollar sign carry basis and then let's say the object user object
user dot age, let's say years.
Oh, great.
So let's call this function and see.
So down here, if I call get user info, then I'll pass in my user object above or the user for short.
Now let's see.
You see, I get Ben is 20 years old.
This is perfect.
But let's see how we can mutate this data after mutating it.
Let's see the name that we are going to get all the age that you are going to get.
Remember, objects are passed by reference so we can change the values of this particular object.
So let's see.
So let's add a function says change user info.
So here we go.
So change.
Let me say update user, update user.
Okay, good.
So now here we go.
The function the function goes like this.
Function going to be change?
User.
Info as that.
And this also takes in the user object.
Let me say object for short.
And now for this I'm going to change the user name objects dot name, which is equal to change this
one to John.
And next is the the object edge dot edge.
Let's also change this one to set 30.
Let me remove this one and bring my semicolon as that.
So let's call this function called change user info and let me pass in the same user object.
Great.
So when I save it, there is nothing new.
A still ban is 20 years old.
But look, if I call this function after I call the update.
Have a look.
Now, instead of ban, it will be John.
And instead of 20, I'm going to be 30.
So let's save it.
And indeed, you see that I have changed the variable.
That is my object.
That's why we say that variables declare in a global scope sometimes can cause problem.
If you are not careful and variable we declare in the global scope can be accessed in anywhere.
That's what I have proved to you.
So we need to avoid as much as possible declaring variables in a global scope unless it is needed.