What is Let in JavaScript?

The keyword let in Javascript is used to declare a variable that is block scoped in JavaScript. In JavaScript, the var keyword is typically used to declare a variable that is treated like any other variable, whereas variables declared using the let in JavaScript are block scoped.

Syntax

What are these Parameters?

xN: The declared variable or variables' names. Each identifier should be a valid JavaScript expression.

yN(Optional ): You can give any lawful JavaScript expression the initial value for any variable you declare.

Examples

The following examples will help you understand how the let variable operates both inside and outside of the block or function. These are simple examples of using variables declared with the let in various scopes.

Rules for Scoping Using Let in Javascript

Variables declared using let have scope in the block in which they are declared as well as any sub-blocks within it. Let is comparable to var in this regard. The main difference is that the scope of a var variable is the whole enclosing function:

let Unlike var does not generate a global object attribute at the peak level of programs and functions. As an illustration:

Global Scope

A variable declared in the main function or outside any function has a global scope. As a result, variables can be accessed from both inside and outside the function.

Function Scope

When a variable is declared inside the function that only has function scope. So, the variable is not allowed to access outside the function scope.

Block Scope

When a variable is declared inside the block then it cannot be accessed outside the block because it only has scope limited to that block. In the example given below the block statement will display the value of the num variable declared with the let keyword in this case. The value of the num variable will not be displayed in the second statement.

Redeclaring variables in different blocks

While a variable with the same name is declared in different blocks and shows its value, the code will raise an error since redeclaration is not permitted when using the let variable.

Redeclaring Variables in the same blocks

Redeclaration of the same variable within the scope of the same block or function causes a Syntax Error.

Because there is just one block, we may find issues with switch statements.

A block nested within a case clause, on the other hand, will create a new block-scoped lexical environment, which will not cause the redeclaration issues noted above.

Emulating private members

When working with constructors, the let bindings can be used to share one or more private members without utilizing closures:

The same privacy pattern with closures over local variables may be implemented using var, but it requires a function scope (usually an IIFE in the module pattern) rather than just a block scope as in the previous example.

Temporal Dead Zone (TDZ)

Let variables can't be read or written unless they're declared. If no initial value is mentioned when the variable is declared, it is set to undefined. A ReferenceError is thrown if the variable is accessed before the declaration.

From the beginning of the block until the declaration is finished, the variable is regarded to be in a "temporal dead zone" (TDZ).

The word "temporal" is used because the zone is determined by the order in which the code is executed (time) rather than the order in which the code is created (position). The code below, for example, works because, despite the fact that the function that uses the let variable appears before the variable is declared, the function is called outside of the temporal dead zone.

The Temporal Dead Zone (TDZ) And typeof

Using the typeof operator for a let variable in its TDZ will throw a ReferenceError:

This is not the same as using 'type of' for variables with undefined values:

The Temporal Dead Zone Combined With Lexical Scoping

The below code causes a ReferenceError:

Because the outer var x has a value, the if block is evaluated. This value, however, is not available within the block owing to lexical scoping: the identifier x within the if block is the let x. Because initialization of let x has not ended — it is still in the temporal dead zone — the expression (x + 12) throws a ReferenceError.

This trend can be confusing in the following case. The instruction let n of n.a is already inside the for loop's block's private scope. As a result, the identifier n.a is resolved to the a property of the n object, which is situated in the first section of the instruction itself (let n).

This is still in the TDZ i.e. temporal dead zone since its declaration statement has not been reached and finished. Use this JavaScript Formatter to format your code.

Let Hoisting

Variables declared using the var keyword are hoisted (initialized with undefined before the code is run), which means they are available even before they are declared:

Let variables aren't set until their definitions are evaluated. If you access them before they've been initialized, you'll get a ReferenceError. From the beginning of the block until the initialization is executed, the variable is said to be in "temporal dead zone.”

For more insight into hoisting, refer to this article- Hoisting In JavaScript

JavaScript Let and Global Object

Unlike var, let does not create a property on the global object at the top level:

JavaScript Let and Callback Function in a For Loop

The output should have been 0 to 4 to the console per second, as shown in the example. The output, however, is number 5 five times.

Because the variable is a global variable, this is what is happening. Its value is 5 after the loop. The callback functions reference the same variable I with the value 5 when they are submitted to the setTimeout method to run.

The allow keyword can be used to resolve this issue. Each loop iteration declares a new variable. To fix the problem, just replace the var keyword with the let keyword:

Difference between Using "let" and "var"

A variable defined using a var statement is known throughout the function from the beginning of the function. 

From the moment it is defined, a variable defined using a let statement is only known in the block in which it is defined. 

Browser Compatibility

Let is supported by the vast majority of modern browsers.

The following browsers are supported:

Explore Scaler Topics Javascript Tutorial and enhance your Javascript skills with Reading Tracks and Challenges.