In JavaScript, the keywords let and var serve the purpose of declaring new variables. This article will thoroughly explore the distinctions between let and var.
In the early days of JavaScript, the var keyword was employed to declare variables within a program. However, the use of the var keyword led to a notable problem: it is scoped to the entire function or global context. Consequently, if a variable is declared within a block scope, this limitation creates challenges when attempting to redeclare that variable outside of the block.
With the introduction of ES6 in 2015, two additional keywords, namely let and const, were also brought into the JavaScript language. Both let and var serve the purpose of declaring variables; however, the primary distinction between the let and var keywords lies in their scope.
let keyword
The let keyword possesses a block-scoped range. Redeclaring a variable that has been defined with the let keyword is not permitted. It is necessary to declare the variable prior to its usage; failing to do so will result in an error being displayed by the program.
Demo 1:
We will attempt to output the variable num prior to its declaration.
Code:
console.log(num);
let num = 15;
Output:
The error occurs when we attempt to output the variable num prior to its declaration.
ReferenceError: Cannot access 'num' before initialization
Demo 2:
We will display the variable num following its declaration.
Code:
let num = 15;
console.log(num);
Output:
We can observe that the value of the variable num is displayed on the console.
Demo 3:
We are going to define a function named text and initialize a variable called y. Within the scope of this function, we will set up an if statement and declare another variable, z, inside the function. Subsequently, we will output the contents held in both the variables y and z.
Code:
function text() {
let y = 'Today is an awesome';
// variable b cannot be used here
if(y == 'Today is an awesome'){
// variable b can be used here
let z = 'day.';
console.log(y + ' ' + z);
}
console.log(y + ' ' + z); // error
}
text();
Output:
It is evident that the output appears in the console since we utilized the let keyword within the if-block, and the variables y and z were accessed solely within that same if block.
When we attempted to output the variables y and z from outside the if-block, an error was displayed.
Today is an awesome day.
ReferenceError: z is not defined
Demo 4:
We will modify the color of the heading upon clicking the button. The color of the heading will be stored utilizing the let keyword.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Changing color of h1 utilizing let keyword </title>
</head>
<body style="background-color: grey;">
<h1 id="let" style="color: white;">JTP</h1>
<button id="btn" onclick="color()">Start</button>
<script>
function color() {
setInterval(function() {
if (document.getElementById('let').style.color == 'white') {
let col = 'black';
} else {
col = 'white';
}
// setting value of color utilizing the let keyword
document.getElementById('let').style.color = col;
}, 1000);
}
</script>
</body>
</html>
Output:
The reason the color of the h1 heading remains unchanged is that the scope of the let keyword is confined to a block, and we attempted to access it beyond the boundaries of the function block.
var keyword
The scope of the var keyword is function-scoped.
Demo 1:
We will attempt to output the variable fruit prior to its declaration.
Code:
console.log(fruit);
var fruit = "mango";
Output:
It is evident that the code has produced an undefined result for the variable named fruit.
undefined
Demo 2:
We will display the value of the variable fruit following its declaration.
Code:
var fruit = "mango";
console.log(fruit);
Output:
It is evident that the program has produced the specified value for the fruit.
Demo 3:
We are going to define a function in which we will declare a variable named x. Subsequently, we will output the content that is held within the variable x.
Code:
function greet() {
var x = 'hello sir';
console.log(x);
}
greet();
Output:
It is evident that the message appears on the console.
hello sir
Demo 4:
We will modify the color of the heading upon the button click. To achieve this, we will utilize the var keyword to hold the color value of the heading.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Changing color of h1 utilizing var keyword</title>
</head>
<body style="background-color: grey;">
<h1 id="var" style="color: white;">JTP</h1>
<button id="btn" onclick="colour()">Start</button>
<script>
function colour() {
setInterval(function() {
if (document.getElementById('var').style.color == 'white')
var col = 'red';
else
col = 'white';
// setting value of color utilizing var keyword
document.getElementById('var').style.color = col;
}, 1000);
}
</script>
</body>
</html>
Output:
The hue of the h1 heading alters due to the fact that the var keyword operates within function scope. Consequently, when we attempted to reference the var keyword beyond the confines of the function block, the h1 color transitioned to red.
Before changing color of heading h1 :
After changing color of heading h1:
let vs var
| let | var |
|---|---|
| It was introduced in ES6 in 2015. | It was introduced at the beginning of JavaScript language. |
| It is a block-scoped keyword. | It is a function-scoped keyword. |
| It can be accessed within the block in which it is declared. | It can be accessed within the function in which it is declared. |
| It does not permit to redeclare variables. | It permits to redeclare variables. |
| Hoisting can happen in let. | Hoisting can happen in var. |
Conclusion:
In this article, we have explored the distinction between let and var in JavaScript. Both the let and var keywords serve the purpose of declaring variables within JavaScript; however, the primary difference lies in their scope. The let keyword is confined to the block in which it is defined, while the var keyword is limited to the function scope.