Difference between Var, Let, and Const in JavaScript

In this post, we will dig deeper into the different types of variables in JavaScript and the Difference between Var, Let, and Const in JavaScript. var, let and const are used to declare variables in JavaScript.

Whenever Salesforce Developer works with Aura Components or Lightning Web Components, they always get confused about these declarations, especially about the var and let. This post will clear all your doubts, if any, with the Examples.

Before going into the difference between var, let, and const, we must understand the concept of Hoisting in JavaScript.

JavaScript Hoisting

In JavaScript, a variable can be used before it has been declared. Or in other words, a variable can be declared after it has been used.

Consider below example:

<script>
    x = 1;
    console.log(x); // displays 1.
    var x;
</script>

Here, we are assigning the value 1 to x. Then we are displaying the value of x in the console. But the variable x is declared in the next line. What JavaScript does internally is that it moves all the declaration to the top of the current Scope, either top of the current Script or current Function. This is called JavaScript Hoisting.

Above code is equivalent to below code with the same output:

<script>
    var x;
    x = 1;
    console.log(x); // displays 1.
</script>

Also please note that, JavaScript only hoists declarations, not initializations.

<script>
    x = 1;
    console.log(x); // displays 1.
    console.log(y); // displays undefined.
    var x;
    var y = 2;
</script>

Here, var x (declaration) will be hoisted to Top but the var y = 2, won’t as it is initialization and not a declaration. Hence, the value of y will be undefined.

Now that we know what is JavaScript Hoisting and how it affects code, let’s get back to our main topic for this post.

Difference between var, let, and const

The primary difference between var, let, and const is the Scope. The var has a Function Scope while let and const have the Block Scope.

var in JavaScript

var has the Function Scope. Hence, no matter where the var variable is defined in Function, it is accessible anywhere inside the Function.

Consider below code:

<script>
    sample();
    function sample(){
        if(true){
            var x = 2;
            onsole.log(x); // displays 2.
        }
        console.log(x); // displays 2.
    }
    console.log(x); // ReferenceError: x is not defined
</script>

Variable x is defined and initialized inside if condition. But still, the variable is accessible outside of if condition, as long as we are accessing it inside the function. If we try to access x outside the function, we get the ReferenceError.

All the var variables are hoisted at the top of the Scope.

let in JavaScript

let has the Block Scope. Hence, let variables are only accessible inside the Block where the variable is declared.

Consider below example where we replaced var with let in earlier example.

<script>
    sample();
    function sample(){
        if(true){
            let x = 2;
            console.log(x); // displays 2.
        }
        console.log(x); // ReferenceError: x is not defined.
    }
    console.log(x); // Dead Zone.
</script>

Here, variable x is declared inside if condition. Hence, variable x is only accessible inside the if condition. If we try to access it outside of the if condition, we get a ReferenceError. If the let variable is declared outside of the if condition, it will be accessible anywhere in the function. In the above example, the Scope of variable x is the curly braces of if condition.

Variables defined with let are hoisted to the top of the block, but not initialized. Using a let variable before it is declared will result in the ReferenceError.

const in JavaScript

const variables is also same as let variable with Block Scope. Only difference is;

• It must be initialized at the time of declaration.
• We can not reassign the value to the const variable once it is initialized.
• If we assign the Object to the const variable, we can update the properties and functions of the const variable.

Consider below example:

<script>
    const x = 10;
    console.log(x); // displays 10.
    x = 20; // TypeError: Assignment to constant variable.
</script>

Here, if we try to assign value to const variable x after initialization, we will get the TypeError.

But, we can update the properties and functions of the const variable. Consider the below example:

<script>
    const y = {
        name : "Nikhil"
    };
    console.log(y); // displays Object.
    y.name = "Niks Developer";
    console.log(y); // display Object with updated name.
</script>

Here, we have a const y with Object as value with the name property. The initial value of the name is Nikhil. And later we can change the name of y to something else.

Variables defined with const are hoisted to the top of the block, but not initialized. Using a const variable before it is declared will result in the Reference Error.

Also Read: Loop through List in LWC and Javascript

Conclusion

For many developers, Hoisting is unknown and overlooked behavior of JavaScript. This leads to bugs. To avoid bugs, always declare all the variables at the beginning of every scope.

Also, we can use the JavaScript strict mode which does not allow variables to be used before declaration. To use strict mode in JavaScript, put the below line as the first line of your JavaScript code.

"use strict";

We can use strict mode on Block as well as Function level.

That is all from this post. Please Subscribe here if you don’t want to miss new implementations.

Check official documentation to know more about The Difference between Var, Let, and Const in JavaScript here.

Thank you for reading.