JavaScript let keyword

In JavaScript, let is a keyword that is used to declare a block scoped variable. Usually, the var keyword is used to declare a variable in JavaScript which is treated as a normal variable, but the variables declared using the let keyword are block scoped.

JavaScript provides three ways to declare a variable: var, const, and let. These keywords deliver different functionality from each other. Var is a traditional method to declare a variable while const and let keyword was introduced later by the ES2015/ES6, which creae block scope variable.

Earlier, there were only two types of variable scopes in JavaScript: Global scope and Function scope.

Syntax of let

Here is the syntax to declare a variable using the let keyword:

Examples

Below are various examples discussed to help you understand how the let variable works inside and outside the block or function. These are the simple examples to use the variable declared using the let in different scopes.

Example 1: Global Scope

Here, you can see that a variable declared in main body or outside the function has global scope. So, it can be accessed from anywhere inside or outside the function.

Copy Code

Output

Outside the function x = 20
Inside the function x = 20 

Screenshot

Here is the web output for the above program:

Example 2: Function Scope

In this example, you will see that a variable declared inside the function that only has function scope. So, it is not allowed to access outside the function.

Copy Code

Output

Here, you will see that only the first statement that lies inside the function has been printed and second statement has not been displayed. It treated num is undefined outside the function scope.

Inside the function num = 15

Screenshot

Here is the web output for the above program:

Console View

See the console output for the above program to know the problem why the second statement does not print. In your browser, click on the three dots and go to the More tool -> Developer tool -> Console, and see the error in console as shown below:

UncaughtReferenceError: num is not defined

Example 3: Block Scope

In this example, you will see that a variable declared inside the block cannot be used outside the block because it has block scope.

Copy Code

Output

Here, only the block statement will display the value of the num variable declared using let keyword. Second statement will not display the value of num variable.

Inside the function num = 30

Screenshot

Here is the web output for the above program:

Console View

See the console output for the above program to know the problem why the second statement does not print. In your browser, click on the three dots and go to the More tool -> Developer tool -> Console, and see the error in console as shown below:

UncaughtReferenceError: num is not defined

Example 4: Redeclaring variable in different blocks

In this example, we will a declare variable with the same name in different blocks and display its value.

Copy Code

Output

On executing the above code, this will generate an error because redeclaration is not allowed using let variable. So, it will not display any output on the browser.

Screenshot

Here is the blank web output for the above program:

Console View

If you see the console output, this will show the error generated on executing this program.

SyntaxError: redeclaration of let x
note: Previously declared at line 2, column 5  

How let is different from the var keyword?

In the below example, you can examine that the variable declared using the let and var keyword have different variable scope and power.

The key difference between let and var is their scopes. Var has global scope whereas let is block scope. Consider the below examples to understand the difference:

Variable Scope

In these examples, we will show you the variable scope for the variables declared using both var and let.

Var: Global Scope Example

Copy Code

Output

Value of x before the block: undefined
Value of x after the block: 28

Screenshot

See the web screenshot for the above program:

let: Block Scope Example

Copy Code

Output

Initial value of x: 30
Value of x inside the block: 37

Screenshot

See the web screenshot for the above program:

These above examples will show you how variables have different scopes inside and outside the block when declared using the var and let keyword.

Loop Scope

In these examples, we will show you the variable scope for the variables declared using both var and let.

let: Loop Scope Example

Copy Code

Output

Here, you will see that the initial value of i will display because redeclaration is not allowed using the let keyword.

Final value of x outside of the loop: 4

Screenshot

See the web screenshot for the above program:

var: Loop Scope Example

Copy Code

Output

Here, you will see that the updated value of i will display because redeclaration is allowed using var keyword.

Final value of x outside of the loop: 10

Screenshot

See the web screenshot for the above program:

Redeclaration

See the below examples to understand which variable declaration is allowed and which one is not. The variable declaration is allowed anywhere in the program using var.

Example 1

Example 2

Example 3

Example 4