Var, Let & Const Difference in JavaScript

In JavaScript, variables can be declared using three different methods: var, let, and const. In the early days of JavaScript, there was only one way to declare variables and that was using the var keyword. However, there were some issues associated with variables declared using the var keyword so with the introduction of ES6, two new keywords: let and const are introduced.

Let's first understand the scopes and hoisting of variables:

Scope:

Scope of the variables means where the variables are available for use and if it is not in current scope, it will not be available for use.

Types of Scopes

• Global Scope: Variables declared globally(outside any function) have global scope.
• Function Scope: Variables declared inside the function have function scope, we can't access them outside the function
• Module Scope: Scope for code running in module mode.
• Block Scope: Variables declared with let and const belongs to block scope. Variables declared inside { } block can't be accessed from outside the block. Variables declared with var keyword have no block scope.

Hoisting:

Hoisting is JavaScript mechanism where variables and functions declarations are moved to top of their scope before code execution.Hoisting allows functions to be safely used in code before they are declared.

Let's see the in detail about these keywords and differences between them.

Var

Before ES6 was introduced, Var keyword was used to declare the variables.

Scopes of Var declarations:

Var declarations are globally scoped or function scoped. Scope is global when var is declared outside the function means it will be available to use in the whole window and function scoped when declared inside function.

var name = "Shubham";
function nameFunction(){
 var age =22;
}
//Here name variable is globally scoped while age variable is function scoped

var name = "Shubham";
function nameFunction(){
 var age =22;
}
console.log(age);
//ERROR : Uncaught ReferenceError: age is not defined
/*(as age is function scoped variable and is not available
for use outside function )*/

Var variables can be re-declared and updated.

var name = "Shubham";
var name = "JavaScript"; // we can re-declare var variables

var age = 22;
age = 21; //also we can update it.

Hoisting:

Var variables are hoisted at the top of their scope and initialized with value undefined.

console.log(name);
var name = "Shubham";

JavaScript interpret it as:-

var name;
console.log(name); // name is undefined
name = "Shubham";

Problem with var variable:

var greetings = "good morning";
var times = 3;
if(times>2){
 var greetings = "good evening";
}
console.log(greetings);  // good evening

Since, if condition returns true, greetings is redefined as "good evening". If done knowingly then there is no problem, but if we don't realize and re-declare the variable and variable is used in other part of code it will change the output and thus break the code. This is the major letdown with var keywords.

let

let was introduced in ES6 to declare the variables. It solves the problem with var keywords.

Scopes of let declarations:

let is block-scoped. A block is a chunk of code bounded by {}. So variable declared in a block with let is only available to use within that block.

let greet = "good morning";
let times = 3;
if(times>2){
 let greet = "good evening";
console.log(greet) // good evening
}
console.log(greet); //good morning

Both instances of variables declarations are treated as different variables as they both have different scope. Thus we don't have to bother if we have used a variable name before as variables exists within its scope and cannot be redeclared more than once in its scope.

let variables can be updated but not re-declared:

Variable declared with let can be updated within its scope but not re-declare. However if same variable is defined in diiferent scope, there will be no error(above example of scope)

let age = 21;
age = 22; // can be updated within its scope.

let day = "Monday";
let day = "Sunday";
//Uncaught SyntaxError: Identifier 'day' has already been declared
// can't be redeclared within it's scope

Hoisting:

let variable declarations are also hoisted to top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if we try to use let variable before declarations, we'll get Reference Error.

console.log(names);
let names = "Shubham";
// ReferenceError: names is not defined

const

const was also introduced in ES6 to declare the variables. Variables declared with const maintain constant values. Every const declaration must be initialized at the time of declaration.

Scopes of let declarations:

const is block-scoped. A block is a chunk of code bounded by {}. So variable declared in a block with const is only available to use within that block.

const age = 21;
if(true){
 const time = 12;
 console.log(time); // 12
}
console.log(time); // ReferenceError: time is not defined 
//accessed within the block they were declared.

Var variables can't be re-declared or updated.

const age = 21;
age = 31; // TypeError: Assignment to constant variable.

const age = 22;
const age = 32; // Identifier 'age' has already been declared

While we can't update the const object but can update the values in const objects:

const person = {
 name: "Shubham",
 age: 22
}
console.log(person)  // {name: 'Shubham', age: 22}

// We CAN'T do this
person = {
 cousre: "Java",
 duration: 3
} // TypeError: Assignment to constant variable.

// But we CAN do this
person.name = "Akash";
console.log(person) // {name: 'Akash', age: 22}

Hoisting:

Just like let, const declarations are hoisted to the top but not initialized.

console.log(names);
const names = "Shubham"; 
// ReferenceError: names is not defined

References:

• Mdn docs
• W3schools

Thanks for Reading. Any Suggestions and Feedbacks are highly welcomed. Connect with me on LinkedIn