In JavaScript, the keyword let serves the purpose of declaring a variable that is limited to the scope of a block. Typically, the var keyword is employed for variable declaration, which results in the creation of a variable that behaves as a standard variable. In contrast, variables that are declared with the let keyword are confined to the block scope.
JavaScript offers three methods for declaring variables: var, const, and let. Each of these keywords serves a distinct purpose. The var keyword has been a conventional way to declare variables, while const and let were introduced in ES2015/ES6, allowing for the creation of variables with block scope.
Previously, JavaScript had just two categories of variable scopes: Global scope and Function scope.
Syntax of let
The syntax for declaring a variable with the let keyword is as follows:
let variable_name;
Examples
Presented below are several examples that illustrate how the let variable operates both within and beyond the confines of a block or function. These straightforward examples demonstrate the utilization of variables declared with let in various scopes.
Example 1: Global Scope
In this context, it is evident that a variable defined in the main section or external to a function possesses global scope. Consequently, it is accessible from any location, whether inside or outside the function.
Example
let x =20;
console.log("Outside the function x = " + x);
function show(){
console.log("Inside the function x = " + x);
}
show();
Output
Outside the function x = 20
Inside the function x = 20
Example 2: Function Scope
In this illustration, you will observe that a variable defined within the function possesses only function scope. Consequently, it cannot be accessed from outside the function.
Example
function show(){
let num = 15;
console.log("Inside the function num = " + num);
}
show();
console.log("Outside the function num = " + num);
Output
Inside the function num = 15
ReferenceError: num is not defined
Example 3: Block Scope
In this instance, you will observe that a variable defined within the block cannot be accessed outside of that block due to its block-level scope.
Example
{
let num = 30;
console.log("Inside the function num = " + num);
}
console.log("Outside the function num = " + num);
Output
Inside the function num = 30
ReferenceError: num is not defined
Example 4: Redeclaring variable in different blocks
In this illustration, we will declare a variable with an identical name across various scopes and present its value.
Example
let num = 23;
{
let num = 15;
console.log("num inside the function = " + num);
}
let num = 89;
console.log("num outside the function = " + num);
Output
When running the code provided above, an error will occur due to the fact that redeclaring a variable with the let keyword is prohibited. Consequently, no output will be rendered in the browser.
How let is different from the var keyword?
In the following example, you will observe that variables declared with the let and var keywords exhibit distinct scopes and capabilities.
The primary distinction between let and var lies in their respective scopes. var possesses a global scope, while let is confined to a block scope. Examine the examples provided below to grasp this difference:
Variable Scope
In the following examples, we will demonstrate the scope of variables that are declared with both var and let.
Var: Global Scope Example
Example
function checkGlobalScope() {
// x is declared yet so not available here
console.log('Value of x before the block: ' + x);
{
var x = 20;
xx = x + 8;
}
// x is still known here and has a value.
console.log('Value of x after the block: ' + x);
}
//x is declared inside the function, so not available here
checkGlobalScope()
Output
Value of x before the block: undefined
Value of x after the block: 28
let: Block Scope Example
Example
function checkBlockScope() {
{
let x = 30;
// initial value of x will print here
console.log('Initial value of x: ' + x);
xx = x + 7;
// updated value of x will print
console.log('Value of x inside the block: ' + x);
}
// the value of x will not print here
console.log('Value of x outside the block: ' + x);
}
checkBlockScope()
Output
Initial value of x: 30
Value of x inside the block: 37
The examples provided earlier illustrate how variables exhibit varying scopes both within and outside of a block, depending on whether they are declared using the var keyword or the let keyword.
Loop Scope
In the following examples, we will demonstrate the scope of variables that are defined with both var and let.
let: Loop Scope Example
Example
function checkLoopScope() {
let i = 4;
for (let i = 0; i < 10; i++) {
// some statements
}
// x is still known here and has a value.
console.log('Final value of x outside of the loop: ' + i);
}
checkLoopScope()
Output
In this context, you will observe that the starting value of i will be shown, as redeclaring a variable with the let keyword is not permitted.
Final value of x outside of the loop: 4
var: Loop Scope Example
Example
function checkLoopScope() {
var i = 4;
for (var i = 0; i < 10; i++) {
// some statements
}
// updated value of i will display
console.log('Final value of x outside of the loop: ' + i);
}
checkLoopScope()
Output
In this instance, you will observe that the modified value of i will be shown, as redeclaring a variable is permissible when utilizing the var keyword.
Final value of x outside of the loop: 10
Redeclaration
Refer to the examples below to grasp which variable declarations are permissible and which are not. The use of the var keyword allows for variable declarations to be made at any location within the program.
Example 1
var num = 6;
//num is 6 here
var num = 3;
//num is 3 here
Example 2
var num = 6;
let num = 2; //redeclaration is not allowed using let
Example 3
let num = 6; // allowed
let num = 2; // not allowed
Example 4
let num = 61; // allowed
{
let num = 29; // allowed
}
{
let num = 37; // allowed
}