postImage

Tutorial: Javascript Let And Const

blogImage

By Emmanuel Chinonso

Web Developer

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).

Contrast Bootstrap UI Kit

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:**

1var carName = 'Volvo';
2
3// code here can use carName
4
5function myFunction() {
6 // code here can also use carName
7}

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:

1// code here can NOT use carName
2function myFunction() {
3 var carName = 'Volvo';
4 // code here CAN use carName
5}
6// 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:

1{
2 let x = 2;
3}
4// 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:

1var x = 10;
2// Here x is 10
3{
4 var x = 2;
5 // Here x is 2
6}
7// 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:

1var x = 10;
2// Here x is 10
3{
4 let x = 2;
5 // Here x is 2
6}
7// Here x is 10

Loop Scope

Using var in a loop:

Code:

1var i = 5;
2for (var i = 0; i < 10; i++) {
3 // some statements
4}
5// Here i is 10

Using let in a loop:

Code:

1let i = 5;
2for (let i = 0; i < 10; i++) {
3 // some statements
4}
5// 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:

1carName = 'Volvo';
2alert(carName);
3var 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:

1carName = 'Volvo';
2let carName;

JavaScript Const: "Const" variables behave similarly to let variables, with the exception that they cannot be reassigned:

Code:

1const PI = 3.141592653589793;
2PI = 3.14; // This will give an error
3PI = 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:

1var x = 10;
2// Here x is 10
3{
4 const x = 2;
5 // Here x is 2
6}
7// Here x is 10

Assigned when Declared: When declaring const variables in JavaScript, they must be given a value:

Incorrect code

Code:

1const PI;
2PI = 3.14159265359;

Correct code

Code:

1const 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:

1const PI = 3.141592653589793;
2PI = 3.14; // This will give an error
3PI = 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:

1// You can create a const object:
2const car = { type: 'Fiat', model: '500', color: 'white' };
3// You can change a property:
4car.color = 'red';
5
6// You can add a property:
7car.owner = 'Johnson';

Code:

1Const car = {type:"Fiat", model:"500", color:"white"};
2car = {type:"Volvo", model:"EX60", color:"red"}; // ERROR

A constant array can also have its elements changed, but it cannot be reassigned.

Code:

1// You can create a constant array:
2const cars = ['Saab', 'Volvo', 'BMW'];
3
4// You can change an element:
5cars[0] = 'Toyota';
6
7// You can add an element:
8cars.push('Audi');

Wrong code

Code:

1const cars = ['Saab', 'Volvo', 'BMW'];
2cars = ['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:

1var x = 2; // Allowed
2const x = 2; // Not allowed
3{
4 let x = 2; // Allowed
5 const x = 2; // Not allowed
6}

It's not possible to redeclare or reassign an existing const variable in the same scope or block:

Code:

1const x = 2; // Allowed
2const x = 3; // Not allowed
3x = 3; // Not allowed
4var x = 3; // Not allowed
5let x = 3; // Not allowed
6
7{
8 const x = 2; // Allowed
9 const x = 3; // Not allowed
10 x = 3; // Not allowed
11 var x = 3; // Not allowed
12 let x = 3; // Not allowed
13}

It is permissible to redeclare a variable with const, in a different scope, or in a different block:

Code:

1const x = 2; // Allowed
2{
3 const x = 3; // Allowed
4}
5{
6 const x = 4; // Allowed
7}

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:

1carName = 'Volvo';
2alert(carName);
3var 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:

1carName = "Volvo";
2const carName;

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...