Inconsistent output using do/while and for loop in asynchronous JavaScript using let to declare the variables [duplicate]

Question

Why do I get a different output when using a do/while loop in the code below?

function logNum() {
  let counter = 0;

  do {
    counter += 1;
    setTimeout(() => console.log(counter), counter * 1000);
  } while(counter <= 10);
}

logNum();

The above code outputs number 11 ten times. Expected output was numbers 1 to 10. But when I use a for loop, it works as expected as shown below. Why?

function logNum() {
  for (let counter = 1; counter <= 10; counter += 1) {
    setTimeout(() => console.log(counter), counter * 1000);
  }
}

logNum();

Updated working code from example 1:

function logNum() {
  let counter = 0;

  do {
    let num;
    counter += 1;

    num = counter;
    setTimeout(() => console.log(num), num * 1000);
  } while(counter < 10);
}

logNum();

because in the second example (due to the use of let) counter is scoped to the loop, whereas in the first one it's scoped to the whole function, so is 11 by the time the timeout functions actually runs — Robin Zigmond
– Robin Zigmond, Commented Dec 4, 2022 at 14:23
@RobinZigmond Thank you for the explanation. Your explanation along with the code example by dangarfield below explains it successfully. I've updated the first code snippet as per the new understanding. — noSelf_
– noSelf_, Commented Dec 4, 2022 at 15:19

dangarfield · Accepted Answer · 2022-12-04 14:31:51Z

1

The first increments the counter very quickly and then when the setTimeout function triggers, the counter has already been incremented.

Run this below and you will see.

function logNum() {
  let counter = 0;

  do {
    counter += 1;
    console.log('A in loop',counter),
    setTimeout(() => console.log('A in timeout',counter), counter * 1000);
  } while (counter <= 10);
}

function logNum2() {
  for (let counter = 1; counter <= 10; counter += 1) {
    setTimeout(() => console.log('B',counter), counter * 1000);
  }
}

logNum()
logNum2()

Update. I've just re-read the question - This answer is here: What is the scope of a 'while' and 'for' loop?

edited Dec 4, 2022 at 14:31

answered Dec 4, 2022 at 14:26

dangarfield

2,3501 gold badge15 silver badges18 bronze badges

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

2 Comments

Bergi Over a year ago

"increments the counter very quickly and then when the setTimeout function triggers, the counter has already been incremented" - that's also what happens in the second loop

noSelf_ Over a year ago

@dangarfield Thank you for the explanation. Your code example and the explanation by Robin above explains it successfully.

Collectives™ on Stack Overflow

Inconsistent output using do/while and for loop in asynchronous JavaScript using let to declare the variables [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related