My Javascript Journey
Advanced Javascript
#Scope
Part 14
Scope is an important concept in javascript.
It means variable access — what variables do I have access to when a piece of code is running?
The default in Javascript is the root scope which is the window object.
Now function aa is part of the window scope.
So when you are working in a browser, this is called the root scope — the parent scope.
Now if I do function bb:
If I run this function, what do you think will happen?
I will get an error because a only lives in function bb — the scope is inside of a function. The only way we can do console.log(a) is to add it within the function.
Now the interesting thing is that functions have access to any variable in the root scope. For example:
Function bb has access to b.
This is because window.bb exists and variable b live on the window object; so they both have the same parent.
Now what if I do this:
I Haven’t run the function thats why I have “can I access this?”; but now if I ran the function bb() — I get Hello.
This is because b is the same variable.
Now lets do something a little bit more complex.
We are declaring a variable fun equals 5; we have also created three functions and each of these functions create their own scope; they all console.log(fun). However, what fun means in each one of them is different based on their scope.
So the first one we will title it 1; the second one 2; the third 3; and the last one window.
When we run the function:
We have a window 5; The fun variable is 5 — none of the functions is run yet.
Now if I call funFunction, funnerFunction and funnestFunction to actually run the functions:
We have window 5 — variable 5;
and within the first function we have the variable fun = hellooo because we’ve created a new scope, and within this function now lives a 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 = Byee.
And then the third one we see that we have fun equals AHHHHHH.
But now if I do:
I get AHHHHHH because in the third function, we’ve modified fun to equal to AHHHHHH.
What’s important to note here is that in the first two functions I won’t be able to access the the fun variable in the root scope because I’ve essentially overwritten them within the funFunction and funnerFunction. In these two functions, fun equals something that is their own meaning. And no matter what, I won’t have access to the root scope. This is called a naming conflict. It is where we name things the same way, as something that lives in the parent scope — we will lose access to it.
So to finalise this point:
When somebody runs funnestFunction, Javascript reads console log(fun); then it checks to see whether it has seen fun before by looking at the child scope. But if the child scope has no value for fun, javascript then goes to the parent(outside of the function) — the roots scope to look for fun.
Then it finds the value of fun which is 5.
If however fun doesn’t exist in the parent scope, then we get an error. So the last check is always the root scope — the window object.
