Var vs. Let vs. Const: What's the difference?

Javascript is a prevalent language. One of the primary reasons for its popularity is its feature of dynamic types.

Unlike languages such as Java or C++, we need not specify the data type we want to use for a variable, instead, Javascript is capable enough to allocate the data type for the variable depending upon the data we provide to our variable.😲

Declaration of variables

To declare a variable in Javascript, we are provided with special keywords.

1. var

2. let

3. const

Let's discuss the differences each keyword has and what are the use cases for these keywords.🐱‍

var

Before the advent of ES6 syntax, var was used to declare any variable.

var name = "Mohit";
console.log(name); //Mohit

Here, we declared a variable name which contains a string as its value. Notice how we need not specify whether we are storing a string or a number in our variable. That's Javascript for us!!🙌

Scope

Scope primarily means where we can access the variables.

var declarations are globally scoped or function scoped. This means that var variables can be accessed throughout the window or within the functions in which they are declared.

var first_name="Mohit"; //Globally scoped
console.log(first_name); //Mohit

function log_name(){
  var last_name="Pandey"; //Function scoped
  console.log(last_name); //Pandey
  console.log(first_name); //Mohit  //first_name is global scoped, so can be accesed here
}
log_name();

Here, first_name is a globally scoped variable, hence it can be accessed throughout the code. last_name is a function-scoped variable and can be accessed within the log_name function only. So, if we try to access the last_name variable outside the function, we get an error.❌
To read more about scopes, please refer to this article: https://www.programiz.com/javascript/variable-scope.

function log_name(){
  var last_name="Pandey";
}
//Accessing last_name outside the function
console.log(last_name); //ReferenceError: last_name is not defined

log_name();

Re-declaring/Updating

var variables can be redeclared/updated later in the code without any worries of getting an error.✔

var name = "Mohit";
console.log(name); //Mohit

var name = "Elon"; //Re-declaring 'name' variable
console.log(name); //Elon
//or
name="Elon Musk" //Updating 'name' variable
console.log(name); //Elon Musk

Hoisting

Hoisting is a mechanism in Javascript where all the variable declarations are moved to the top of their respective scope before executing the code.

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

The above snippet is executed as follows:

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

Here, name was hoisted to the top with the value undefined. Therefore, undefined was logged onto the console. After assigning the value to the name variable, the actual value was logged. To read more about hoisting, please refer to this article: https://www.programiz.com/javascript/hoisting.

Problem with var

The major problem that we need to deal with while using var is its scope and update behavior.

Let's consider the below code.

var name="Mohit"
var day = 3;
if(day==3){
   var name ="Elon";
}
console.log(name); //Elon

So whenever the if-condition is true, the original name is re-initialized with another value. Hence, when we want to use this variable in some later part of the code, we would have a different value than the one we need. So, if we use a new variable with the same name unknowingly, then this becomes a problem.😑

With var, we do not get a separate scope for the if-else block or any other block. This leads to major issues in variable naming.

To solve this issue, let and const were added to the language to provide more better developer experience.😀

let

With the introduction of let , the use of var is no longer needed.

let name="Mohit";
console.log(name); //Mohit

Scope

let declarations are block-scoped which means that the variables defined in a particular block have a completely new memory space and do not affect the variables declared outside the scope of the new variable.

A block refers to the area bounded by curly braces {}.

let name="Mohit"
let day = 3;
if(day==3){
   let name ="Elon";
}
console.log(name); //Mohit

Here, the new name variable in the if-block has its accessibility in only the block it was declared. Hence, the original name was not updated.👌

Re-declaring/Updating

Re-declaration of let variables is not allowed. However, we can declare a variable with the same name in some scope other than the original one.

let name="Mohit";
//let name="Elon"; //SyntaxError: Identifier 'name' has already been declared
function log(){
  let name="Elon"
  console.log(name); //Elon
}
console.log(name); //Mohit
log();

let variables can be updated within its scope just like var variables.

let name="Mohit";
name="Elon";
console.log(name); //Elon

Hoisting

let declarations are also hoisted at the top of the program before the execution of code but it isn't initialised with any value.

console.log(name); //ReferenceError: Cannot access 'name' before initialization
let name="Mohit";

const

const declarations, as the name suggests, are constant declarations, which means that once declared, the value cannot be changed.

const name = "Mohit";
console.log(name); //Mohit

Scope

Alike let ,const declarations are block-scoped.

Hoisting

const declarations are also hoisted at the top without being initialised with any value.

Re-declaring/Updating

const declarations can neither be re-declared nor updated within its scope.

const name="Mohit";
console.log(name); //Mohit

//Redeclaring
const name="Elon"; //SyntaxError: Identifier 'name' has already been declared

//Updating
name="Elon"; //TypeError: Assignment to constant variable.

But objects behave a little differently here. Although const objects cannot be updated, we can definitely mutate the properties and even go as far as to add new properties to them.

const data={
name:"Mohit",
isCool:true,
}
console.log(data); //{name: "Mohit", isCool: true}

/*
//const objects cannot be redeclared or updated with new value
data={
name:"Elon"
} //TypeError: Assignment to constant variable.
*/

//Mutating name property
data.name="Elon"
console.log(data.name) //Elon

//Adding age property
data.age=20;
console.log(data); //{name: "Elon", isCool: true, age: 20}

Summary

To sum it up, let us look at the table below for all the differences and properties var ,let and const possess.

Let us know in the comments if you enjoyed reading the article and if you've any doubts regarding the same! To read more such articles on web development, please follow the DevHub community blog🤝
Join the DevHub community on Discord for roadmaps, opensource projects, internships, and jobs using this link