100 Comments

  • Lindsay Branscombe

    Super interesting but I have one complaint – I wish you would take care to show the screen for longer periods and more often. Especially when one of them is actually pointing at the screen explaining stuff and you're still on their faces so we can't even see what part of the code they are referencing. Showing their faces helps break up video in a pleasing way but it provides no education value.

  • Peter Fernandes

    So for cases at scale (lots of iterations with a small amount of work happening in each iteration), is it better to use var vs. let to avoid all the copy overhead each iteration?

  • Krisztian Varga

    Perfect examples for "If you can do something that doesn't mean you should." ..I just fail to see how the intricacies of for loop help a team to create valuable code. The video itself was interesting though 🙂

  • Colin Richardson

    I use bare blocks (thanks for the name), in both Javascript and Java.. Very useful to help setup a variable you want to keep but throw away the helping variables (or in most cases, use the same named variable but with different types)

  • Nenad Vićentić

    Or I misunderstood, or you explained it wrong, for the `let` case? This is the result:

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

  • Iuliu Visovan

    Lol Surma. Was the "0 1 2" answer just for the lulz? 😀 If not, you should check this out: https://www.youtube.com/watch?v=8aGhZQkoFbQ (best JS video ever)

  • Anup Rai

    Hey had a doubt
    “`
    for(let j={a:0}; j.a <=2 ;++j.a) {
    setTimeout(()=>console.log(j.a), 10);
    }

    Prints:
    3
    3
    3
    “`
    so copying is shallow for mutable types???

  • William Hilton

    1:52 – I should have known Jake would pull out "setTimeout". That's like your thing now, isn't it? Jake "the Event Loop" Archibald presents… 🙂

  • Krasimir Zlatev

    Seems like people who propose and implement new JavaScript features are not doing there job right and introducing countless number of side effects.

  • minj4ever

    I am not sure if I should be worried that none of this surprised me, except the fact that update check is considered to be the start of the iteration.

  • Nimmer Mehr

    Why the heck is JS so popular, even though it is so weirdly designed? Sure, it has rules, and yes, it is possible to learn all this, but who thought that this mess of a language would be a great tool?

  • José Luis

    I tested the first examples and for (var i = 0; i < 2; i ++) { setTimeout(console.log(i)) } prints exactly the same as for (let i = 0; i < 2; i ++) { setTimeout(console.log(i)) } The result is the same, always (Google chrome over a Mac). So what is the difference?

  • kytta

    So; for loops are going even deeper in the hole of JS's bad parts. You should never construct code with something that is this complicated.

  • Vlad Yaremenko

    Where are you find all of this nuances?
    I'm just trying to find it in the ECMA specification https://www.ecma-international.org/ecma-262/9.0/index.html#prod-ForDeclaration and I can see nothing like this

  • derstreber2

    Javascript is incredibly easy for beginners, and is also a powerful tool for professionals…. as long as you don't use for loops… or let… or var… or closures… or semicolons… or ==… or ………

  • WooDWorkeR

    Oh god, the intro sound is so strange on 100% speed – i subscribed to the podcast and play on 125% to 150% – and thats how i know the intro, and i think it sounds better speed up

  • Bob Loblaw

    So you recommend using for…of loops, while completely glossing over the fact that they are basically the least performant looping mechanism available in ECMAScript? A for…of loop is orders of magnitude slower than a standard C-style for loop, which itself is about 4x slower than a reversed for loop.

  • Tretyakov Alexander

    Hey, JS developers speaking. Our language provides 1000 means of obscuring and breaking the code without knowing. You are going not only deal with business logic and architecture, but also you are going to suffer because of how this language works. And then you will someday get a critical issue in your app because one of the libs you use breaks, because of all those wonderous complications we put into our language.

    Is it only me who thinks something is wrong here? Is it only me who wants a predictable and easy to use tool to build apps for me and my customers, not a riddle generator?

  • Liran H

    I tried to wipe off the smudge off my screen for about 10 seconds before realising it's actually on your tablet and not on my screen… 😐

  • Shaharear

    In computer science, a for-loop (or simply for loop) is a control flow statement for specifying iteration, which allows code to be executed repeatedly.

  • Soaring Radio

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

  • Michael McLean

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

  • Slavko Kovljenic

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

  • Filip Kopecký

    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.

  • Andrew Luhring

    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

  • Steve Way

    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.

  • Joseph

    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.

  • Jason Guo

    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.

  • Matt Scheurich

    I thought the whole point of using a for-loop compared to Array.forEach is that you can abort the for-loop using `break` (and skip items using `continue`), which can (depending on what you're doing) optimise your code performance. Now that for-loops are doing all this crazy extra lexical scope jiggery-pokery, does it affect their performance? Probably not significantly, but I'm still a bit weirded out by the lexical scope variable cloning!

  • Jeremy Kothe

    I get that it's his first reaction, but going from… a) incorrectly answering what the original code would do, exposing one of the more common bugs for intermediate JS coders, the "modified closure"… to being shown an elegant no-brain solution to it and reacting with….. b) "don't". is something he'll revisit if he hasn't already. The alternative is to wrap the body of the loop in a function and pass "i" in, which is what we used to have to do to solve this problem.

  • abhinav kumar

    hey nice video guys, after watching your video I wrote about loop and scope as I can't find good content on that. Please check this out http://www.confusenerd.xyz/tech_post/loop_in_js/

  • Aidan Brumsickle

    So basically you have this?

    for (let i = 0; i < n; i++) {
    // body
    }

    Becomes:
    {
    let i_;
    let t_;
    {
    let i = 0;
    i_ = i;
    t_ = i < n;
    }
    while (t_) {
    let i = i_;
    //body
    i++;
    i_ = i;
    t_ = i < n;
    }
    }

    Where i_, t_ are some gensym / guaranteed free variables?

Leave a Reply

Your email address will not be published. Required fields are marked *