ES6 Concepts - Part One

This article describes concepts introduced in ES6 viz Let, constant and what is a temporal dead zone.

Constants

 

Constants are block-scoped variables/arrays/objects which cannot be reassigned or redeclared in the same scope (Scope is defined by the nearest curly braces). Const declaration creates a read-only reference to a value but it is not immutable.

 

Syntax - const nameN = valueN;

 

Variable scope

 

Constant scope can be global/local depending on the block in which it is declared. However, you cannot access constant as window object property.

 

e.g.

constPI = 3.14;

console.log(window.PI) //output: undefined

 

Mistakes to be avoided,

 

No.	Mistakes to avoid	Code snippet with error	Correct code snippet	Error occurred
1.	Declaring const and not assigning value.	constPI; PI = 3.14;	constPI = 3.14;	Uncaught SyntaxError: Missing initializer in const declaration.
2.	Reassigning const	constPI = 3.14; PI = 3.14159;	constPI = 3.14;	Uncaught TypeError: Assignment to constant variable.
3.	Redeclaring const in same scope	constPI = 3.14159; console.log("Value of PI is: "+PI); constPI = 3.14;	{ constPI = 3.14159; console.log("Value of PI is: "+PI); } constPI = 3.14;	Uncaught SyntaxError: Identifier 'PI' has already been declared.
4.	Reusing constant name in same scope	constPI = 3.14159; console.log("Value of PI is: "+PI); varPI = 3.14;	{ constPI = 3.14159; console.log("Value of PI is: "+PI); } varPI = 3.14;	Uncaught SyntaxError: Identifier 'PI' has already been declared.
5.	Reusing var name in same scope	varPI = 3.14; constPI = 3.14159;	varPI = 3.14; { constPI = 3.14159; }	Uncaught SyntaxError: Identifier 'PI' has already been declared
6.	Reassigning object	constperson = { name:"Honey", weight:55 } person = { name:"Bunny", weight:60 }	constperson = { name:"Honey", weight:55 } person.name = "Bunny"; person.weight = 60; If you want to make object immutable then use Object.freeze( person)	Uncaught TypeError: Assignment to constant variable.
7.	Changing properties of immutable const object	constperson = { name:"Honey", weight:55 } Object.freeze(person) person.name = "Bunny"; person.weight = 60;	Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'

 

Cons

 

Slow performance if code executes in temporal dead zone (i.e. accessing block scoped variable before definition is evaluated. Block scoped variables are not hoisted therefore accessing it before definition evaluation results in ReferenceError.)

 

Let variables

 

Variables declared with let statement are block scoped and cannot be redeclared in same scope (Scope is defined by thenearest curly braces).

 

Syntax - let varN = valueN

 

Variable scope

 

let variable scope can be block/ statement/ expression on which it is used, depending on the block in which it is declared. However, it cannot be accessed as property of global object.

 

e.g.

letuserName = "Honey";

varloginName = "Bunny";

console.log(this.userName); // undefined

console.log(this.loginName); // "Bunny"

 

Mistakes to be avoided,

 

No.	Mistakes to avoid	Code snippet with error	Correct code snippet	Error occurred
1.	Redeclaring let variable in same scope	letuserName = "Honey"; letuserName = "Bunny";	letuserName = "Honey"; { letuserName = "Bunny"; }	Uncaught SyntaxError: Identifier 'userName' has already been declared.
2.	Redeclaring let variable in same scope	letuserName = "Honey"; console.log("Current user: "+userName); varuserName = "Bunny";	{ letuserName = "Honey"; console.log("Current user: "+userName); } varuserName = "Bunny";	Uncaught SyntaxError: Identifier 'userName' has already been declared.

 

Cons

 

Slow performance if code executes in temporal dead zone (i.e. accessing block scoped variable before definition is evaluated. Block scoped variables are not hoisted, therefore accessing it before definition evaluation results in ReferenceError.)

 

Temporal Dead Zone (TDZ)

 

Block scoped variables (const, let) are not hoisted (JavaScript moves definition at top of scope) as var variables.

 

Therefore, block scoped variables are not initialized until their definition is evaluated. Code zone from start of block till initialization processed, is called a temporal dead zone.

 

e.g.

function printUserName() {
    console.log("Below user is logged in:");
    console.log("-----------------------------------");
    console.log(userName);
    let userName = getUserName();
}

function getUserName() {
    return "Honey";
}

If var variables are accessed before initialization then output is undefined; however, in case of block scoped variables, compiler will throw ReferenceError.

function printUserName() {
    console.log("Below user is logged in:");
    console.log("-----------------------------------");
    console.log(userName);
    console.log(currentUserName);
    let userName = getUserName(); //Uncaught ReferenceError: Cannot access 'userName' before initialization
    var currentUserName = getUserName(); //undefined
}

function getUserName() {
    return "Honey";
}

Note

 

This github example explains performance of let vs var.