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