Before the release of ES2015 (ES6), Javascript variables were only declared using var keyword. However, with the introduction of ES6, new ways to declare variables using let and const were introduced. This Blog will help you know the difference between var, let and const.

variable Declaration and Initialization

Declaration and initialization using two step approach. var

var num;
num = 8;
console.log(num);

var variables can be declared first and initialized later. Like in the above example variable num is declared in the first line and initialized in the second line. The same approach can be applied to let variables but let's see what happens when we apply this approach with const variables.

Example:

const num;
num = 8;
console.log(num);

Output

As you can see we get an error. So the const variables have to be declared and initialized in the same line.

const num = 8;
console.log(num);

Scope

Scope essentially means where the variables are available for use. In JavaScript, there are two kinds of scope - global scope, and function scope. If the variables are declared inside a function, then these variables are defined with function/local scope in that function.

A function serves as a closure in JavaScript, and thus creates a scope, so that (for example) a variable defined exclusively within the function cannot be accessed from outside the function or within other functions.

var glob = "Outside Function";
function myFunc() {
  var str = "Inside Function";
  console.log(str);
}

myFunc();
console.log(glob);
console.log(str); // ❌ ReferenceError

Output

In the above example , the variable named glob is globally scoped as it is defined outside the function so it can be accessed anywhere in the program whereas variable str is function scoped as it is defined inside the function and can only be accessed inside the function if we try to access str variable outside the function it gives ReferenceError.

let is Block Scoped A block is a chunk of code bounded by {}. A block lives in curly braces. Anything within curly braces is a block.

A variable declared with let keyword is block scoped which means that the variable can only be accessed inside that block in which it is declared; Example:

let age = 24;
if (age > 18) {
  let str = "inside block";
  console.log(str);
}
console.log(str); // ❌ ReferenceError

In the above example variable str is declared inside the if block so it is block scoped and when we try to access it outside the if block it gives a Reference Error.

Even const variables are block scoped just the difference is that they cannot be reassigned with a new value.

Hoisting

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

console.log(a);
var a = 8;

var variables are hoisted with the initial value as undefined and attached to the global object. And can be accessed before initializing.

let and const variables are also hoisted but in a different memory space rather than global. And cannot be accessed before declaration.
Example

console.log(a);
console.log(ab);
let a = 8;
const ab = 10;

Redeclaration

var variables can be redeclared.

var num = 8;
var num = 6;
console.log(num);

let and const variables cannot be redeclared.

let num = 8;
let num = 6;
const name = 'Mark';
const name = 'Bill';
console.log(name);
console.log(num);

Reassigning

var variables can be reassinged.

var num = 18;
num = 96;
console.log(num);

let variables can also be reassigned.

let name = "Bill";
name = "Mark";
console.log(name);

const variables cannot be reassigned. Doing so gives TypeError.

const num = 16;
num = 8;
console.log(num);

Thank You for Reading :)