Difference Between Var, Let, and Const in Javascript

Var was used since the javascript language was created. Let and Const were introduced to overcome some of the flaws that the var keyword had. In this blog, we will be seeing the difference between var, let & const keywords in Javascript.

The basic difference between var, let & const keywords are written below:

To understand more about their differences we will be considering 2 more factors:

Scope

Shadowing

Scope of the Variables

The scope is a region where certain values exist and can be accessed. There can be Global, functional, or block scopes in Javascript.

Global Scope: Whenever we declare a variable at the start of the code then it is in the global scope.

Functional Scope: All the variables present inside the function are function scoped and cannot be accessed outside it.

Block Scope: The variables which are declared inside a { } (block) cannot be accessed outside the block are block scoped.

Here is an example where we are trying to access values that are declared using var & let keywords outside their function & block scope.

Example 1: Accessing variable declared using var keyword outside block scope

{
    var inner_variable="This is a value";
}
console.log(inner_variable);

Output

This is a value

Example 2: Accessing variable declared using let keyword outside block scope

{
    let inner_variable="This is a value"
}
console.log(inner_variable)

Output

Error

Example 3: Accessing variable declared using var keyword outside function scope

function testingMethod(){
    var check="Value inside function";
}
testingMethod();
console.log(check);

Output

Error

Shadowing

Let's assume a variable is declared at the global level and then we are calling it inside any function then it is known as shadowing.

Here is an example of Shadowing in Javascript.

function test(){
    let a="Hello";
    if(true){
        let a="Hi";
        console.log(a);
    }
    console.log(a);
}
test();

It is possible to shadow a variable declared using var with let but vice versa is not possible (i.e., will return an error). This concept is known as illegal shadowing. An example is shown below as well:

function test(){
    var a="Hello";
    let b="Bye";
    if(true){
        let a="Hi";
        var b="Goodbye";
        console.log(a);
        console.log(b);
    }
}
test();

Error:  'b' identifier has already been declared.

Declaration

There are different rules for the declaration using var, let & const keywords in javascript. See the below example for more clarity:

var myvar; var myvar; // won't return error

let myvar; let myvar; // return error: "variable already declared"

Var & Let can be declared without initialization but const can't be.

Interview Question: Are all variables declared using var, let & const keyword Hoisted?

Answer: Yes, but only variables declared using var can be accessed before initialization and variables declared using let & const will give reference error if we try same approach.

Homework Question: What is the output of the below code:

function abc(){
    console.log(a);
    var a=10;
}
abc();

I hope you enjoyed reading this blog. Please share your thoughts in the below comment section. Feel free to add anything extra as well :)