Easy JavaScript Part 1: Learn the “let” Statement

Dhananjay Kumar / Tuesday, July 18, 2017

Using the let statement, you can create Block scoped local variables in JavaScript. The let statement was introduced in the ECMAScript 6 standard of JavaScript.

Before you go ahead and learn about let, I recommend you to check out Infragistics jQuery based library Ignite UI, which helps you to write and run web applications faster. You can use the Ignite UI for JavaScript library to help quickly solve complex LOB requirements in HTML5, jQuery, Angular, React, or ASP.NET MVC. (You can download a free trial of Ignite UI here).

Before ECMAScript 6, JavaScript had three types of scoping:

Global scoping
Functional scoping
Lexical scoping

To explore let statement in detail, consider the code snippet given below:

function foo() {
     var x = 9;
     if (x > 5) {
         var x = 7;
         console.log("Value of x in if statement = " + x);
     }
     console.log("Value of x outside if statement = " + x);
 
 }
 
 foo();

You will get this output for the above code listing:

In the above listing, variable x is declared using the var statement. Hence, the scope of variable x is a function scope. Variable x inside the if statemnet is same variable x which was created outside the if statement. So, when you modify the value of variable x inside the if statement block, it modifies the value for all references of variable x in the function.

To avoid this, you need block-level scoping, and the let statement allows you to create a block-scoped local variable.

Let's modify the above code snippet and use the let statement to declare the variable:

function foo() {
     var x = 9;
     if (x > 5) {
         let x = 7;
         console.log("Value of x in if statement = " + x);
     }
     console.log("Value of x outside if statement = " + x);
 
 }
 
 foo();

In the above code snippet, you are declaring scope level local variable x using the let statement. Therefore updating value of variable x inside the if statement will not affect value of variable x outside the if statement.

This is the output you'll get for the above code:

Unlike variables declared with var that are function-scoped (or global-scoped), variables declared with let are block-scoped: they only exist in the block they are defined in.

Variable Hoisting with let

Hoisting of variables declared with let works differently than variables declared with var. Therefore, there is no variable hoisting for variables declared with let, which means variables declared with let do not move to the top of the execution context.

To understand this better, let's consider this code:

function foo() {
 
     console.log(x);
     console.log(y);
     var x = 9;
     let y = 67;
 
 }
 foo();

As output, you will get a ReferenceError for variable y, which is declared using the let statement. So, a variable declared using let does not hoist on top of the execution context.

Redeclaring Variables With let

You cannot redeclare a variable with let in the same function or block. Trying to do so will give you a syntax error. Consider this code listing:

function foo() {
 
     if(true){
         let x = 9;
         let x = 89; 
     }
 
 }
 foo();

Running the above code will give you a syntax error as shown here:

Temporal Dead Zone with let

Sometimes a variable declared with let causes a temporal dead zone. In the next code listing, let x=x+67 will throw the exception that x is not defined.

function foo() {
     var x = 9;
     if (true) {
         let x = x + 67;
         console.log(x);
     }
 
 }
 foo();

You will get this error because the expression (x+67) is evaluating to an if block-scoped local variable x, instead of a function-scoped local variable x. On running the above code, you will get this exception:

You can fix the above error by moving the declaring variable one line above the expression, as shown here:

function foo() {
     var x = 9;
     if (true) {
         let x; 
         x = x + 67;
         console.log(x);
     }
 
 }
 foo();

Block level scoping is one of the most important features of any programming language, and with the introduction of let statement in ECMAScript 6, now JavaScript has it. Using the let statement, you can create a variable, which has a lifetime scoped to a block. This solves many problems, such as accidental modification of global level scoped variables, local variable in a closure, and helps in writing cleaner code.

In the next post of this "Easy JavaScript" series, you will learn about rest parameters in JavaScript functions. You can learn in detail about these topics at the ECMA International site. Also, do not forget to check out Ignite UI, which you can use with HTML5, Angular, React, or ASP.NET MVC to create rich Internet applications.