Scopes in Javascript 2019

The article will help if you are learning javascript or get confused in output question or even find difficult to understanding other core concepts of javascript.

Note: We have a series of article on javascript concept that will make you a better javascript developer, check here - https://overflowjs.com/tags/javascript/posts

So lets get started 👇

What are scopes?

The scope is the accessibility of variables, functions, or objects in some particular part of your code during runtime.

They came in existence when the principle of least privilege was applied in programming language designs.

Why should we care to learn it?

They provide some level of security to your code, i.e are only used when they are really needed.

Scoping parts of your code help improve efficiency, track and reduce bugs.

It also solves the naming problem when you have variables with the same name but in different scopes, so reduce namespace collision.

What are the types of scope?

  1. Global and Local

  2. Lexical

  3. Block

  4. Public and Private

Let see each of them one by one with examples.

Global Scope and Local Scope

Any variable declared outside of a function belongs to the global scope and is therefore accessible and can be altered from anywhere in your code.

Variables defined inside a function are in the local scope. They have a different scope for every call of that function. This means that variables having the same name can be used in different functions. This is because those variables are bound to their respective functions, each having different scopes, and are not accessible in other functions.

New functions = new local scope — that’s the rule.

Lexical Scope

When a function within another function, the inner function has access to the scope in the outer function, this is called Lexical Scope — also referred to as Static Scope as it may only be called (referenced) from within the block of code in which it is defined.

JavaScript starts at the innermost scope and searches outwards until it finds the variable/object/function it was looking for.

The important thing to remember is that the Lexical scope does not work backward. i.e we cannot access comments variable in SocialMedia function and in the Platform function in above example.

Block Scope

Block statements like if and switch conditions or for and while loops and {} unlike functions, don't create a new scope. Variables defined inside of a block statement will remain in the scope they were already in.

Let see an interview question around it (mix of the execution context, closures, and scopes)

for (var i = 0; i < 3; i++) {
  setTimeout(function() { console.log(i); }, 1000 + i);
}

Above will output 3,3,3 as each time the same variable value is assigned.

In the first iteration, the console.log(i) will be added to stack, event loop detects it has delay, it sent to the event queue and this happens 2 more times and finally when event loop start picking them one by one to execute the final value of var i is 3 due to last i++ and since the scope of variable is same the value of each becomes 3 while its return.

However, ECMAScript 6 introduced the let and const keywords. These keywords can be used in place of the var keyword and the let and constkeywords support the declaration of local scope inside block statements.

if we change var i to let i, let see the difference now.

for (let i = 0; i < 3; i++) {
  setTimeout(function() { console.log(i); }, 1000 + i);
}

Above will output 0,1,2 as each time a new scope for a variable is created.

Public and Private scopes

Wrapping functions from the public (global) scope save them from vulnerable attacks. But in JavaScript, there is no such thing as public or private scope. However, we can emulate them though.

(function () {   
    var test = function () {
     // do some stuff here   
    }; 
})(); 
// The parenthesis at the end of the function tells the interpreter to execute it as soon as it reads it without invocation.
test(); // Uncaught ReferenceError

A design pattern called module pattern can be used to create such functionality also.


The return statement of the modulePattern contains our public functions. The private functions are just those that are not returned. Not returning functions makes them inaccessible outside of the modulePattern namespace. But our public functions can access our private functions which make them handy for helper functions.


Hope you like this article. Please share with other if you can, this motivate us to write more.

Checkout articles on Javascript, Angular, Node.js, Vue.js

For more articles stay tuned to overflowjs.com

Thanks!

Email

About Deepak Gupta

Deepak is profound programmer and financial educator in India. He has co-founded couple of startup from scratch and worked in more than 12 startup and big corporate with different roles.

Owing to his interest, he has been writing blogs regarding JavaScript and other framework to help people starting with it. Also, love to educate people about trading and cryptoworld in his free time.

Subscribe to our email list

More Tags Of Your Interest