JavaScript for-loops are… complicated – HTTP203



In this episode, Jake and Surma dissect how for-loops actually work and how they’ve evolved. Turns out, it got complicated.

Subscribe to the channel! → http://bit.ly/ChromeDevs1

Watch more HTTP203 → http://bit.ly/2sPq2LB

Listen to the HTTP203 podcast for more content! → http://bit.ly/2Kryv2y
Itunes → https://apple.co/2IQagG6

Original source

26 thoughts on “JavaScript for-loops are… complicated – HTTP203

  • January 14, 2019 at 13:42
    Permalink

    The var vs. let setTimeout examples can be really confusing.

    If the presenters showed the ES5 version of the code, it would make a lot more sense especially to the beginners.

    I used webpack to transpile the ES6 version source code to ES5.

    ES6:

    for ( let i = 0; i < 2; i += 1) {
    setTimeout(() => {
    console.log(i);
    }, 0);
    }

    Becomes ES5:

    var _loop = function _loop(j) {
    setTimeout(function () {
    console.log(j);
    }, 0);
    };

    for (var i = 0; i < 2; i += 1) { _loop(i); }

    In ES5 code, we are invoking the _loop() function during each of the for-loop iteration.

    Because the _loop() function is invoked with the value of i, therefore the value of i is copied to the new lexical scope which is created by the _loop() function.

    Eventually the function setTimeout() is invoked inside the lexical scope of the _loop() function where the variable j holds the copied value of i.

  • January 14, 2019 at 13:42
    Permalink

    In the first setTimeout with var example, the loop just added 2 separate console.log(i) to the message (event) queue, right? So when the execution stack was completed, the two separate console.log(i) were put onto the stack from the message (event) queue, which is why we had two consecutive console.logs of 2. When those two separate console.log(i) were put onto the execution stack, the global value of i === 2, since var is only 'function-scoped' and not 'lexically-scoped,' correct? Just want to verify that I was visualizing that correctly.

  • January 14, 2019 at 13:42
    Permalink

    Too much talking and too title illustration. It's hard for non-native English speaker like me to follow their chit chat.

  • January 14, 2019 at 13:42
    Permalink

    Great Thanks. Though I would have wished the screen would focus more on the code than your faces. Got lost once or twice

  • January 14, 2019 at 13:42
    Permalink

    Discussion at 6:55. Not necessarily the case that the incrementer runs at the start. Because you are using a postfix incrementer, the value could be captured before it increments at the end. Try running ++i instead to confirm.

  • January 14, 2019 at 13:42
    Permalink

    I gotta say, i thought this was going to make my brain implode, and it did but not as much as i expected it to. gj jake and surma

  • January 14, 2019 at 13:42
    Permalink

    Just sitting here and smiling because I use an actual proper programming language. (C# to be specific) And do not have to put up with such stupidities.

  • January 14, 2019 at 13:42
    Permalink

    Interesting stuff..just one thing, make sure the presentation of the code LAST LONGER on the video and also highlight the part with red circles when he is pointing to a specific part of the code..

  • January 14, 2019 at 13:42
    Permalink

    @GoogleChromeDevelopers, @Google Chrome Developers, '@Google Chrome Developers', @'Google Chrome Developers' (sorry – I don't know how @ works with spaces 🙂 )
    An 'old school' for loop can be converted into a while loop really easily, right?

    for(var iterator = initialiseFunc; testFunc; incrementFunc) { bodyFunc }

    behaves exactly as:

    var iterator = intialiseFunc();
    while(!testFunc()) {
    bodyFunc();
    incrementFunc();
    }

    Is it possible to "convert" a let for loop in the same way, to write out in standard JS what it does, as a while loop?
    And is it fundamentally special casing a 'for-let' loop as different from a 'for-var' loop? Or is it doing the same thing in both cases, but constructed so that it behaves differently.

  • January 14, 2019 at 13:42
    Permalink

    I started messing around after watching this video. I stumbled across another weird one. You can count backwards like this, but removing the timeout or using let creates an infinite loop.

    for (var i = 0; i < 5; i++) {
    setTimeout(() => console.log(–i) )
    }

Leave a Reply