Variable Declaration with `let` and `const` in JavaScript
In JavaScript, traditionally, all types of data were declared using the `var` keyword. Due to its high-level nature, you don’t need to specify whether the data type is an integer, character, or string; JavaScript determines it automatically. By using `var`, you can declare variables without hassle.
However, ES6 introduced two new keywords: `let` and `const`. These keywords do not have any relationship with data types, just like `var`. You can use them to declare any type of data. The main difference lies in their behaviour.
Firstly, `let` is somewhat similar to `var`. However, `const` is a bit different. For instance, you can declare a variable with `var` and change its value later, which is also fully possible with `let`.
#### ES5 Variable Declaration with `var` and Changing Value
“`javascript
var a = ‘Zonayed Ahmed’;
console.log(‘My name is: ‘ + a);
a = ‘Zawad Ahmed’;
console.log(‘Now the name is: ‘ + a);
“`
**Output:**
“`
My name is: Zonayed Ahmed
Now the name is: Zawad Ahmed
“`
#### The Same Operation with `let`
“`javascript
let a6 = ‘Zonayed Ahmed’;
console.log(‘My name is: ‘ + a6);
a6 = ‘Zawad Ahmed’;
console.log(‘Now the name is: ‘ + a6);
“`
**Output:**
“`
My name is: Zonayed Ahmed
Now the name is: Zawad Ahmed
“`
#### `const` is Different
Once you declare something with `const`, you cannot change its value. Trying to do so will result in an error. Here’s the same example using `const`:
“`javascript
const b6 = ‘Zonayed Ahmed’;
console.log(‘My name is: ‘ + b6);
b6 = ‘Zawad Ahmed’; // This line will cause an error
console.log(‘Now the name is: ‘ + b6);
“`
**Output:**
“`
My name is: Zonayed Ahmed
Uncaught TypeError: Assignment to constant variable.
“`
This means you cannot use assignment with variables declared with `const`.
### Redeclaration of Variables
With `var`, you can redeclare a variable as many times as you want. But with `let` and `const`, you cannot redeclare a variable.
“`javascript
const b6 = ‘Want to declare again’; // Error
let b6 = ‘Want to declare again using let’; // Error
var b6 = ‘Want to declare again using var’; // Error
“`
**Errors:**
“`
Uncaught SyntaxError: Identifier ‘b6’ has already been declared
“`
### Scope Difference
`var` maintains function scope, while `let` and `const` maintain block scope.
#### Example with `var`:
“`javascript
function es5var() {
if (true) {
var a = 5;
}
console.log(‘Value: ‘ + a);
}
es5var();
“`
**Output:**
“`
Value: 5
“`
#### Example with `let`:
“`javascript
function es6var() {
if (true) {
let a = 6;
}
console.log(‘Value: ‘ + a); // Error
}
es6var();
“`
**Output:**
“`
Uncaught ReferenceError: a is not defined
“`
The same applies to `const`. Variables declared inside an `if` block are only accessible within that block.
### Hoisting
Variables declared with `var` can be used before they are declared due to hoisting:
“`javascript
console.log(aVar); // undefined
var aVar = ‘I am defined here’;
“`
**Output:**
“`
undefined
“`
But with `let` or `const`, accessing the variable before declaration will result in an error due to the Temporal Dead Zone:
“`javascript
console.log(varWith6); // Error
const varWith6 = ‘I am defined here’;
“`
**Output:**
“`
Uncaught ReferenceError: varWith6 is not defined
“`
### Example Program with `var` and `let`:
#### Using `var`:
“`javascript
var i = 13;
for (var i = 0; i < 5; i++) {
console.log(i);
}
console.log(‘Value: ‘ + i);
“`
**Output:**
“`
0
1
2
3
4
Value: 5
“`
#### Using `let`:
“`javascript
let i = 13;
for (let i = 0; i < 5; i++) {
console.log(i);
}
console.log(‘Value: ‘ + i);
“`
**Output:**
“`
0
1
2
3
4
Value: 13
“`
In this case, the `let` keyword ensures that the loop variable `i` is scoped within the loop block, whereas `var` does not.
### Precaution While Practising with `let` and `const`
While practising with `let` and `const` in the console, if you declare a variable with the same name more than once, you’ll encounter an error. To avoid this, use different variable names, reload the browser, or restart your Node.js REPL session.
By understanding these differences, you can make better use of `let` and `const` in your JavaScript programming.
Post Comment