Difference Between Var, Let And Const In JavaScript

Hitanshi Mehta
Mar 05
16.8k
0
8

100

Article

Introduction

In this article, we will learn about the difference between var, let, and const in ES6.

Difference between var and let

The variable in JavaScript has three scopes.

Global scope
Function scope
Block scope

In global and function scope both let and var behave the same. The main difference is when the var and let are used in block scope. Let's understand it with the help of an example.

Global scope

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>VarLetConst</title>
</head>
<body>
    <table border="1">
        <thead>
            <th>Global scope</th>
            <th>Function scope</th>
        </thead>
        <tbody>
            <tr>
                <td id="GlobalScopeVar">
                </td>
                <td id="GlobalFunctionScopeVar">
                </td>
            </tr>
            <tr>
                <td id="GlobalScopeLet">
                </td>
                <td id="GlobalFunctionScopeLet">
                </td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
        //Global scope for var
        var VarGlobalNo=5;
        document.getElementById('GlobalScopeVar').innerHTML=VarGlobalNo;
        function CheckScopeVar()
        {
            document.getElementById('GlobalFunctionScopeVar').innerHTML=VarGlobalNo;
        }
        CheckScopeVar();

        //Global scope for let
        let LetGlobalNo=5;
        document.getElementById('GlobalScopeLet').innerHTML=LetGlobalNo;
        function CheckScopeLet()
        {
            document.getElementById('GlobalFunctionScopeLet').innerHTML=LetGlobalNo;
        }
        CheckScopeLet();
    </script>
</body>
</html>

Output

VarLet Const

We can clearly see that both let and var are accessible inside and outside the function being global.

Function scope

<script type="text/javascript">

    //Function scope for var
    function CheckScopeVar()
    {
        var VarFunctionNo=5;
        document.getElementById('FunctionScopeVar').innerHTML=VarFunctionNo;
    }
    CheckScopeVar();
    //document.getElementById('OutsideFunctionScopeVar').innerHTML=VarFunctionNo;

    //Function scope for let
    function CheckScopeLet()
    {
        let LetFunctionlNo=5;
        document.getElementById('FunctionScopeLet').innerHTML=LetFunctionlNo;
    }
    CheckScopeLet();
    //document.getElementById('OutsideFunctionScopeLet').innerHTML=LetFunctionlNo;

</script>

Output

VarLet Const output

We can not use let and var outside a function. If we try to use let and var outside function it will give an error.

Error

Reference error

Block Scope

<script type="text/javascript">

    //Block scope for var
    {
        var VarBlockNo=5;
        document.getElementById('OutsideBlockScopeVar').innerHTML=VarBlockNo;
    }
    //document.getElementById('InsideBlockScopeVar').innerHTML=VarBlockNo;

    //Block scope for let
    {
        let LetBlockNo=5;
        document.getElementById('InsideBlockScopeLet').innerHTML=LetBlockNo;
    }
    //document.getElementById('OutsideBlockScopeLet').innerHTML=LetBlockNo;

</script>

Output

Output

Now var and let play behave in a different manner. Var is accessible inside and outside the block but let is only accessible inside the block.

Error

Reference error

const

We use const when we have a fixed value. We can't reassign another value to the const.

const ConstNo=5;
document.getElementById('ConstNo').innerHTML=ConstNo;

This will work perfectly.

work perfectly

But if we try to reassign another value to const it will give an error.

const ConstNo=5;
document.getElementById('ConstNo').innerHTML=ConstNo;
// ConstNo=10; // This will result in an error as you cannot reassign a value to a constant.

Error

Error