What is the block scope of ES6 in the for-while statement?

Source: Internet
Author: User

In the ES6 new fast-scope concept (C language, as C-language JS, of course, should be added), is very good understanding.

{let    i;} Console.log (i); // i am not defined

Use the new scope in the code block.

The problem is that the FOR statement

Let arr=[];  for (Let i=0;i<5;i++) {    arr[i]=function() {        console.log (i);    };}

Many of the explanations do not specifically describe how the scope of the work is seen, and it seems to be a natural thing.

However, for the previous C did not focus on learning, the real will be similar to the php,javascript of the children of the non-block scope to feel puzzled.

My error Understanding 1:

Let arr = [];(function() {// scope directly contains the entire for loop? Wrong for     (var i = 0; i < 5; i++) {        function  () {            CONSOLE.L OG (i);}        ;}    ) ();

My Error Understanding 2:

Let arr = [];  for (var i = 0; i < 5; i++) {    (function () {// scope contains a single loop?) Wrong        function  () {            console.log (i);        };    }) ();}

The test results show that their understanding is wrong, when looking for information, here is a pen has been taken (perhaps because the authors have used a block-scoped bar).

So think Babel since is ES6 turn ES5, understand is correct, then can find it to help.

method, using the Babel transcoding to deepen the understanding of the characteristics,

Direct online transcoding

Before transcoding:

Let arr=[];  for (Let i=0;i<5;i++) {    arr[i]=function() {        console.log (i);    };    I+ +;} Console.log (i); // i is undefinedarr[0] ();

After transcoding:

"Use strict"; var arr = []; var function _loop (_I2) {    function  () {        console.log (_I2);    };    _i2++    ; = _i2;};  for (var _i = 0; _i < 5; _i++) {    //i is undefinedarr[0] ();

Through the Babel transcoding can be clearly seen:

1, the scope is divided into two parts, the whole for the outer layer of the equivalent has a scope, here Babel use variable _i to distinguish I variable, equivalent to a scope, in understanding can understand,

Let arr= []; for(Let i = 0, len = 5; i < 5; i++) {Arr[i]=function() {console.log (i); };} Console.log (i); arr[0]();"Use Strict";vararr = [];var_loop =function_loop (_i) {arr[_i]=function() {console.log (_i); };};(function () {     for(vari = 0; I < 5; i++) {_loop (i); }) (); Console.log (i); //i is undefinedArr[0]();"Use Strict";vararr = [];(function() {//equivalent to the For loop outer scope, using variable aliases in Babel to optimize    var_loop =function_loop (_I2) {ARR[_I2]=function() {console.log (_I2);        }; _i2++; I=_i2;    };  for(vari = 0; I < 5; i++) {_loop (i); }) (); Console.log (i); //i is undefinedArr[0] ();

2, each single cycle is also a scope, the code of _loop, that is, the function scope to simulate the block scope.

3. The I variable declared in the For statement is injected into a single loop, and after a loop, the I variable is assigned back (I=_I2 in the _loop code).

The result is the same, but I feel that my understanding is very problematic, usually the more powerful the rule is usually the simpler, whether there is a more accurate explanation? I beg to tell you

What is the block scope of ES6 in the for-while statement?

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: info-contact@alibabacloud.com 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.