Easy to learn JavaScript-Part 1: Understanding the let statement and javascriptlet

Easy to learn JavaScript-Part 1: Understanding the let statement and javascriptlet

The let statement allows you to create block range local variables in JavaScript. Let statements are introduced in the ECMAScript 6 standard of JavaScript.

Before learning about let statements, we recommend that you first view the Ignite UI Based on the Infragistics jQuery library, which can help you write and run Web applications faster. You can use the Ignite UI of the JavaScript library to quickly solve complicated LOB requirements in HTML5, jQuery, Angular, React or ASP. net mvc. (You can download the free trial version of The Ignite UI here .)

Before ECMAScript 6, JavaScript has three types of scopes:

• Global range
• Function range
• Vocabulary

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

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();

Output from the above Code:

Image

In the above Code, we use the var statement to declare the variable x. Therefore, the range of variable x is the function range. The variable x in the if statement is the variable x created outside the if statement. Therefore, when you modify the value of x in the if statement block, all referenced values of x in the function are also modified.

To avoid this situation, you need to use the block-level range. The let statement allows you to create partial variables in the block range.

Modify the code snippet above 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 segment, we use the let statement to declare the range-level local variable x. Therefore, updating the value of variable x in the if statement does not affect the value of variable x outside the if statement.

Below is the output of the above Code:

Image

Unlike variables declared using function ranges (or global ranges), variables declared using let are block ranges: they only exist in the blocks they define.

Variable increase

Variables declared by let are upgraded to variables declared by var. Therefore, variables declared using let are not upgraded, which means that variables declared using let are not moved to the top of the execution context.

To better understand this, see the following code:

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

As the output, you will get the ReferenceError of the variable y, and use the let statement to declare the variable y. Variables declared using let are not promoted to the execution context.

Image Re-declare the variable

You cannot use let to re-declare a variable in the same function or block. In this case, a syntax error occurs. See the following code:

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

A syntax error occurs when running the above Code, as shown below:

Temporary image dead zone

Sometimes, variables declared with let may cause temporary dead time. In the following code, let x = x + 67 throws an x undefined exception.

This error occurs because the expression (x + 67) calculates the value of the local variable x in the if block range, rather than the value of the local variable x in the function range. Run the above Code and you will get an exception like this:

Image

You can fix the above error by moving the Declaration variable to the above line of the expression, as shown below:

Block-level range definition is one of the most important functions of any programming language. With the introduction of let statements in ECMAScript 6, JavaScript now has this function. Use the let statement to create a variable with a block scope. This can solve many problems, such as accidental modification of global range variables, local variables in closures, and help to write clearer code.

Join the study exchange group 569772982 to learn and exchange.