Difference Between Var, Let And Const In JavaScript

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,
  1. Global scope
  2. Function scope
  3. Block scope 
In global and function scope both let and var behaves 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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  5.     <title>VarLetConst</title>  
  6. </head>  
  7. <body>  
  8.     <table border="1">  
  9.         <thead>  
  10.             <th>Global scope</th>  
  11.             <th>Function scope</th>  
  12.         </thead>  
  13.         <tbody>  
  14.             <tr>  
  15.                 <td id="GlobalScopeVar">  
  16.                 </td>  
  17.                 <td id="GlobalFunctionScopeVar">  
  18.                 </td>  
  19.             </tr>  
  20.   
  21.             <tr>  
  22.                 <td id="GlobalScopeLet">  
  23.                 </td>  
  24.                 <td id="GlobalFunctionScopeLet">  
  25.                 </td>  
  26.             </tr>  
  27.   
  28.         </tbody>  
  29.     </table>  
  30.     <script type="text/javascript">  
  31.         //Global scope for var  
  32.         var VarGlobalNo=5;  
  33.         document.getElementById('GlobalScopeVar').innerHTML=VarGlobalNo;  
  34.         function CheckScopeVar()  
  35.         {  
  36.             document.getElementById('GlobalFunctionScopeVar').innerHTML=VarGlobalNo;  
  37.         }  
  38.         CheckScopeVar();  
  39.   
  40.         //Global scope for let  
  41.         let LetGlobalNo=5;  
  42.         document.getElementById('GlobalScopeLet').innerHTML=LetGlobalNo;  
  43.         function CheckScopeLet()  
  44.         {  
  45.             document.getElementById('GlobalFunctionScopeLet').innerHTML=LetGlobalNo;  
  46.         }  
  47.         CheckScopeLet();  
  48.   
  49.   
  50.     </script>  
  51. </body>  
  52. </html> 
Output
 
We can clearly see that both let and var are accessible inside and outside the function being global.
 

Function scope

  1. <script type="text/javascript">  
  2.   
  3.         //Function scope for var  
  4.         function CheckScopeVar()  
  5.         {  
  6.             var VarFunctionNo=5;  
  7.             document.getElementById('FunctionScopeVar').innerHTML=VarFunctionNo;  
  8.         }  
  9.         CheckScopeVar();  
  10.         document.getElementById('OutsideFunctionScopeVar').innerHTML=VarFunctionNo;  
  11.   
  12.         //Function scope for let  
  13.         function CheckScopeLet()  
  14.         {  
  15.             let LetFunctionlNo=5;  
  16.             document.getElementById('FunctionScopeLet').innerHTML=LetFunctionlNo;  
  17.         }  
  18.         CheckScopeLet();  
  19.         document.getElementById('OutsideFunctionScopeLet').innerHTML=LetFunctionlNo;  
  20.   
  21. </script> 
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
 
 

Block Scope

  1. <script type="text/javascript">  
  2.   
  3.         //Block scope for var  
  4.         {  
  5.             var VarBlockNo=5;  
  6.             document.getElementById('OutsideBlockScopeVar').innerHTML=VarBlockNo;  
  7.         }  
  8.         document.getElementById('InsideBlockScopeVar').innerHTML=VarBlockNo;  
  9.   
  10.         //Block scope for let  
  11.         {  
  12.             let LetBlockNo=5;  
  13.             document.getElementById('InsideBlockScopeLet').innerHTML=LetBlockNo;  
  14.         }  
  15.         document.getElementById('OutsideBlockScopeLet').innerHTML=LetBlockNo;  
  16.   
  17.     </script> 
Output
 
 
Now var and let play behaves in different manner. Var is accessible inside and outside block but let is only accessible inside block.
 
Error
 
 
const
 
We use const when we have fix value. We can't reassign another value to the const.
  1. const ConstNo=5;  
  2. document.getElementById('ConstNo').innerHTML=ConstNo; 
This will work perfectly.
 
 
But if we try to reassign another value to const it will give an error.
  1. const ConstNo=5;  
  2. document.getElementById('ConstNo').innerHTML=ConstNo;  
  3. ConstNo=10; 
Error
 
 

Summary

 
I wish the concept of var, let and const is clear now. If you have any query feel free to ask in the comment section.