#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

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 4 - https://github.com/ManiruzzamanAkash/ReactBasic2Pro/tree/Day4

Video Tutorial -