Const is applicable on For of Loops but not on For Loops (Why)
#javascript#discuss#help#programming
Sojin Samuel

Sojin Samuel @sojinsamuel

About: React developer | Next.js and Golang is awesome

Location:
India, Kerala
Joined:
Jun 5, 2022

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

Publish Date: Jul 5 '22
8 7

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

Comments 7 total

  • amiceli
    amiceliJul 6, 2022

    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

    • Sojin Samuel
      Sojin SamuelJul 6, 2022

      Thanks 4 investing the time for helping me out amiceli

  • Guilherme
    GuilhermeJul 6, 2022

    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.

    • Sojin Samuel
      Sojin SamuelJul 6, 2022

      Thanks Guilherme

    • peerreynders
      peerreyndersJul 6, 2022

      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

      • Ibrahim Harchiche
        Ibrahim HarchicheSep 29, 2024

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

  • Adam Crockett 🌀
    Adam Crockett 🌀Jul 6, 2022

    Genuinely good question!

Add comment