What is scope?

Scope is an enclosure created by functions or curly brackets(block statements). It determines the accessibility or visibility of variables. The codes you write inside the scope have exclusive access to the variables inside and access to all the variables outside of the scope. But codes outside the scope can not access the variables inside the scope.

Kinds of Scope

There are three main scopes in JavaScript. These are:-

1. Global Scope
   • This is default enclosure and one that contains all the code including the local scope created by functions and block scope.
2. Function or local scope
   • This is the scope or enclosure created inside the functions
3. Block scope
   • This is the scope or enclosure created inside curly brackets

Let’s see how this looks like in examples.


1. Everything outside of the localScope is in the global scope. It is the default scope that is the parent of all local scope.
2. We also have a local scope created or enclosed by functions.

As we can see above all the global variables can be accessed from inside the local scope as well as from the global scope. However the variables that are only found inside the local scope which are variables y and x can only be accessed from inside the local scope only. When we tried to access it from the global scope we get uncaught Reference error.

So in short we can access variables from inside the scope they are written in but not from the outside of the scope. What if the scope is nested inside another scope? Well, the same principle applies. The variables inside the nested scope will only be accessed by codes inside that scope. In other words it has access to the variables inside the scope it is in as well as all the variables outside in the subsequent chain of scope.


What is lexical scope?

This is JavaScripts mechanism to access variables in the outer scope or the scope of the parent scope in a nested function when it cannot find a variable in the local scope. In other words it’s being able to search the value of a variable & access it in the parent scope &/or subsequent scope chain in nested functions. This is particularly important when it comes to a unique feature of functions called closure. But that’s a topic for another day. But here is an example of lexical scope.


As you can see above, function coreScope was able to execute arithmetic operation even though one of the operands(variable y) was not inside its scope. How was it able to execute the operation? Well, javaScript engine first looks for variable y inside the scope and moves up the scope chain until it finds it. If it doesn't find it, it will give you error. The same can be said about the arithmetic operation inside function innerScope. It was able to fetch variable y after first looking inside its own scope and moving up to the outer scope which is the scope of its parent function. This was possible due to lexical scope.

What is block scope?

This is the scope created when we use curly brackets most commonly in if/else statements, switch statements, for-loops and while loops. Let's look at the following example:-


As you can see above block statements also create their own scope that can only be accessed by variables inside. But this applies only to variables declared using let & const but not var. The variables declared with var inside a block scope can be accessed by functions or variables outside the scope. That's one of the main differences between using var on one side and let & const on the other side which I have written about. You can read about it here.

In conclusion the scope determines what variables are accessible in javaScript. Thank you reading this far and if you like my writing please follow my blog or on twitter @wolde_ai. Check out my portfolio website here