Difference between let, var and const in JavaScript with Hoisting

To understand the difference between let, var and const in JavaScript with hoisting, we need to understand first what is hoisting?

Hoisting

Hoisting as per mdn, it suggests that variable and function declarations should physically be moved to the top of your code. But this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase and they stay exactly where you typed them in your code.

Lets take up an example:

dogName("Bruno");
function dogName(name) {
  console.log("My dogs's name is " + name);
}
/*
The result of the code above is: "My dog's name is Bruno"
*/

My code above will be rewritten like below, thus avoiding the reference error exception.

var dogName = undefined;
dogName = function(name) {  
  console.log("My dogs's name is " + name);
}
dogName("Bruno");

/*
The result of the code above is: "My dog's name is Bruno"
*/

Also JavaScript only hoists declarations, not initializations. So if you declare a variable and initialized after using it, the value will be undefined. Below mentioned examples will throw exceptions.

console.log(num); 
// Returns undefined, as only declaration was hoisted, no initialization has happened at this stage
var num; // Declaration
num = 6; // Initialization

console.log(num); // Throws ReferenceError exception
num = 6; // Initialization

// Example with let:
a = 2; // initialization.
let a; // Throws ReferenceError: Cannot access 'a' before initialization


// Example with const:
a = 2; // initialization.
const a; // Throws SyntaxError: Missing initializer in const declaration

I hope the concept of hoisting is quite clear to everyone.

Difference between let, var and const in JavaScript

After ES6, we have been introduced to new scope call Block Scope. Before that, JavaScript used to have two types of scope: Global Scope and Function Scope.

Variable declared outside the function is global scope. Variable declared inside a function is function scope. After the introduction of let and const, if you declare anything as let inside a block { } it is block scoped.

Example:
{
let a =1 ;
const b = 2;
// both are block scoped and cannot be accessed outside of { }
}

Good practice: Declare all your global variables as var on top of the file or you can say at the beginning of the script.

Var	let	const
usually Global Scoped	usually Block/Function scoped.	usually Block/Function scoped
Can be assigned after declaring	Can be assigned after declaring	Must be assigned a value when they are declared
Can reassign an object or array.	Can reassign an object or array.	Cannot reassign an object or array, but the value of object can be changed.
Loop Scope: will change the final value.	Loop Scope: will not change the final value.	Loop Scope: will not change the final value.
var is not used much in new coding practices.	let is the new var	used with Object.freeze();

Difference between let, var and const in JavaScript

The let and var keywords are interchangeable and can be quite confusing sometime.

While coding make below points as your thumb rule.

var should be globally scoped.
let should be a function or block scoped.
const should be used with read-only values or computed values, generally inside a component.

Happy coding.

References: