JavaScript let

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

Output

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

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.

Output

Inside the function num = 15
ReferenceError: 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.

Output

Inside the function num = 30
ReferenceError: 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.

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.

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

Output

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

let: Block Scope Example

Output

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

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

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

var: Loop Scope Example

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

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