JavaScript let, var, and const are used for variable declaration. They differ in their scope and how they can be updated. var is function-scoped, while let and const are block-scoped.
let can be updated within its scope, while const cannot be updated or redeclared. It’s recommended to use const by default and only use let when you need to reassign the variable. var should only be used for legacy code or for global variable declaration.
var variables: are function-scoped or globally-scoped, depending on where they are declared. They can be updated and redeclared within their scope. If they are declared globally, they become properties of the global object (window in the browser, or global in Node.js).
function example() {
var x = 1;
if (true) {
var x = 2; // This will overwrite the previous declaration of x.
}
console.log(x); // Outputs 2.
}
let variables: can be updated within their scope, but not redeclared. If they are declared in a function, they are not properties of the global object.
function example() {
let x = 1;
if (true) {
let x = 2; // This creates a new x variable with block scope.
}
console.log(x); // Outputs 1.
}
const variables: cannot be updated or redeclared within their scope. If they are declared in a function, they are not properties of the global object. However, if the variable is an object or an array, its properties or elements can be updated.
const myObject = { a: 1 };
myObject.b = 2; // This is allowed and will update the myObject's properties.
const myArray = [1, 2, 3];
myArray.push(4); // This is allowed and will update the myArray's elements.
JavaScript let vs var vs const example
Simple example code that shows the difference between var, let, and const in JavaScript:
<!DOCTYPE html>
<html>
<body>
<script>
function example() {
var x = 1;
let y = 2;
const z = 3;
if (true) {
var x = 4;
let y = 5;
const z = 6;
console.log(x, y, z);
}
console.log(x, y, z);
}
example();
</script>
</body>
</html>
Output:
In this example, we have a function example() that declares three variables using var, let, and const. Inside an if statement, we update the value of x using var, create a new variable y using let, and create a new variable z using const. When we log the values inside the if statement, we can see that x, y, and z have been updated or redeclared within their block scope.
Outside the if statement, we log the values again and we can see that x has been updated to 4 because var is function-scoped, while y still has the original value of 2 because let is block-scoped. Similarly, z still has the original value of 3 because const is also block-scoped and cannot be updated.
Difference between var, let, and const keywords
| Feature | var | let | const |
|---|---|---|---|
| Scope | Function | Block | Block |
| Redeclaration | Allowed | Not allowed | Not allowed |
| Updateable | Yes | Yes | No |
| Hoisting | Yes | No | No |
| Global declaration | Yes | No | No |
| Property/element update | Yes | Yes | Yes |
it’s recommended to use const by default and only use let when you need to reassign the variable. var should only be used for legacy code or global variable declaration.
Comment if you have any doubts or suggestions on this JS basic comparison topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version