Difference Between Var And Let Keyword

var keyword 
  1. var keyword was introduced with JavaScript.
  2. It has a function scope.
  3. It is hoisted. 
function scope

Let us understand it with an example,
  1. //function scope  
  2. function get(i){  
  3.     //block scope  
  4.   if(i>2){  
  5.     var a = i;  
  6.   }  
  7.   console.log(i);  
  8. }  
  9. //calling function  
  10. get(3)  
  11.   
  12. //access variable outside function scope  
  13. //it will give me an error  
  14. console.log(i);  
Output

3

Uncaught ReferenceError: i is not defined at window.onload
 
As you can see in the above example, I have declared a variable (var a = i) inside block but still I am able to access it outside the block (output = 3). If I try to access it outside function scope, it will give me an error (i is not defined). 

Hoisting 
 
When you declare a variable with var keyword, it will be automatically hoisted to the top of scope. 
  1. //function scope  
  2. function get(i){  
  3.     //printing i variable  
  4.   //value is undefined  
  5.   console.log(a);  
  6.     
  7.   //declare variable after console but this variable hoisted to the top at //run time  
  8.   var a = i;  
  9.     
  10.   //again printing i variable  
  11.   //value is 3  
  12.   console.log(a);  
  13. }  
  14. //calling function  
  15. get(3)  
Output

undefined
3
 
This happens behind the scene -
  1. //function scope    
  2. function get(i){    
  3.         //a hoisted to the top  
  4.     var a;    
  5.     //if we don't give any value to variable, by default, value is undefined.  
  6.     //value is "undefined"  
  7.   console.log(a);    
  8.       
  9.     //assigning value to a  
  10.   a = i;    
  11.        
  12.   //value is 3    
  13.   console.log(a);    
  14. }    
  15. //calling function    
  16. get(3)    
let keyword
  1. let keyword was introduced in ES 6 (ES 2015).
  2. It has block scope.
  3. It is not hoisted.
Block scope

When you try to access let keyword outside block scope, it will give an error. let variable is available only inside the block scope.
  1. //declare a variable with var keyword 
  2. var i = 4  
  3.     //block scope -start  
  4.   if(i>3)  
  5.   {  
  6.       //declare a variable with let keyword  
  7.       let j= 5;  
  8.   
  9.       //declare a variable with var keyword  
  10.       var k = 8;  
  11.       //it will give me 5  
  12.       console.log("inside block scope (let)::"+ j);  
  13.   }  
  14.   //block scope -end  
  15.   
  16. //it will give me 8.  
  17. //var variable are available outside block scope  
  18. console.log("ouside block scope (var)::"+ k);  
  19.   
  20. //it will give me an error.  
  21. //let variable are not available outside block scope  
  22. console.log("ouside block scope (let)::"+ j);  
Output

inside block scope (let)::5
ouside block scope (var)::8
Uncaught ReferenceError: j is not defined at window.onload
 
Hoisting 

let keyword is not hoisted.
  1. //program doesn't know about i variable so it will give me an error.  
  2. console.log(i);  
  3. //declare and initilize let variable  
  4. let i = 25;  
Output

Uncaught ReferenceError: i is not defined at window.onload
 
If you have any questions, don't hesitate to contact.
Ebook Download
View all
Learn
View all