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.

I’m just waiting for the next big data leak to be the result of a for loop vulnerability.

[Norfeldt]

The discussion and topic is great. If it had some console.log results shown I would have been more easily following the discussion.

[lb]

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.

[DebabrataAcharya]

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

[StarCoreSE]

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

[AlekseyNew]

It was cool. I missed valuable videos like this one.

[girlswithgames]

videos like these make me want to unlearn programming

[mikehallishere]

Not so much that for-loops are complicated, more that closures and scoping is complicated.

[kosnk]

Thanks to you, I found that eval('for(let i=0; i<1; i++) { 42; }') actually *returns* 42

[AndrewLuhring]

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

[sreelalts]

Really complicated ::: Oh God! Jake and Surma... That was a really helpful one. Thanks :)

[ElektrykFlaaj]

This channel is like Numberphile for web developers

[LA-MJ]

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.

[sangeeth]

I recently stumbled upon this bit of info (from Kyle Simpson IIRC) which talked about function parameters having their own context and stuff. I was wondering since there is a new `for await` syntax and generators and all kinds of things, could we have like a whole redo on "scope, contexts and closures" with all the ES* features and the under-the-hood on how these concepts are different now? Would love to see that on this series or in some other form on this channel.

[ColinRichardson]

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)

[karlheinzneugebauer]

Meine Güte! Da wird die Wartung von fremdem Code noch ein Stück "lustiger" :O

[slavkokovljenic]

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

[wmhilton-old]

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

[jasonguo]

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.

[pdcx]

cool stuff. essentially multiple {} zones in for loop's ()