Hello JavaScript coders. Currently, JS world is running after the ES6 language standard. Many UI projects are translating their code to ES6 with the help of Babel JS and Type Script. Many beginners do confuse about how the scope in JavaScript works. The JavaScript scope is a Pandora box. Let us know first how ad-hoc JavaScript variable declarations works. Then will see the ES6 scope constructs.

Traditional Hoisting

The process of scoping of variables in JavaScript is called “hoisting”. In this process, the interpreter undergoes two phases.

Scan all defined variables (initialized or uninitialized)

Parse the code and execute line by line

This is quite different from other programming languages like C or Python. This is the main reason for hundreds of combinations of JavaScript interview questions. By understanding hoisting well, you can reduce bugs in your JS code.

if (false){

var x = 10;

}

console.log(x)

What does the last line prints?

That prints “undefined”. Due to the effect of hoisting the first pass recognises variable x even from the blocks and virtually pushes them on to the top.

var x;

if (false){

var x = 10;

}

console.log(x)

This is how the Hoisting works. Remember by default, JS interpreter assigns undefined to all scanned variables. When it come across assignment statements only then it changes the value of particular variable.

Advantage of ES6 Scope

ES6 adds more weapons in it’s arsenal when it comes to scope. It has a well defined scoping system which gives flexibility to the developer over hoisting. We will shortly see an example how that point is valid. ES6 introduces let keyword to declare the variables in a block scope. It also ensures variable is not valid if declaring order is upside down.

let x;

# Prints "undefined"

console.log(x)

But if we re-order the statements it will throw error since hoisting will not work here.

console.log(x) # Throws declaration error

let x;

:Rule

When you declare a variable with let it is available for that block scope. Order is needed

Now let us see the second rule. If we declare one variable with let we cannot declare one more variable with same name in the same block.

let x = 50;

console.log(x) let x; # Throws Already declared error

But if we change the scope then it is perfectly valid.

let x = 12;

console.log(x) if (true) {

let x = 50;

console.log(x);

}

:Rule

let keyword will not allow us to declare an already declared variable in the same scope.

In ES6 adds a new keyword called const. Using this we can declare the variables which won’t change throughout the program. If something tries to change a constant it throws an error.

const pi = 3.14; function area(radius){

return (pi * radius * radius)

} pi = 3.24 #throws error

:Rule

The const keyword in the ES6 is similar to the other languages. Once defined, we cannot change the value. It is similar to let except value cannot be modified. We cannot re-declare a declared constant.

When we are dealing with loops, we declare an iterating variable. What if we need a use and throw variable which should not be available after looping over something. ES6 let allows us to create such variables in loops.

for (var i = 0; i <= 5; i++){

console.log(i);

} console.log(i);

This code prints 0…5 and then last statement prints “undefined”. It means “i” is available to the outside scope. Now see ES6 version.

for (let i = 0; i <= 5; i++){

console.log(i);

} console.log(i); # It throws Not Defined Error

:Rule

For temporary use and throw cases, use let strictly instead of var in that particular scope.

We discussed that variables declared as const are unchangeable. It is partially true. Wondering!. See this case.

const person = {

name : "Naren"

}; person.age = 24;

You might predict it will throw an error. But it’s not. When we get the error is when we change the value assigned to the person in a single shot.

const person = {

name : “Naren”

}; person = {

name : “Saikiran”

}; # Throws error because of changing const

these are the lexical scoping abilities the ES6 brings to us. In Node JS programs to enforce a strict “let” usage, we should use this statement in the beginning of the program.

"use strict";

Hope you got an idea of the JavaScript Hoisting and ES6 lexical scoping. Tweet(https://twitter.com/Narenarya3) if you have any query.

Thanks :)