Difference between let, var and const with example
Today we will let you know the difference between let, var and const with example. Everyone knows about the const and var but in this article we will show you the example which will help you to understand about the let, var and const.
Difference between let, var and const with example, Var, let and const- what’s the difference?, difference between let and var and const in javascript, js difference between let and var and const in typescript.
Checkout more articles on JavaScript
var is a global scope variable where let is a block scope variable.
Let’s take an example of let and var for different types of cases. You can check it via JS Bin
Difference between let and var
1. Outside of a function
When you declare a variable using var and let outside of a function then var will create a property in the global object whereas let don’t create a property in global object.
1 2 3 4 5 6 7 8 | var abc = 10; let xyz = 20; console.log(abc); // 10 console.log(xyz); // 20 console.log(this.abc); // 10 console.log(this.xyz); // undefined |
2. Inside a function
Let’s declare the variables in function using var and let. When you try to access that variable outside of the function then it will throw an error.
1 2 3 4 5 6 7 8 9 10 11 12 | function insideFunc() { var abc = 10; let xyz = 20; console.log(abc); // 10 console.log(xyz); // 20 }; insideFunc(); console.log(abc); // ReferenceError: abc is not defined console.log(xyz); // ReferenceError: xyz is not defined |
3. Inside a block
If you declared the variable within the block then only let variable can’t be accessed outside that block.
1 2 3 4 5 6 7 8 9 10 | { var abc = 10; let xyz = 20; console.log(abc); // 10 console.log(xyz); // 20 } console.log(abc); // 10 console.log(xyz); // ReferenceError: xyz is not defined |
4. Loop
When you define the variables in loop and try to access it then let variable will throw an error.
1 2 3 4 5 6 7 8 9 10 11 | for (var a = 0; a < 10; a++) { var b = a * 2; } console.log(a); // 3 console.log(b); // 4 for (let x = 0; x < 10; x++) { let y = x * 2; } console.log(x); // ReferenceError: x is not defined console.log(y); // ReferenceError: y is not defined |
5. Loop with closure
Let’s take an example with setTimeout and try to print log of the variables.
1 2 3 4 5 6 7 8 9 10 | for (var a = 0; a < 5; a++) { setTimeout(() => console.log(a), 0); } // Output: 5 5 5 5 5 for (let x = 0; x < 5; x++) { setTimeout(() => console.log(x), 0); } // Output: 0 1 2 3 4 |
Based on the logs we can say that it will be safe to use let for loops with closure.
6. Redeclaration
While you work with the strict mode then re-declaring the variable with let will prompt the error.
1 2 3 4 5 6 7 | 'use strict'; var abc = 10; var abc = 20; // Working fine. 'abc' is replaced 'use strict'; let xyz = 10; let xyz = 20; // SyntaxError: Identifier 'xyz' has already been declared |
Const
const is also used as a block scope variable. There are two things that are different in const variables.
1. Can’t be re-assign
If you are declaring the variable using const then you can’t be re-assigned it.
1 2 | const a = 10; a = 20; // TypeError: Assignment to constant variable |
Note: While you are working with object/array then you can assign a value to the property of the variable but you can not assign a value to the variable.
1 2 3 4 5 6 | const abc = {}; abc.x = 10; console.log(abc.x); // 10 const abc = {}; abc = {x: 10}; // TypeError: Assignment to constant variable |
2. Required Initializer
You must specify a value while declaring a variable using const.
1 | const abc; // SyntaxError: Missing initializer in const declaration |
Check out more article on JavaScript for React.
Thank you for reading. Happy Coding!
