Difference between let, const and var in easiest way with Guarantee…

In June 2015, the 6th version of ECMAScript launched and it was the biggest transition of javascript we call is ES2015 or ES6.There are a bunch of tutorial on ES6 but this is going to be the easiest tutorial if you want your transition from ES5 to ES6.We will practice each concept first in ES5 and then will change it to ES6.

This is 1st part of my series of learning ES6 in the easiest way.

Guarantee

1: Just practice each example in a code editor and at the end if you did not understand any concept, I will offer free private video call session.

Table of Contents

1: Variable Declaration with let and const

2: Blocks

3: Arrow Functions

4: Strings

5: Destructuring

6: Arrays

7: Maps

8: Rest and Default Operators

9: Classes and Subclasses

Variable Declaration with let and const

In ES6 finally we can declare variables with let and constants with constkeywords. From name variables should be able to change the values and constants should not allow to change the values.

//ES5
var x = 14;
x = 12;
console.log(x);//12
12;

from the above code we successfully changed the value of variable from 14 to 12

//ES6
let x = 14;
x = 12;
console.log(x); //12

from the code above we successfully changed the value of variable from 14 to 12

//ES6
const y = 14;
y = 12; //TypeError: Assignment to constant variable.
console.log(y);

From the code above with const when we run the program got the type error that value of const cannot be changed.

At the point, you are thinking that let and var are equal but they are not equal and in next step, we will find out why they are not equal

Scope of let, const and var

To move forward we need to understand what is declaration and initialization

var a   //declaration
a = 5   // initialization
let b //declaration 
b = 10  //initialization
var c = 5  //declaration plus initialization in one step
let d = 5  //declaration plus initialization in one step
const a ; // SyntaxError: Missing initializer in const declaration
a = 5;
console.log(a);
const a = 5
console.log(a) //5

1: when we start our variable with var, let is called declaration. e.g: var a; or let a;
2: when we start our variable and assigning value it is declaration and initialization with value
3: const cannot be declared only, you need to initialize it with declaration

In the scope section, we will differentiate between var and let

Let and const have a block scope but var has function scope.

If you did not understand the above line it is completely ok we are going to understand this below.

//ES5
function adult5(age) {
  if (age > 18) {
    var status = 'adult';
  }
  console.log(status); //adult
}
adult5(20);

The above example gives output ‘adult’, the var status can be accessed anywhere in the function.

Before moving forward the block in javascript is anything between parenthesis like {…}.So one set of parenthesis makes one block. example of a block is below.

{
........
.......
.......
......
}

lets move forward to the important point.

// ES6
function adult6(age) {
  if (age > 18) {
    let status = 'adult';
  }
  console.log(status); //ReferenceError: status is not defined
}
adult6(20);

please run the above example on your console. it is learning by doing. The above example gives us an error that status is not defined. we declared the status inside if block and want to access outside the if block so status with let is not accessible outside the block

Till now we have learned

1: var and let can change their value and const cannot change its value
2: var can be accessible anywhere in function but let and const can only be   accessible inside the block where they are declared.

Now you can understand that

let and const have a block scope but var has function scope.

let take another example to understand block scope and function scope in more depth.

Now get set ready for interview questions

//ES5
var num = 10;
for (var num = 0; num < 3; num++) {
  console.log(num); //0 1 2
}
console.log(num); //3

in the above example outside for loop value of num is 3 so num have the global scope. if var is defined outside the function it has global scope so it can be accessed at anywhere so inside the for loop var num is accessible so value of num is changed and when we console.log(num) outside the for loop it is value is changed.

//ES6
let num = 10;
for (let num = 0; num < 3; num++) {
  console.log(num); //0 1 2
}
console.log(num); //10

In the above example when we declared num inside the for loop with let then num inside the for loop has a completely different scope and num outside the for loop has different scope. So this is a very important question for interviews.

Hoisting with let, const and var

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution

If you did not understand the above example it is completely ok.

You have a clear understanding of variable declaration and initialization as we discussed above.

//ES5
console.log(a); // undefined
var a = 5;

if you run the above code it will output undefined it means it has been declared but not initialized

//ES6
console.log(a);  //ReferenceError: a is not defined
let a = 5;
and
console.log(a);  //ReferenceError: a is not defined
const a = 5;

let and const hoist but you cannot access them before the actual declaration is evaluated at runtime. So in case of let and const, you cannot access them before the declaration.

More Advanced with let and var

//ES5
for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', (function() {
     { console.log(i); };
  }));
  document.body.appendChild(btn);
}

Question: what will be the output you click on button 4?

Answer: The answer is 5, you click any button the answer is 5 because var has function scope or global score so var i is sharing one value in each block of for loop.

for (let i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function(){ console.log(i); });
  document.body.appendChild(btn);
}

Question: what will be the output you click on button 4?

Answer: The answer is 4, and you click button 0 answer is 0 and respectively. let has block scope so in each run of for loop block changes so each block has it own value of i.

Outcome is below

1: var and let can change their value and const cannot change its value
2: var can be accessible anywhere in function but let and const can only be accessible inside the block where they are declared.
3: const cannot be declared only, you need to initialize it with declaration
4: let and const hoist but you cannot access them before the actual declaration is evaluated at runtime. So in case of let and const you cannot access them before declaration.

I am looking forward for your feedbacks. If you like it please share it.