Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Understanding the Rules of Variable Scope in ES6

DZone's Guide to

Understanding the Rules of Variable Scope in ES6

First, the author will show how ad-hoc JavaScript variable declarations work, then we'll see the ES6 scope constructs.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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 might be confused about how the scope in JavaScript works. The JavaScript scope is a Pandora box. First, I will show how ad-hoc JavaScript variable declarations work, then we'll 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 the particular variable.

Advantage of Es6 Scope

ES6 adds more weapons in its 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 which 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 the error since hoisting will not work here.

console.log(x) 

// Throws declaration error
let x; 

:rule 1

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

Now let us see the second rule. If we declare one variable with let we cannot declare one more variable with the 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 2

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 3

The constkeyword 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 4

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; // Perfectly valid

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";

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
javascript ,es6 ,programming ,web developement ,js ,coding ,tech tips ,technolgy ,programmable web ,language constructs

Published at DZone with permission of Naren Arya. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}