And welcome back.
In this video we're going to talk about an important concept in javascript called 'scope'.
Now What is scope? scope means variable access, what variables do I have access to when a code is running?
So by default in Javascript you are in the 'root scope' which is the 'window' object.
Let me show you what I'm talking about.
If in my console I do something like 'function aa()'
'console.log("test")' and we close off that function.
Well now, the 'function aa' is part of the 'window scope'.
If I go 'window' here and open up 'window' you'll see
that the 'aa' function has been added to the 'window scope'.
So when you are working in a browser, this is called the 'root scope'.
So the parent scope.
Now what if I do something like this. If I go 'function bb'.
And within this function we'll do.
variable 'a' equals "hello"
Will this function, if I run this in the console,
If I now do 'console.log(a)' will that work.
No because 'a' only lives within 'function bb' the scope is inside of the function.
So the only way we can do 'console.log(a)' is within the function to add, oops!
Must try that again, within the function to add 'console.log(a)'.
So now if I run the function,
I have 'hello'.
Now the interesting thing is that functions have access to
any variable in the root scope.
So for example if I do 'variable(var) b equals can I access this?' Will 'function bb' has access to this?
Because as you know 'window.bb' exists and variable 'b' lives on the window object.
So they both have the same parent. Let me show you what I mean,
by copying this and putting it into the console
Now within 'function bb' if we do 'console.log(b)'
Well, we have access to this
OK what if I do something along the lines of variable(var) 'b' can I access this.
I do 'b' equals "hello", if I copy this.
And now I do
'console.log(b)' Well I have,
Can I access this because I haven't ran the function but if I run the function 'bb()'.
Now if I do.
'console.log(b)'
I get'Hello'.
Because 'b' is the same variable.
Ok let's do something a little bit more complex.
So knowing what we know, we know that this is the root scope in our case is the window.
Within here we can declare a variable.
'fun' we'll say equals five.
And we'll also declare
a function, we'll call it 'funFunction'.
And within this function as soon as we create these curly brackets'{}' we've created a child scoping here.
So within here I'll say variable(var) 'fun' equals 'hellooo' and will 'console.log(fun)' here
and we'll create another function except this one will call 'funnerfunction'.
And within this one will say 'Byee' and will console log that.
And then finally we will create a third function and we'll call this the 'funnestFunction'.
And within here we'll remove the variable and we'll say 'AHHHHHH'.
And at the bottom we'll also do 'console.log(fun)'.
All right.
So let's go over this.
We're declaring a variable
fun equals five.
We created three functions and each of these functions create their own scope
and each of these functions 'console.log(fun)'.
But what 'fun' means in each one of them is different based on their scope.
So the first one will title it '1' just so we know the second will say '2', 'third(3)' and then finally here
we can just say 'window'.
So let's run this function and see what happens.
See if you can guess,
what's about to happen here, OK.
So we have a window 5, which means this line over here.
The fun variable is '5'.
Nothing has been run.
We read through the script and we see that variable fun equals 5, and then we see these functions but
none of them are run.
And now if I do 'funFunction' to actually run these and we'll do 'funnerFunction'.
And finally the 'funnestFunction'. I copy and paste this and rerun this
we see we have window 5, line 24 that got run which is variable 5.
Now within the first function we have the variable fun equals to "hellooo" because well we've created
a new scope and within this function lives variable fun that has "hellooo".
So that gets overridden.
And then we have the second function that has "Byee" again same thing as above because we have a new scope
a new variable.
fun equals "Buyee".
And then the third one we see that we have fun equals "AHHHHHH".
And again that gets changed.
And that equals the fun.
Here's the fun part though.
If I now do 'console.log(fun)'
it's now equal to 'AHHHHHH' because in the third function we've modified
fun which is this variable to equals to "AHHHHHH".
One thing I want to show you is that in the first two functions I won't be able to access the 'fun' variable
in the root scope because I've essentially overwritten them within the 'funFunction' and 'funnerFunction'
'fun' equals something that is their own meaning.
So within this function fun equals "hellooo" within the funner function fun equals "Byee".
And no matter what, we won't have access to the root scope and this is called a naming conflict,
where we name things the same way, a something that lives let's say in the parent scope
and we will lose access to it.
So to finalize this point let's just delete this and go over what's happening here.
So let's delete this as well and we'll say just the 'console.log' here.
When somebody runs 'funnestFunction' we run this and Javascript breathes console log fun.
Ok fun, do we,
Do we know her? and we look at the scope here.
You look at this function.
Hey do you know what 'fun' is?
And the function says, Well sorry friend I don't really know 'fun' but ask my parent.
So now we go into outside of the function.
In this case the roots scope.
Now we say hey do you know 'fun'?
And they're like, Yah yah! we have a variable fun.
It equals five.
So now 'console.log' can log 5.
But if 'fun' doesn't exist, we asked the parents and the parent says, Sorry I have no idea what 'fun' is.
Then we get, well we get an error.
So the last check is always the root scope,
In our case the window object, if we can't find it.
We get this error in the console.
We always see.
Sorry! your friend variable doesn't exist.
I think you made her up and that's it for scope.
I have a fun exercise for you right after this video.
Give it a try and I'll see you in the next one.