DEV Community

Sojin Samuel
Sojin Samuel

Posted on

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

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)

Collapse
 
rollergui profile image
Guilherme

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++) {}
Enter fullscreen mode Exit fullscreen mode

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]) {}
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
peerreynders profile image
peerreynders

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
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

The let version automatically works that way

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

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
Enter fullscreen mode Exit fullscreen mode
  1. initialization initializes the loop environment‡.
  2. final-expression runs at the beginning of each iteration except the first one.
  3. 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.
  4. statement is executed.
  5. the lexical environment is copied back to the loop environment.
  6. goto step 2
for (let i = 0; i < 2; i += 1) {
  queueMicrotask(() => console.log(i));
  i += 1;
}
// Output:
// 1
Enter fullscreen mode Exit fullscreen mode

‡ initialization has its own lexical scope.

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

Collapse
 
ibrahim_harchiche profile image
Ibrahim Harchiche • 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.

Collapse
 
sojinsamuel profile image
Sojin Samuel

Thanks Guilherme

Collapse
 
amiceli profile image
amiceli

For exemple with a for loop

for (const i = 0; i < 100; i++) {
// ....
}

You can't useconst because I++ will increment i.
But i is a constant. A constant can't change. So you have to use let

I don't know all details for for of loop, just it uses Iterator. I found a good article about loops details : exploringjs.com/es6/ch_for-of.html

Collapse
 
sojinsamuel profile image
Sojin Samuel

Thanks 4 investing the time for helping me out amiceli

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Genuinely good question!