var vs let vs const

In this blog, we are going to discuss the various ways in which we can declare variables in JavaScript and how they differ from each other. By the end, you must be able to understand which one to use and why. But, before moving forward if you are just starting out with JavaScript for your info, var has been since the beginning but let and const are comparably new and have been added in the ES6.

Now, without further ado let's dive in.

Scope

var is function scoped when declared inside a function and global scoped when declared outside, whereas let and const are block scoped. Now, what's a block scope? Simply put anything between two curly braces { } forms a block scope.

Let's try to understand more clearly through examples.

const greet = () => {
  var user = "John";
  console.log(user); //John
};
greet();

console.log(user); // reference error

As we have declared the variable user using var, it is only available within the greet function and if we try to access it outside, it will through a reference error stating that the - user is not defined.

Let's take another example,

const greet = () => {
  var name = "John";
  {
    let name = "Max";
    console.log(`Hello! ${name}`); //Hello! Max
  }
  console.log(`Hello! ${name}`); //Hello! John
};
greet();

Can you guess why the second console log is printing John and not Max? Yes, this is because let is block scooped, name = "Max" is available only inside those curly braces.

Declaration

var can be redeclared while let and const cannot be redeclared within the same scope.

{
   var num1 = 10;
   var num1 = 12;
   console.log(num1); //12
 }
{
   let num2 = 15;
   let num2 = 25; //syntax error
   console.log(num2);
 }
{
   const num3 = 20;
   const num3 = 30; //syntax error
   console.log(num3);
 }

let and const as mentioned above can't be redeclared and hence will thorough a syntax error stating that - the variable has already been declared.

Also, another point to be noted is that const is even more strict than let. It needs to be initialized at the time of declaration but var and let can be declared without initialization.

var user1;
let user2;
const user3; //syntax error

Updation

var can be and let can be updated or in other words assigned a new value anytime later in the code but const cannot be updated. If we try to update a const variable it will throw a syntax error stating - assignment to constant variable.

Let's see an example,

{
var name = "John";
name = "Max";
console.log(name); //Max
 }
{
let name = "John";
name = "Max";
console.log(name); //Max
 }
{
const name = "John";
name = "Max";
console.log(name); //type error
 }

Hoisting

Hoisting is a mechanism in JavaScript where variable and function declarations are moved to the top of their scope. Even before our code is executed, memory is allocated to each and every variable and function. And because of this, we are able to access them even before they are initialized.

Now, let us try to see how var, let and const behaves with respect to hoisting with an example.

console.log(user1); //undefined
console.log(user2); //reference error
console.log(user3); //reference error

var user1 = "John";
let user2 = "Max";
const user3 = "Bruce";

So, we can see that var gives undefined whereas let and const gives reference error stating - cannot access the variable before initialization.

I mentioned above that all variables are hoisted but why are we getting an error in the case of let and const, aren't they hoisted? Yes, definitely they are hoisted but unlike var they are not initialized with undefined, and hence if we try to access them before they are initialized we get an error.

I hope that you have got a basic understanding of the different ways to declare variables in JavaScript. If you find this blog helpful do share it with your friends.

var vs let vs const

Table of contents

Scope

Declaration

Updation

Hoisting