JavaScript let and Const
Let and const are two essential new JavaScript keywords introduced in ES2015. In JavaScript, these two keywords provide Block Scope variables (and constants).
In ES2015, there were only two forms of scope in Global Scope and Function Scope.
Global Scope
Global variables (those defined outside of any function) have Global Scope. In a JavaScript program, global variables can be accessed from anywhere. The let keyword declares global variables that are not part of the window object.
\ ***Code:***
var carName = 'Volvo';
// code here can use carName
function myFunction() {
// code here can also use carName
}
Function Scope
Function Scope applies to variables specified locally (inside a function). Local variables are only accessible from within the function in which they were declared.
Code:
// code here can NOT use carName
function myFunction() {
var carName = 'Volvo';
// code here CAN use carName
}
// code here can NOT use carName
JavaScript Block Scope
Block Scope cannot be applied to variables specified with the var keyword. Variables specified within a block {} can be accessed from the outside.
Code:
{
let x = 2;
}
// x can NOT be used here
Redeclaring Variables
Using the var keyword to redeclare a variable can cause issues. When you redeclare a variable inside a block, you're also redeclaring it outside the block:
Code:
var x = 10;
// Here x is 10
{
var x = 2;
// Here x is 2
}
// Here x is 2
This difficulty can be solved by using the let keyword to redeclare a variable. If you redeclare a variable inside a block, it will not be redeclared outside the block:
Code:
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
Loop Scope
Using var in a loop:
Code:
var i = 5;
for (var i = 0; i < 10; i++) {
// some statements
}
// Here i is 10
Using let in a loop:
Code:
let i = 5;
for (let i = 0; i < 10; i++) {
// some statements
}
// Here i is 5
The variable declared in the loop redeclares the variable outside the loop in the first example, which is done with var. The variable declared in the loop is not redeclared outside the loop in the second example, because let is used. The I variable will only be visible within the loop if let is used to declare it.
Hoisting
Var variables are hoisted to the top and can be initialized at any time (for more information on hoisting, see our Hoisting Chapter). Meaning: Before the variable is declared, you can use it: This is okay
Code:
carName = 'Volvo';
alert(carName);
var carName;
Variables declared with let are hoisted to the top of the block but not initialized, which means that the block of code is aware of the variable but it cannot be used until it is declared. A ReferenceError will occur if you use a let variable before it has been declared. From the beginning of the block until it is declared, the variable is in a "temporal dead zone".
This will give referenceError
Code:
carName = 'Volvo';
let carName;
JavaScript Const:"Const" variables behave similarly to let variables, with the exception that they cannot be reassigned:
Code:
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error.
Block Scope
When it comes to Block Scope, declaring a variable with "const" is comparable to letting. In this example, the x defined inside the block differs from the x declared outside the block.
Code:
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
Assigned when Declared: When declaring const variables in JavaScript, they must be given a value:
Incorrect code
Code:
const PI;
PI = 3.14159265359;
Correct code
Code:
const PI = 3.14159265359;
The keyword const can be deceiving. It does not provide a constant value definition. It establishes a reference to a value that is constant. We can't change constant primitive values because of this, but we can change the characteristics of constant objects. We can't modify a primitive value that has been assigned to a constant:
Code:
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error
A constant object's properties can be changed. A constant object, on the other hand, cannot be reassigned.
Code:
// You can create a const object:
const car = { type: 'Fiat', model: '500', color: 'white' };
// You can change a property:
car.color = 'red';
// You can add a property:
car.owner = 'Johnson';
Code:
Const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"}; // ERROR
A constant array can also have its elements changed, but it cannot be reassigned.
Code:
// You can create a constant array:
const cars = ['Saab', 'Volvo', 'BMW'];
// You can change an element:
cars[0] = 'Toyota';
// You can add an element:
cars.push('Audi');
Wrong code
Code:
const cars = ['Saab', 'Volvo', 'BMW'];
cars = ['Toyota', 'Volvo', 'Audi']; // ERROR
It is not permitted to redeclare or reassign an existing var or let variable to const in the same scope or block:
Code:
var x = 2; // Allowed
const x = 2; // Not allowed
{
let x = 2; // Allowed
const x = 2; // Not allowed
}
It's not possible to redeclare or reassign an existing const variable in the same scope or block:
Code:
const x = 2; // Allowed
const x = 3; // Not allowed
x = 3; // Not allowed
var x = 3; // Not allowed
let x = 3; // Not allowed
{
const x = 2; // Allowed
const x = 3; // Not allowed
x = 3; // Not allowed
var x = 3; // Not allowed
let x = 3; // Not allowed
}
It is permissible to redeclare a variable with const, in a different scope, or in a different block:
Code:
const x = 2; // Allowed
{
const x = 3; // Allowed
}
{
const x = 4; // Allowed
}
Hoisting
Variables specified using var are pushed to the top of the stack and can be initialized at any moment. Before it is declared, you can utilize the variable: This is alright
Code:
carName = 'Volvo';
alert(carName);
var carName;
Although the variable is recognized by the block of code, it cannot be used until it is defined. From the start of the block until its declaration, the variable is in a "temporal dead zone." It is a syntactic error to use a const variable before it is declared, hence the code will not run.
This code cannot be executed.
Code:
carName = "Volvo";
const carName;
Resources
You may find the following resources useful:
Top comments (0)