• Monday , 18 March 2019

JavaScript for-loops are… complicated – HTTP203

Code Canyon



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

3d Ocean

Related Posts

26 Comments

  1. Andrey Vasilyev
    January 14, 2019 at 13:42

    As much as I love it, JavaScript is an absolute disaster.

  2. Jason Guo
    January 14, 2019 at 13:42

    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.

  3. Jayakrishnan jr
    January 14, 2019 at 13:42

    This is awesome

  4. Joseph
    January 14, 2019 at 13:42

    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.

  5. Rein Châu
    January 14, 2019 at 13:42

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

  6. salasiapro
    January 14, 2019 at 13:42

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

  7. Star Core
    January 14, 2019 at 13:42

    JavaScript is very good at making simple things become complex, for simplicity purposes…

  8. Steve Way
    January 14, 2019 at 13:42

    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.

  9. Thomas Godart
    January 14, 2019 at 13:42

    JavaScript really is the worst language ever. I can't wait for its disappearance…

  10. Debabrata Acharya
    January 14, 2019 at 13:42

    "If you format your code like this I'm gonna slap you." 😂

  11. Andrew Luhring
    January 14, 2019 at 13:42

    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

  12. neHCuoHEpa8888
    January 14, 2019 at 13:42

    HI, do anybody know is it same for swift?

  13. Luis Torruella
    January 14, 2019 at 13:42

    I thought this was Daniel Tosh

  14. Filip Kopecký
    January 14, 2019 at 13:42

    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.

  15. Slavko Kovljenic
    January 14, 2019 at 13:42

    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..

  16. shridhar patil
    January 14, 2019 at 13:42

    This is great

  17. Liam Townsley
    January 14, 2019 at 13:42

    The imposter syndrome is real after watching this

  18. Kresten Sckerl
    January 14, 2019 at 13:42

    Squeaky voice: "I just lost all my credibility" xD

  19. Michael McLean
    January 14, 2019 at 13:42

    @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.

  20. farnoud
    January 14, 2019 at 13:42

    thanks. it would be better to add more visuals for complicated subjects

  21. Codingmaster
    January 14, 2019 at 13:42

    YEY ! google got a new sub !

  22. cool dude
    January 14, 2019 at 13:42

    Not sure if I'm too stupid to watch this…

  23. Soaring Radio
    January 14, 2019 at 13:42

    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) )
    }

  24. Pragyan Das
    January 14, 2019 at 13:42

    I wish they showed and explained the lexer code. Off the records, Y Combinator for life 😊

  25. Abhishek Kumar
    January 14, 2019 at 13:42

    Thank u for this awesome video

  26. kalekold
    January 14, 2019 at 13:42

    JavaScript is a mess!

Leave A Comment

You must be logged in to post a comment.