JavaScript - let Statement

What is JavaScript let statement?

The JavaScriptletstatement is used to declare a variable. With theletstatement, we can declare a variable that isblock-scoped. This mean a variable declared with let is only accessible within the block of code in which it is defined.

Theletkeyword was introduced in the ES6 (2015) version of JavaScript. It is an alternative to thevarkeyword.

The main reason behind introducing theletkeyword is to improve the scoping behaviors of variables and the safety of the code.

Variable Declaration with let statement

Following is the syntax to declare a variable with let statement −

let var_name = value

Let’s have a look at some examples for variable declaration with let.

let name = "John";
let age = 35;
let x = true;

Usingletstatement we can declare a variable of any datatypes, e.g., numeric, string, boolean, etc.

JavaScript Block Scope vs. Function Scope

The scope of the variable declared with theletkeyword is a block-scope. It means if you define the variable with the let keyword in the specific block, you can access the variable inside that particular block only, and if you try to access the variable outside the block, it raises an error like ‘variable is not defined’.

{
   let x = "John";
}
//here x can't be accessed

Thevarkeyword has a function scope, meaning if you define the variable using the var keyword in any function block, you can access it throughout the function.

function foo(){
   if (true){
      let x = 5
      var y = 10
   }
   // here x can't be accessed while y is accessible
}

Sometimes, we require to define the variable with the same name in different blocks of one function. Conflicts may occur with the variable value if they use the var keyword.

Example

In the example below, we have defined the variablexusing the let keyword and variableyusing the var keyword. Also, we have assigned 10 and 20 values to both variables, respectively.

We defined the test() function, redeclared the x and y variables inside it, and initialized them with 50 and 100 values, respectively. We print variable values inside the function, and it prints the 50 and 100 as it gives first preference to the local variables over global variables.

Example

In the example below, we initialized the bool variable with a ‘true’ value. After that, we declared the variables x and y using the let and var keywords in the ‘if’ block.

We print the value of the x and y variable inside the ‘if’ block. We can’t access the ‘x’ variable outside the ‘if’ block as it has blocked scope, but we can access variable y outside the ‘if’ block and inside the function block as it has function scope.

In this way, the let keyword is used to improve the scoping behaviors of the code.

Redeclaring Variables in JavaScript

You can’t redeclare the variables declared with the let keyword in the same block. However, you can declare the variables with the same name into the different blocks with the same function.

Example

In the example below, you can observe that variables declared with the let keyword cant be redeclared in the same block, but variables declared with the var keyword can be redeclared in the same block.

The code prints the value of the newly declared variable in the output.

Variable Hoisting

Thehoistingbehaviors of JavaScript move the declaration of the variables at the top of the code. Theletkeyword doesn’t support hoisting, but thevarkeyword supports the hosting.

Example

In the example below, you can see that we can initialize and print the value of the variablenbefore its declaration as it is declared using thevarkeyword.

You can uncomment the code using theletkeyword and check the error in the web console, as it doesn’t support hoisting.