Const is applicable on For of Loops but not on For Loops (Why)

#javascript #discuss #help #programming

I have seen people using const on for of loops, i admit why it doesnt work in the case of for loops but, does for of loop has the same case as that of for loops.

can you share your knowledge why const works on for of loops in javascript

Top comments (7)

Guilherme • Jul 6 '22

You didn't specify where in the loop, but I'm going to assume the obvious :)

in a for loop, you are creating a variable to count the iterations, and this variable is going to change, thus it can't be a constant value.

for (let i = 0; i < 5; i++) {}

if i were a const, it would throw an error at the end of the first iteration, when i++ was executed.

on for ... of loops, you create a variable to keep the value of the iterable (list) to use during that iteration of the loop... when it loops over, a new variable will be created, with the same name and different value. it does not try to reassign, it just releases the variable that was used in the last iteration and creates a whole new one.

for (const value of [1, 2, 3, 4]) {}

the value variable will only exist until the end of each iteration.

peerreynders • Jul 6 '22

The let in the modern for loop is actually a bit disingenuous.

The early version of the for loop worked like this:

for (var i = 0; i < 2; i += 1) {
  queueMicrotask(() => console.log(i));
}
// Output:
// 2
// 2

Unintuitive but correct as by the time console.log() executed i was 2.

Typically the intention is this:

for (var i = 0; i < 2; i += 1) {
  queueMicrotask(makeTask(i));
}
// Output:
// 0
// 1
function makeTask(v) {
  return () => console.log(v);
}

The let version automatically works that way

for (let i = 0; i < 2; i += 1) {
  queueMicrotask(() => console.log(i));
}
// Output:
// 0
// 1

A new lexical scope is created for each iteration and each lexical closure has its own copy of i.

for ([initialization]; [condition]; [final-expression])
  statement

initialization initializes the loop environment‡.
final-expression runs at the beginning of each iteration except the first one.
before condition is checked a new lexical environment is created for the iteration and the current loop environment (i) is copied into that then condition is checked. Continue if satisfied, break if not.
statement is executed.
the lexical environment is copied back to the loop environment.
goto step 2

for (let i = 0; i < 2; i += 1) {
  queueMicrotask(() => console.log(i));
  i += 1;
}
// Output:
// 1

‡ initialization has its own lexical scope.

for (let i = (queueMicrotask(() => console.log(i)), 0); i < 2; i += 1) {
  i += 1;
}
// Output:
// 0

Ibrahim Harchiche • Sep 29 '24 • Edited

"final-expression runs at the beginning of each iteration except the first one. "
mdn says: final-expression (called afterthought in their docs) evaluates at the end of each loop iteration not at the beginning of each iteration.