Understanding JavaScript Scope

What is Scope in JavaScript

Imagine Scope as a boundary within that things can be isolated. Like in your colony there are certain areas which has stuffs that are accessible to everyone in your colony. In contrast to that stuffs which are inside your room is not accessible to other apartment people. Scope defines the boundary.

In JavaScript there are broadly 4 types of scopes

1. Global scope
2. Local scope
3. Closure scope
4. Lexical scope

In ES6 only Lexical Scope is introduced all browsers do not support Lexical Scope feature. Therefore, we will talk related to lexical scope in our next article. :) stay tuned.

What is Global Scope

Global scope is available for everyone. The variables inside the global scope are accessible from everywhere.

https://gist.github.com/roopkt/5b84facf27db555d512c01a0c8f64564

In our above example x is declared and instantiated with 20 globally. That is why we can access this value from add function. window Object is a Global Object and it is within global scope.

When should I create Global Variable

Global Variables are useful to declare something which is very stable and never changes. For example: For your website if you have settings which are needed everywhere then you can create APP_SETTINGS as a global variable.

What is Local Scope

JavaScript has only one local scope which is within a function only. JavaScript function creates a scope called as Local Scope.

How to create local scope

When you write a function and declare some variables then Local Scope gets created and function variables are placed inside the local scope. Function arguments are also part of local scope.

https://gist.github.com/roopkt/a9d4ddc6e0838a148e62e119458c0947

In our above example variable a which a function argument belongs to local scope only. Since local scope is not accessible outside the function therefore, I can not access variable a from global scope. In add20 function local scope there are 2 variables one is a and the other variable is this which is a reference to the window Global Object. I will explain this keyword in my next article :)

When should I create Local Variable

When you want to isolate the variables within a defined set of boundaries and you do not want them to be accessible from outer world then you should consider creating local scope. In JavaScript whenever you write function local scope is created free for you.

Can I access local scope Globally

No, local scope is only accessible within the function.

What is Closure Scope

It is the local scope of a function which is accessible to its children functions. Any variable declared in a function or any arguments in a function is accessible to its children functions and this accessiblity comes from Closure Scope only. :)

https://gist.github.com/roopkt/299a0f5e76a03a4113ae4002545693d4

In my above eample function add has one local scope which has variable a inside the local scope. The child function of add function has one local scope which has variable b inside that additionally, it has access to Closure Scope also.

Closure Scope gets created within child function and it contains varibles from its parent function.

Scope Challenge

Well lots of theory ! Now its time for practical problem. I have given a challenge question to you. Please read this problem below and reply your answer and give reason why do you think your answer is correct.

https://gist.github.com/roopkt/69905659512ce17e40763aadf8f3e6b5

Above addButtons function is adding 10 buttons in the list-problem div . Question is what will be the alert message when I click on 9th Button ?

Video on Scope

I always prefer video to learn new stuff. I hope you will enjoy this video and learn JavaScript Scope better.

https://www.youtube.com/watch?v=Kv37h5aReq4&list=PLZed_adPqIJoGpa6R2QdJy9RnqmOIy1Qd&index=1