Before ES6(2015), variables used to declare with var. But now with ES6 we have let and const for variable declaration. var had some drawbacks which caused developers to find new way for variable declarations.

var

var is globally scoped or functional scoped. Scope is the area in which we can use the variable. So we can use var globally or inside a function. To understand this, lets take one example:

var message = "hello";

function testMessage() {
   var sayHi = "Hi";
   console.log(message); // hello
}

console.log(sayHi); // ReferenceError: sayHi is not defined

In the above example variable message is declared at the start of the code so it is globally scoped. After that we define a function and inside the function we declare variable sayHi. Just after that we console log variable message. If we call the function testMessage we will see hello in our console because variable message is declared at the top of our code. Hence variable who have global scope can be used anywhere in the code.

After the function declaration we console log sayHi. Now variable sayHi is declared inside a function hence its scope is limited to that function or we can say variable sayHi can be used only inside testMessage function. Hence when we try to access it outside the function we get the error.

We can re-decalre var

One of the major drawbacks of var is we can re-declare same variables. Lets see with example:

var message = "Hello";

if (true) {
  var message = "Bye";
}

console.log(message); // Bye

From the above example we can see variable message is declared at the top. After that inside if block we updated the value of message or re-declared the same variable. And when we console log message we get the updated value.

This is not a problem if you are updating value of message knowingly. This becomes a problem when you don't know there is some variable message and you declare the same variable. Hence to solve these issue let and const were introduced.

let

let is a block scoped, which means it is visible only inside code block or inside curly braces {}. Variables declared with let can be updated but cannot re-declare inside the same scope. Let's see the below example:

let message = "hello";
let message = "hi"; // SyntaxError: Identifier 'message' has already been declared

if we re-declare message variable we get the error.

let message = "Hello";

if (true) {
  let message = "Bye";
  console.log(message) // Bye
}

console.log(message) // Hello

In the above example message is declared at the top. Inside if block we declare new message variable. We don't get error after declaring message because we are declaring inside different block scope {}. let is block scoped hence when we declare message it is not the same message variable declared at the top. When we do console log inside if block we are displaying the same variable from the if block. Now when we console log message outside the if block, it is pointing the top level message variable.

const

const is also block scoped just like let. The only difference between let and const is that let can be updated any time but const is constant hence once declare we cannot re-declare it and cannot update or change the value of const. Let's see example:

const message = "Hello";
message = "Bye"; // TypeError: Assignment to constant variable

If we try to update the variable which we declare using const we get the error.

const message = "hello";

if (true) {
  const message = "Bye";
  console.log(message) // Bye
}

console.log(message) // hello

We can see that const works the same as let and when try to access the message outside if we get the global variable. If we had not declared the top level message variable and try to access the local variable which is inside if outside the if block we will get error saying the variable is not defined.

Summary

We saw why we shifted from old var to ES6 let and const. var is global scoped or function scoped. let and const are block scoped ({}). W can re-declare and update variables using var. We can only update variables using let and can only use it using const once declared.

Note: There are other drawbacks of using var like TDZ(Temporal Dead Zone) and Hoisting which we did not cover (maybe will cover in future blogs).