Difference between var , let and const in Javascript

Introduction

With the improvement being made in the JavaScript, new keywords have been introduced. In this article, we shall understand what, why and when about keywords such as 'let' and 'const' and will also understand the difference between 'var', 'let' and 'const' keywords.

All these three keywords are used to declare variables in JavaScript. Let's learn them one by one.

'var' keyword of JavaScript

A person knowing  a little about JavaScript must be knowing the 'var' keyword. It is used to declare a variable in JavaScript like below.

var name = 'sheo';
var age = 25;

In below code snippet, we have declared a variable name that has been used in getName() function to return the myName variable value.

function foo() {
    var name = 'sheo';
    return function getName() {
        var myName = name + ' narayan';
        return myName;
    }
}
var getName = foo();
alert(getName());

Demo url

Scope of 'var' keyword in JavaScript

The scoping rule of var keyword in JavaScript is different in comparison with other programming languages such as C#, C++ etc.

In below code snippet, we can see that when the Test function is being called with 'true', the alert shows 'Sheo' even if the namevariable has been declared inside the if block. If this would have other programming language, we might have got 'undefined variable error' as the name variable scope was limited to if block. However, JavaScript treats this differently and access the variable and value that was set in the if block.

But if the same Test function is called with 'false', as the variable has not been declared either in the function or within the if block, the in alert shows 'undefined'.

function Test(t) {
        if (t)
        {
                var name = 'Sheo';
        }
        return name;
}

alert(Test(true)); // shows Sheo;'
alert(Test(false)); // shows undefined

Demo url

We get this behavior because var declarations are accessible withing their containing function, module, namespace or in global scope.

This type of variable scoping can cause a lot of confusion and is prone to error in big programs. Similar to this, there can be overwriting of the variables while working with nested loops like below

 for (var i = 0; i < 3; i++) {
        for (var i = 0; i < 2; i++) {
                alert(i)
        }
    }

Demo url

In the above code, we can see that the value of i is being overridden and this loop runs only twice. 

All above examples are enough to understand that var keyword has some problem while working in big programs and even in small programs because of scoping and other flexible features of this keyword.

'let' keyword of JavaScript

To overcome the scoping issue and flexibility (for not good reason in some cases) that comes with 'var', 'let' keyword has been introduced. The way we declare variable with 'let' is same as 'var' however this is better managed in terms of scope.

let name = 'sheo';
let age = 25;

Scope of 'let' keyword in JavaScript

Unlike 'var' keyword, the 'let' keyword uses block-scoping ie. variable declared within block is accessible only within that block. Like in below function, fullName variable declared with 'let' keyword is not accessible outside the if block.

The first alert function shows 'sheo narayan' as alert but the second alert shows 'fullName' is undefined error in the debug windowof the browser.

function getName(t) {
    let name = 'sheo';

    if (t) {
        let fullName = name + ' narayan';
        return fullName;
    }

    return fullName; // will throw error
}

alert(getName(true)); // shows 'sheo narayan'
alert(getName(false)); // 'fullName' is undefined

The same applies to the try catch block of the JavaScript that is used to handle error.

try
{
}
catch (ex)
{
   alert(ex); // works well
}

alert(ex); // throws error

'let' with block-scoped and function-scoped variable

A let variable can be declared both in block-scoped and function-scoped. In below example, lastName is the parameter of Test function as well as it is also declared as separate variable inside the if block and both works perfectly alright.

function Test(t, lastName)
{
        if (t)
        {
                let lastName = ' narayan'
                return lastName;
        }
        return lastName;
}

alert(Test(true, '')); // shows narayan
alert(Test(false, 'Narayan')); // shows Narayan

Demo url

Re-declarations of variables

'var' re-declaration

Re-declaring variable with var keyword refers to the same variable irrespective of how many times we have declared that variable.

var name = 'sheo';
var name = 'sheo';
function getName()
{
   var name = 'sheo';
}

'let' re-declaration

Re-declaring variable with let keyword stops us from doing so as it throws error

let name = 'sheo';
let name = 'narayan'; // error - Let/Const redeclaration

'const' keyword of JavaScript

In terms of scoping, const keyword is same as let however it's value can't be changed once it is assigned.

In below code snippet, we have declared myAge and person variable of type const. When we try to re-assign values, it throws error. However the const type object property value can be changed as shown below.

const myAge = 9;
const person = {
    name: "Sheo",
    age: myAge}
alert(person.name + ' ' + person.age);
// Error
myAge = 10; // error

person = { // error
    name: "Sheo Narayan",
    age: myAge};
// however the const object property value can be changed
person.name = "Narayan";
person.age = 60;

alert(person.name + ' ' + person.age);

Demo url

Conclusion

In this article, we have seen different ways of declaring variable and their pros and cons. It is always recommended to use letkeyword to declare variable so that the chances of confusion and value overriding and mistakes can be avoided.

Hope this article was informative, do let me know your comment or feedback. Thanks for reading.