#4 - let vs const vs var - Clear the ES6 concepts and makes simpler path to learn React
Categories - React Js Tags - JavaScript   Maniruzzaman Akash   11 months ago   885   0

#4 - let vs const vs var - Clear the ES6 concepts and makes simpler path to learn React

ECMA Script 2015, Known as ES6

It First Arrived with Major JavaScript Changes in June 2015 with these - 

  • let
  • const
  • arrow function
  • JavaScript class
  • array find
  • Rest parameters 
  • And more…

 

var - Classic Old Way to Declare Variable from JavaScript Start

let & const - ECMA Script  2015 New Way to Declare Variable in JavaScript ES6.

 

Coding Example - 

var

var experienceLevel = 'beginner'; // String
var totalScore = 90; // Number

 

let

let experienceLevel = 'beginner'; // String
let totalScore = 90; // Number

 

const

Const authUserID = 439590 // Number & never needs to change 

 

Difference Between let vs var vs const

var let const
Function or Globally scoped Block { } scoped Block { } scoped
Re-Declarable Not Re-Declarable in that scope.Re-Declarable with new one Not Re-Declarable
 Use Before Declaration is ok but undefined  Use Before Declaration throws error  Use Before Declaration throws error
 Re Assignable  Re Assignable  Not Re-Assignable for Primitive Data Types. Re-assignable for object & Array
Suggestion – Don’t use in ES6 Use in ES6 only when needs to re-assign like for loop or something like that Always recommended at first to use this. If needs to re-assign, then use let

 

Example with var

function checkExperienceLevelAndScore(){
    console.log('Experience', experienceLevel); // Use Before declaration is also possible
    var experienceLevel = 'beginner';  var age = 25;
    if(age > 20){
         var totalScore = 100;
         var experienceLevel = 'Intermediate'; // Re-Declarable is possible and update the main experienceLevel variable
   }
   console.log('Experience', experienceLevel);
   console.log('Score', totalScore); // Access    from outside if block scope is possible
   for(var i = 0; i < totalScore; i++){
      console.log('no: ', i);
   }
    console.log('no out: ',  i); // Access    from outside for block scope is also possible, return 100
}

checkExperienceLevelAndScore();

 

Example with let

function checkExperienceLevelAndScore(){
    console.log('Experience', experienceLevel); // Use Before declaration will throws an error
    let experienceLevel = 'beginner';  
    let age = 25;
    
    if(age > 20){
         let totalScore = 100;
         let experienceLevel = 'Intermediate'; // Create new experienceLevel variable, in this if scope
   }
   console.log('Experience', experienceLevel); // Output -> beginner. Can not access inner experienceLevel data
   console.log('Score', totalScore); // Throws error
   for(let i = 0; i < 100; i++){
      console.log('no: ', i);
   }
    console.log('no out: ',  i); // Throws Error, Reference Error
}

checkExperienceLevelAndScore();

 

Example with const

function checkExperienceLevelAndScore(){
    const experienceLevel = 'beginner'; 
    const age = 25;
    
    if(age > 20){
         const totalScore = 100;
         experienceLevel = 'Intermediate'; // Throws Error, Can not rebind
   }
    const address ={
          streetAddress: 'Dhaka',
          postalCode: 1208
    }; 
     address.postalCode = 1209; // OK and update the postalCode to 1209

    console.log('address: ', address); // Return Updated object with postalCode 1209
}


checkExperienceLevelAndScore();

 

 WHY NOT TO USE var

  1. var can create code unmaintainable and un-stable. 
  2. undefined state is very common in it’s pattern without any warning
  3. var will not stop me to write wrong code.
  4. Can not make same variable in another pseudo block

 

So, Will WE use let OR const

  1. We’ll use const by default.
  2. If need redeclaration, then use let.
  3. Our pattern will be like we’ll use almost 99% case, we’ll use const. 
  4. If need to re-assign, then create new one, not replacing the old variable.

 

Performance let vs var

// WITH let
console.time("let-time")
for(let i = 0; i < 500000; i++){}
console.timeEnd("let-time"); // 2.27490234375 ms

// WITH var
console.time("var-time")
for(var i = 0; i < 500000; i++){}
console.timeEnd("var-time"); // 2.5810546875 ms

 

JavaScript Hoisting:

var

  1. Hoisted to the top
  2. Can Initialize at any time

let

  1. Hoisted to the top
  2. Can not initialize at any time.
  3. Block of Code knows the variable exist, But can not use before initialization.

const

Same concept as let

 

JavaScript Hoisting Example:

console.log(nameVar); // undefined and no warning
console.log(nameConst); // ReferenceError

console.log(getAgeHostedOntop()); // Is ok, 
function getAgeHostedOntop(){
   const age = 20;
   return age;
}

console.log(getAge()); // Will throw an error
const getAge = function(){
   const age = 20;
   return age;
}

var nameVar = "Akash";
const nameConst = "Akash";

 

 Project Source Code Day 4https://github.com/ManiruzzamanAkash/ReactBasic2Pro/tree/Day4

 

Video Tutorial -  

 

Previous
#3 Enable Additional Plugins for Better React Development - React Basic to Pro Series
Next
React Tutorials - Beginner to Pro - A Complete React Tutorial Series