Closure in a loop misbehaves, why?

[mbork]

Hi all,

I suspect this is a general Espruino thing, but I only own a Bangle, so I'm asking here.

When I run this code in Node.js or in a JS console in a browser, I get 0, 1 and 2:

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

However, it yields three 3's on a Bangle. By trial and error, I found that this works:

for (let i = 0; i < 3; i++) {
	const j = i;
	setTimeout(() => console.log(j), 0);
}

I'm fine with accepting that this should work like this, probably because the JS interpreter on Espruino needs to be "small and simple", but I'd love to see an explanation – why does this happen?

[gfwilliams]

Ahh, yes - Sorry, I think you've hit: espruino/Espruino#2206

If you do for (var i = 0; i < 3; i++) { then you have a single variable i that's shared across all iterations of the loop like in most normal programming languages - but the JS standards group thought that was confusing for closures, so they made it so that if you use let it behaves differently and allocates a new variable for each iteration around the loop so you can use i later on from a closure without its value having changed.

But now you're in this position where changing let to var (which seems like it should have no effect) totally breaks your code.

There's a bit of info in that bug above, but you're right with "Espruino needs to be "small and simple"" - the issue is that in Espruino we'd have to have to make for in/of and for ;; behave differently if they see let which means potentially quite a bit of extra code (but then I'd have to find a way to optionally build that in because on some targets memory usage is so tight we can't afford that extra code). It's just quite a lot of work to add and usually issues don't come up that often.