Scope and Scope Chain in JavaScript

In Simple, we can assume Scope as the area, where our program can access our declared variables. Simple is that. There is no Rocket Science behind this to get confused.

But there are some types of Scope, and we need to understand the differences and how it works. Cause, In larger projects it will help us to avoid collisions.

So there are 3 types of Scope in JavaScript:

1. Global Scope

2. Function Scope

3. Block Scope.

Global Scope:

Global Scope is a global area of our JavaScript Codes. It is a default Scope. Any Variable or function that’s not inside any function or block, is inside the global scope by default. So everything we write in our code is into the Global Scope or Globally accessible.

Let’s See an Example:

So, in the example, we declared the name variable and the showName() function in the Global Scope. We can get the value of the name and invoke showName() function from anywhere. That’s we are able to access the name variable from inside the showName() function.

Functional Scope:

Functional scope is also known as Local Scope. In functional Scope, variables are declared into a function which means between the curly brackets. And most importantly those variables are only accessible into the function. We can access those variables outside of the function.

Let’s see an example:

So, We can see that we cannot access the variables which are declared in the functional scope outside of that function. And also we can see that functional scope creates its own environment and it doesn’t modify the global variables (name variable remains ‘Tamim’ )

Block Scope:

So, Block Scope is almost similar to Function Scope but just applicable for let and const. The area between if/else, loop or switch case is considered as block scope. The declared let/const variables can only be accessed into the scope. But It differs when it comes to the var. We can access the ‘var’ variables outside of the block scopes.

Let’s see an Example:

Scope Chaining:

Scope Chaining is another important concept in JavaScript. Actually, It’s the behavior of JavaScript, how the program will act, or which variable will javaScript pick at a certain point. As we know till now about the three scopes, When JavaScript runs, the browser scope tries to find a variable value in the current scope. If it could not find the value, It tries to go outside of the current scope to find out the value. And it will continue this process until it finds out the variable value or it reaches the Global Scope. In the end, if It fails to find out the value of the variable it will throw a ‘ReferenceError’ or print undefined. And try to relate it by yourself.

Let’s see an Example: