What’s the Difference Between var, let, and const?

why people are using let and const if we’ve var. what makes them different from good ol’ var which we’ve been using? If you are still not clear about this, then this article is especially for you.

In this article, we’ll discuss the difference between var, let and const. But before starting we need to understand what scope is? As scope will be a key point in this article.

Scope

Scope essentially means where these variables are available for use. Scope determines the accessibility (visibility) of these variables.

var

All the variables which are declared using var are globally scoped or function/locally scoped. The scope is global when a var variable is declared outside a function. wait what does it mean. let’s see one example.

var globalVar = "hey";
function var() {
    var innerVariable = "hello";
}

Here, globalVar is globally scoped because it exists outside a function while innerVariable is function scoped. So we can access globalVar inside function as well as outside of a function but we cannot access the variable innerVariable outside of a function.

So if we do this:

var globalVar = "hey hi";
function newFunction() {
    var innerVariable = "hello";
}
console.log(innerVariable); // error: innerVariable is not defined

var can be re-declared and updated.

What it means is you can re-initialize the variable using the same name with var and also you can update its value.

var globalVar = "hey";
var globalVar = "Hello";
var innerVariable = "hey";
innerVariable = "Hello";

What’s the problem with var

var globalVar = "hey";
var flag = true;
if (flag) {
    var globalVar = "Hello";
}
console.log(globalVar) // "Hello"

So, since the flag returns true, globalVar is redefined to “Hello”. It becomes a problem when you want to update the variable’s value for that particular block. Here, globalVar will print “Hello” whenever you try to access it anywhere.

let

let solves the problem with var that we just covered. Let’s consider why this is so. let is block scoped. a variable declared in a block with let is only available for use within that block.

if (flag) {
    var globalVar = "Hello";
    console.log(globalVar)
}
console.log(globalVar); // error: globalVar is not defined

We see that using globalVar outside its block returns an error. This is because let variables are block scoped.

let can be updated but not re-declared.

What it means is you can not re-initialize the variable using the same name with let and you can update its value.

If you try following then it will work for let.

let globalVar = "Hi";
globalVar = "Hello";

But if you try following then it will throw an error.

let globalVar = "Hi";
let globalVar = "Hello"; // Identifier 'globalVar' has already been declared

However, if you’ve defined the same variable is defined in different scopes then it will run perfectly without any error:

let globalVar = "hey";
let flag = true;
if (flag) {
    let globalVar = "Hello";
    console.log(globalVar); // "Hello"
}
console.log(globalVar) // "hey"

const

Like let, const declarations also can only be accessed within the block they were declared. let’s see what’s the difference between let and const.

const cannot be updated or re-declared

What it means is you can not re-initialize the variable using the same name with const and also you can update its value.

If you try both of the following then both will throw an error for const.

const globalVar = "Hi";
globalVar = "Hello"; // error: Assignment to constant variable.
const globalVar = "Hi";
const globalVar = "Hello"; // Identifier 'globalVar' has already been declared

However, This behavior of const is somehow different when it comes to objects declared with const. You can not update a const object, But you can update the properties of these objects can be updated.

const person = {
    name: "john",
    age: 4
}
You can not update above object like below.

person = {
    name: "joe",
    gender: "male"
} // error:  Assignment to constant variable.

But you can mutate an object declared with const like below.

person.gender = "male";

This will add gender property in the person object with value male without returning errors.

Conclusion

It’s generally advisable and also good practice to avoid using var because of its function-scope. It absolutely appears to be that the aim of ES6 is to replace var with let/const since they will result in better coding practices.