Post
Ask Question

ES6 Concepts - Part One

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.
  1. function printUserName() {  
  2.     console.log("Below user is logged in:");  
  3.     console.log("-----------------------------------");  
  4.     console.log(userName);  
  5.     let userName = getUserName();  
  6. }  
  7.   
  8. function getUserName() {  
  9.     return "Honey";  
  10. }  
If var variables are accessed before initialization then output is undefined; however, in case of block scoped variables, compiler will throw ReferenceError.
  1. function printUserName() {  
  2.     console.log("Below user is logged in:");  
  3.     console.log("-----------------------------------");  
  4.     console.log(userName);  
  5.     console.log(currentUserName);  
  6.     let userName = getUserName(); //Uncaught ReferenceError: Cannot access 'userName' before initialization  
  7.     var currentUserName = getUserName(); //undefined  
  8. }  
  9.   
  10. function getUserName() {  
  11.     return "Honey";  
  12. }  
Note
 
This github example explains performance of let vs var.