var vs let in Javascript | Difference between let and var

Difference between let and var in Javascript

There has been a lot of confusion about the use of var and let in Javascript. So here we will see difference between var and let , so that you can easily decide what to use where and when.

Let’s see the difference between var and let

#	var	let
1	var keyword was introduced with JavaScript.	let keyword was introduced in ES 2015(ES6).
2	var statement is used to Create a function variable.	let is similar to var scope, and it allows you to create a block-scoped variable.
3	Using var keyword to define variable globally (Global scope).	let variables work the same as var when used in a Global scope.
4	var variables can be accessed in the window object.	while let variables can't be accessed in the window object because they cannot be globally accessed.
5	Using var keyword to define variable locally (Function scope).	let variables work the same as var when used in a function scope.
6	var keyword is not block scoped.	let keyword is block scoped.
7	Variables declared with var is hoisted to the top.	Variables declared with let is not hoisted to the top.
8	var variables can be redeclared in the same scope.	let variables can't be re-declared in the same scope.

Let’s see the var vs let in details with examples :

1.) Global scope :

• var and let variables work the same way when used in a global scope.

  ➤ Example 1: Global scope;

<script>
    var varVariable = “I am global variable.”;
    let letVariable = “I am also global variable.”;
</script>

2.) Global window object :

• Global variables defined with let variable will not be added to the global window object like those defined with var.

  ➤ Example 2: Global window object;

• Thus let variables can't be accessed in the window object because they cannot be globally accessed.

1. <script>

2. var varVariable = “I am var variable.”;

3. let letVariable = “I am let variable.”;

4. //Say, here we have two variables declared. let us see what output it actually gives you.

5. console.log(window.varVariable); //=> I am var variable.

6. console.log(window.letVariable); //=> undefined

7. </script>

3.) Function scope :

• var and let variables work the same way when used in a function scope.

  ➤ Example 3: Function scope;

<script>
    function display(){
       var varVariable = "I am var variable.";
       let letVariable = "I am let variable.";
    
       console.log(varVariable); //I am var variable.
       console.log(letVariable); //I am let variable.
    }  
    display();     
</script>

4.) Block scope :

• Variable defined with var keyword is not block scoped.

  ➤ Example 4.1: For loop using var variable;

<script>
    for(var i=0; i<=5; i++){
       console.log(i); //i is visible here  
    }  
    console.log(i); //i is visible here    
</script>

• Variable defined with let keyword is block scoped.

  ➤ Example 4.2: For loop using let variable;

<script>
    for(let i=0; i<=5; i++){
       console.log(i); //i is visible here  
    }  
    console.log(i); //Error     
</script>

5.) Variable hoisting :

• Variables declared with var are hoisted to the top.

  ➤ Example 5.1: Variable hoisting with var;

<script>
    console.log(name); //undefined
    var name = "I am var variable";
</script>

• Variables declared with let are not hoisted to the top.

  ➤ Example 5.2: Variable hoisting with let;

<script>
    console.log(name); //ReferenceError
    let name = "I am let variable";
</script>

6.) Re-declaration :

• let variables cannot be re-declared while var variable can be re-declared in the same scope.

  ➤ Example 6.1: var variable re-declaration in same scope;

Variables defined with var keyword can be redeclared in the same scope.

<script>
    var a = 10; 
    var a = 20; //20
</script>

  ➤ Example 6.2: let variable re-declaration in same scope;

Variables defined with let keyword can't be redeclared in the same scope.

<script>
    let a = 10; 
    let a = 20; //SyntaxError: Identifier 'a' has already been declared
</script>