Difference Between Var, Let and Const In Javascript

Introduction

We have var, let and const to declare variables in javascript. We will see the difference between the three in this section. 

Scope of var, let and const

Scope means the part of our code or logic where variables are available for use. 
  • var is having the global or function scope depending on its declaration. If it is declared outside the function it is the global scope. If inside, then function scope. Global scope means we can use it anywhere in our code. If function scope, then we can use it inside the function.
  • let is having block scope. A block is a scope defined within {}. So variable declared using let will be available only in the defined block.
  • const is also having the block scope.
var - Global and Functional Scope

var a = "Hello JS"; // Assign Global Scope
function sayHi(){
console.log(a);
}

sayHi(); .. Prints Hello JS

Now we will see function scope with var. We will get an error for b as var b is function scoped in the following example:

var a = 4;

function sayHi(){
console.log(a); // Prints 4
}

function add(){
  console.log(a); // Prints 4
  var b = 5; // Function scoped here
  var x = a + b;
  console.log(x); // Prints 9
}
sayHi();
add();
console.log(a); Prints 4
console.log(b); // Prints error: Uncaught ReferenceError: b is not defined

let and const - Block Scope

function add(){
  let b = 5;
  const c = 6;
  console.log(b); // Prints 5
  console.log(c); // Prints 6
}
add();
console.log(b); // Prints error: Uncaught ReferenceError: b is not defined
console.log(c); // Prints error: Uncaught ReferenceError: c is not defined

Updation and Redeclaration

We will see how to update and redeclared work with three:
  • var can be reassigned with the new value in the same scope. We can even redeclare the same variable previously declared with the var keyword. We will not get any errors.
  • let can be updated with the new value but redeclaration is not allowed with the let keyword. Updation is allowed in the same block scope. If we are using the same variable declared with let in two block scopes, they are considered totally different.
  • const cannot be reassigned or redeclared at all.
var - Redeclared and Updated

var a = "Hello";
var a = "Bye";
console.log(a); // Prints Bye
var b = 5;
b = 6;
console.log(b); // Prints 6

let - Only Updated not redeclared

let a = "Hello";
let a = "Bye";
console.log(a); // error: unknown: Identifier 'a' has already been declared

But the below code works fine as we will only update the value instead of redeclaring it.

let a = "Hello";
a = "Bye";
console.log(a); // Prints Bye

const - Neither update not redeclare

const a = "Hello";
const a = "Bye";
console.log(a); // error: unknown: Identifier 'a' has already been declared

Throws TypeError when we try to update variable declared using const.

const a = "Hello";
 a = "Bye";
console.log(a); // error: Uncaught TypeError: Assignment to constant variable.

Hoisting 

Hoisting is a concept in javascript in which all the variables or functions declarations moved on the top of their respective scope. Both the variables and functions declarations moved on the top of their global or local scope.
  • var variables will be moved on the top of their respective scope and are hoisted and they are initialized with undefined.
  • let variables are also hoisted at the top but they are not initialized with any value. So we will get ReferenceError.
  • const variables are also hoisted at the top but they are not initialized with any value. So we will get ReferenceError.

console.log (a);
var a = "Hello"

The above code will be interpreted as:

var a;
console.log (a);
a = "Hello"

Note: const must be declared and initialized at the same time.

const a;
a = 5; // Print Uncaught SyntaxError: Missing initializer in const declaration

The valid syntax is:

const a = 5; // This is valid

Comments