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;

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.