Using const as loop variable in for loop

Question

I understand the behavior of using var and let in for loop in typescript/javascript but can someone explain why and how a const variable as a loop variable behaves ?

for (const i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 100 * i);
}

From what i understand , when you declare a variable as const and initialize its value , the value cannot be changed

Yet you can see the value being changed in the console.log() .An error has to be thrown while compilation right ?What am i missing here ?

I have created 2 examples for this behavior .

Loop variable as a const

Const variable re assignment

Can someone help me understand this ?

bothconst and let have block scope and is hoisted at the top of the block its defined in, the only difference between const and let is variables declared const cannot be reinitialized — Kunal Mukherjee
– Kunal Mukherjee, Commented May 9, 2019 at 11:56
Please include all code in the question itself, not only on an external site. — Heretic Monkey
– Heretic Monkey, Commented May 9, 2019 at 12:01
@messerbill a real ES2015 environment does actually have constants. — Pointy
– Pointy, Commented May 9, 2019 at 12:04
@HereticMonkey i would have included the code but i wouldn't be able to show the behavior if it wasn't a stackblitz example . I hope you understand where i'm getting at — CruelEngine
– CruelEngine, Commented May 9, 2019 at 12:17
If that was the case, and you know the behavior was only replicable in Stackblitz, then you should mention that in the question. — Heretic Monkey
– Heretic Monkey, Commented May 9, 2019 at 12:21

adiga · Accepted Answer · 2019-05-09 11:59:39Z

7

It works in Stackblitz because it is running traspiled code:

AppComponent.prototype.test = function () {
    var _loop_1 = function (i) {
        setTimeout(function () {
            console.log(i);
        }, 100 * i);
    };
    for (var i = 0; i < 5; i++) {
        _loop_1(i);
    }
};

It won't work if you add a snippet here because it is not transpiled

for (const i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 100 * i);
}

answered May 9, 2019 at 11:59

adiga

35.4k9 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CruelEngine Over a year ago

looks like i shouldn't trust stackblitz much or i don't understand how stackblitz works . Thanks a lot for clearing the doubt .so i was correct in assuming that the loop will break.

adiga Over a year ago

@CruelEngine tbf, it does show the red squiggly line under i++ with error message: "Cannot assign to 'i' because it is a constant or a read-only property."

CruelEngine Over a year ago

and yet it compiled and that is where i was a bit confused

Kunal Mukherjee · Accepted Answer · 2019-05-09 12:02:08Z

0

Answering your question,

  test(){
    for(const i =0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

This code essentially becomes,

  test(){

    // can be only initialized once
    const i;
    for(i = 0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

Because every JavaScript variable is hoisted at the top of its scope, in this case the test() as its const variable that's why its hoisted in that block and not accessible outside of it.

To correct the piece of the code:

  test(){

    // can be only multiple times in that block
    for(let i = 0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

Which becomes,

  test(){

    let i;
    // can be only multiple times in that block
    for(i = 0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

As both const and let have block scope and is hoisted at the top of the block its defined in, the only difference between const and let is variables declared const cannot be reinitialized.

answered May 9, 2019 at 12:02

Kunal Mukherjee

5,8733 gold badges29 silver badges55 bronze badges

4 Comments

CruelEngine Over a year ago

hoisting has nothing to do with this behavior right ? the loop should never run if i declare the loop variable of const

Kunal Mukherjee Over a year ago

@CruelEngine you cannot increment a const variable once initialized

CruelEngine Over a year ago

yes exactly and yet the code ran in the example i attached in the question

Kunal Mukherjee Over a year ago

@CruelEngine I think webpack is transpiling the code to ES3 to maintain compatibility which didnt had const and let and the const is converted to var. Anyway you can inspect the transpiled file in the dist folder.

Collectives™ on Stack Overflow

Using const as loop variable in for loop

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related