var vs let & const in Javascript.

The Key Difference

var is function scoped.
let and const is block scoped.

Let’s see what this means.

Function Scope

Function scope means if we declare a variable with the var keyword then the variable is accessible for the lifetime of the function inside the entire function in which it is declared.

Example:

function test() {
  console.log(jeep);
  var jeep  = '🚙'; 
  console.log('jeep'); // '🚙'
}

When executing the above function what happens is the compiler will convert the above code as,

function test() {
  var jeep;
  console.log(jeep);
  jeep  = '🚙'; 
  console.log('jeep'); // '🚙'
}

The compiler will simply remove all the declaration of the var and add new declaration of a variable on the first line of the function , so that the variable is available inside the entire function in which it is declared. It is called hoisting.

Let’s have an another example :

Example

function test() {
  console.log(jeep, i);
  var jeep  = '🚙'; 
  for(var i = 0; i < 3; i++) {
    console.log(jepp);
  }  
}

The above code will be transformed into

function test() {
  var jeep, i;
  console.log(jeep, i);
  jeep  = '🚙'; 
  for(i = 0; i < 3; i++) {
    console.log(jeep);
  }  
  console.log(i); //3
}

The var i declared in for loop is in function scope which can also be accessible outside the for loop, meaning inside the entire function test.

Let’s have an another example

function test() {
    var i =10;
    console.log( i);
    for(var i = 0; i < 3; i++) {
      console.log(i);
    }  
    console.log(i); //3
  }

The above code will be converted as

function test() {
    var i;
    i =10;
    console.log( i); // 10
    for(i = 0; i < 3; i++) {
      console.log(i); // 0,1,2
    }  
    console.log(i); //3
  }

There is no consideration by the compiler of how many time you declare a variable with same name using var keyword .It will replace all the declarations into single declaration on the first line of the function.

As said earlier var is function scope , so there may some scope confusion happen for programmers when we use var with same variable name especially during debugging, To overcome this let and const is introduce in ECMA 2015

---

Block Scope

let is block scope means the variable which are declared with let keyword are accessible only inside the block in which it is declared.

When we try to access a variable before it is declared using let , then it will throw error.

function test() {
  console.log(jeep);  // Error
  let jeep  = '🚙'; 
  console.log(jeep);
}

So we cannot access the variable before it is declared .

function test() {
  let i = 10;
  for(let i = 0; i < 100; i =  i + 10 ) {
    console.log(i); // 0, 10 , ... 90
  }
  console.log(i); // 10
}

In the above function there will be two scope, 1 → function scope and 2 →block scope . The i inside the for will we be stored and modified in block scope area , which doesn’t change the value of i at the function scope . So after the end of for loop the i inside the for loop will be erased , now the i at last line of the code points to the function scope .

---

const — Constant variable (block scope)

const is also similar to let , but the difference is we cannot change the value assigned to the const variable.

We cannot create a const variable without assignment

Example : const a; // this will throw error Missing initializer

We cannot change the value assigned to the const variable , if we try to do that then it will throw error.

const a = 10;
a =100; // Uncaught TypeError: Assignment to constant variable.

Do follow me Javascript Jeep🚙💨 .

Please make a donation here. 80% of your donation is donated to someone needs food 🥘. Thanks in advance.