Detailed analysis of the advantages of using let to declare variables

This article brings you relevant knowledge about javascript, which mainly introduces the benefits of using let to declare variables. ES6 not only introduces the let keyword to solve the problem of variable declaration, but also The concept of block-level scope is introduced. Let’s take a look at it. I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end】

Use Let to declare variables

ES6 not only introduces the let keyword to solve the problem of variable declaration, but also introduces the concept of block-level scope.

Block-level scope:

When the code is executed and encounters curly braces{<!-- -->, a block-level scope and curly braces will be created }End, destroy the block-level scope.

   let a = 123;//全局作用域定义
   
   {
   	let a = 456;//然后定义块级作用域
   	console.log(a)//使用的时块级作用域中的a
   }
   console.log(a)//使用的全局作用域中的a

有了块级作用域之后它的使用范围跟函数一样被限制在了里面
这样更符合常规语言的逻辑，几乎所有的语言都是这样的，但是因为JS以前有变量提升导致了以前很混乱
现在有了"let"之后有效的改善了这样的局面

Global variables are mounted to global objects: global object pollution problem

let a = 123;console.log(a)//输出undefined

And if you use var to declare the assignment, it will be mounted to the global
This is just such a change for us No one can refuse to use Let

Allows repeated variable declarations: problems that cause data to be overwritten

let Declaring variables does not allow repeated declarations within the current scope

Variable promotion? : Weird data access closure problem

• Using let will not have variable promotion, so it cannot be used before defining let
• In terms of underlying implementation, the variable declared by let will actually be improved. However, after the promotion, it will be placed in the "temporary dead zone". If the accessed variable is in the temporary dead zone, an error will be reportedCannot access 'a' before initialization
• When the code runs to the declaration statement of the variable, it will be removed from the temporary dead zone

In the loop let will be treated specially

• The loop variable declared with let in the loop will be treated specially, each time Each time you enter the loop body, a new scope will be opened and the loop variable will be bound to the scope (each loop uses a brand new loop variable)
• Use in the looplet Declare loop variables, which will be destroyed after the loop ends

//这时我绑定了10个按钮让咋们在点击时输出对应的ifor (let i = 1; i 

• When using let, it will not be in the same place as var The same i has been modified in the same scope
  For details, see the shortcomings of using var to declare variables in JS that I wrote, which details the problems that may occur during output

• At this time let will create 10 scopes that appear to use the same i but actually use different i.

The example is as follows:

Why should we use let to replace var?

Because var does not have block-level scope restrictions, it is easy to cause variable pollution.

Let’s take a look at some of the problems that would arise when there was no block-level scope before let appeared.

1. Variable scope

2. No block-level scope The if statement block of the domain

This seems like nothing, but what if our scenario is like this?

Why is this? We only modified the name outside the if statement block, but it affected the output of the entire if statement.

3. For block without block-level scope

We can see No matter which button we click, the output is that the fifth button was clicked. Why is this? Because this is related to our use of var definition in the loop body.

Before there was no block-level scope, we solved this embarrassment through closures, because closures have their own function scope.

After using let, we only need to make slight changes and change the var in the loop body to let, so that we can avoid using the difficult syntax of closure.

Let implementation principle in the loop body:

You may ask, What was it like before using var?

Before ES5, if and for did not have the concept of block-level scope, so in many specific application scenarios, we had to rely on the function scope. To solve the problem of using external variables.

In the ES6 family, let and (const) are added, so that if and for statements have block-level scope (the original var does not have the concept of block-level scope).

The emergence of let, through the above examples, can be said to have made up for the existing shortcomings of var. We can regard let as a perfect var, or as a modification, upgrade, and optimization of var.

[Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of Detailed analysis of the advantages of using let to declare variables. For more information, please follow other related articles on the PHP Chinese website!