ES6: Compare Scopes of the var and let Keywords. Help with understanding required

ES6: Compare Scopes of the var and let Keywords. Help with understanding required
0

#1

Hello, fellow campers, could you, please, help me understand, why console.log(i) returns 3 in this example?
I dont want to move further without thorough understanding of the issue.
Many thanks in advance!

The code in question

var numArray = [];
for (var i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3

browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36 OPR/55.0.2994.61.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords


#2

With the var keyword, i is declared globally. So when i++ is executed, it updates the global variable.


#3

This function was created to fill an empty array with numbers from 0 to 2, so how come the i variable means 3?


#4

The i++ executes at the end of each loop, so i ends at 3.


#5

This gets asked a lot, because I suspect we don’t necessarily explain very well what actually happens around a for loop

This is going to possibly be a confusing explanation to read but it might help in future for other loop related questions you may have

When we have for(a; b; c){d; } where a, b, c, d are parts of the for loop, the following happens:

  1. The expression a is executed once
  2. The body of the loop, d, is executed once
  3. c is executed once
  4. b is executed, and if truthy (or true) go back to 2.
  5. otherwise, continue with the line after the loop body

Note that c is executed before b's test

The different keywords var and let control which scopes a variable is still defined in, and behave differently for variables defined in the a part of the loop, but that’s what this question will end up showing so I’ll leave it here


#6

RIGHT! i++ executes at the end of the loop! So when the counter has reached 2 and pushed this number into the array, the counter still increments it one mor time. After that the loop is ready to run one more time, but the expression “b” fails the test, so we end up with the array that goes [0, 1, 2], but the counter variable went one step further.

Thank you very much, I think I’ve got it!