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.
<script>
var varVariable = “I am var variable.”;
let letVariable = “I am let variable.”;
//Say, here we have two variables declared. let us see what output it actually gives you.
console.log(window.varVariable); //=> I am var variable.
console.log(window.letVariable); //=> undefined
</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>