Parsing the relationship between JavaScript loops and scopes (with code)

Source: Internet
Author: User
We often use JavaScript in our work, and he has a close relationship with our work. But JavaScript has a feature that may cause headaches for developers, which are related to their loops and scopes, and then talk about their relationship.

As an example:

Const OPERATIONS = []for (var i = 0; i < 5; i++) {  Operations.push (() = {    Console.log (i)  })}for (const Operation of Operations) {  operation ()}

It basically loops 5 times and adds a function to the operations array. This function can print out the index value of the cyclic variable i.
The expected result after running these functions should be:
0 1 2) 3 4

But what actually happens is this:

5 5 5) 5 5

Why is this happening? Because Var is used. Because the Var variable is promoted, the above code is equivalent to

var i;const operations = []for (i = 0; i < 5; i++) {  Operations.push (() = {    Console.log (i)  })}for (cons T operation of Operations) {  operation ()}

Therefore, in the for-of loop, I is still visible, it is equal to 5, and each time I is involved in the function, this value will be used.
So what should we do to make it what we think it is?
The simplest scenario is to declare with let. As described in ES2015, they are a great help to avoid some strange questions about using Var declarations.
It is simple to turn Var into a let in the loop variable, which works well:

Const OPERATIONS = []for (Let i = 0; i < 5; i++) {  Operations.push (() = {    Console.log (i)  })}for (const Operation of Operations) {  operation ()}

Here is the output:

0 1 2) 3 4

How does this work? This is because each time the loop repeats, I is recreated, and when each function adds a operations array, it can get the I of itself.
Remember that you cannot use const in this case, because this causes the for in the second loop to attempt to assign a new value to the error.
Another very common solution to this problem is to use the PRE-ES6 code, which is called an instant call function expression (iife).
In this case, you can wrap the entire function and bind I to it. From this way, you are creating a function that can execute immediately, and you return from it with a new function. So we can execute it later.

Const OPERATIONS = []for (var i = 0; i < 5; i++) {  Operations.push ((j) = {    return () = Console.log (j) c6/>}) (i))}for (const operation of Operations) {  operation ()}
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.