0

Why does my code return undefined if I use var inside a for loop instead of let. I have attached the output for let and var below the code blocks.

const a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (let i = 0; i < 10; i++) {
  setTimeout(() => console.log(a[i]), 3000);
}

Output : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

var i = 0;
for (i = 0; i < 10; i++) {
  setTimeout(() => console.log(a[i]), 3000);
}

// Output : [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined ]

VLAZ
  • 26,331
  • 9
  • 49
  • 67
Cpt Kitkat
  • 1,392
  • 4
  • 31
  • 50
  • 1
    Does this answer your question? [Javascript infamous Loop issue?](https://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue) – VLAZ Jun 27 '22 at 05:44
  • @VLAZ that question, and the question it links to, are from before ES6 came out. So while related, they cannot match this question. – Noam Jun 27 '22 at 05:49
  • @Noam the question is *why* it happens. And there is an explanation. – VLAZ Jun 27 '22 at 05:50
  • 1
    There isn't any trace of TypeScript in this question and TypeScript is not involved in this behaviour anyway. – axiac Jun 27 '22 at 05:50
  • @Noam [Explanation of `let` and block scoping with for loops](//stackoverflow.com/q/30899612) | [JavaScript closure inside loops – simple practical example](//stackoverflow.com/q/750486) | [Let variable in a JavaScript for loop](//stackoverflow.com/q/65410428) | [Let vs. var in a for loop](//stackoverflow.com/q/50923825) | [Behavior of let variables declared inside for loop in context of closures](//stackoverflow.com/q/70339292) | [Let variable in a JavaScript for loop](//stackoverflow.com/q/65410428) I assure you that the infamous loop issue has been *very well* covered over the years. – VLAZ Jun 27 '22 at 05:54
  • @VLAZ sure, my concern was about the specific question you linked to. – Noam Jun 27 '22 at 11:24
  • @Noam I don't see how https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example is insufficiently ES6 for you. I see many examples and explanations of how `let`/`const` have a different scope to `var`. And that's a quick glance at the first or three pages of answer. [This answer](https://stackoverflow.com/a/29558498) seems pretty relevant about the behaviour. It explains block-scoping as not existing then it was amended with information about ES6. [This answer](https://stackoverflow.com/a/16661498) talks about ES6 features directly. – VLAZ Jun 27 '22 at 12:00
  • @VLAZ I'm trying to say that the questions are different, however I would respectfully quit the discussion because it's not that important. Thanks for your views. – Noam Jun 27 '22 at 18:42
  • @Noam you've not actually provided any sensible reason why they are "different". You just said they were posted before ES6 which is irrelevant because 1. The core of the issue has nothing to do with ES6. ES6 only provides a more convenient solution. 2. There *are* answers that tackle ES6. 3. There are even questions that tackle ES6. Maybe for the future substantiate your objections more. Or if they are ultimately unimportant, don't express them. – VLAZ Jun 27 '22 at 18:55
  • Does this answer your question? [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) – VLAZ Oct 11 '22 at 13:58

1 Answers1

1

Variables declared by var keyword are scoped to the immediate function body so its falls under the function scope. And let variables are scoped to the immediate enclosing block denoted by { } - the block scope.

Nadun
  • 11
  • 2