ES6 - Compare Scopes of the var and let Keywords

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.

var printNumTwo;
for (var i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());

Here the console will display the value 3.

If you can please explain why ‘i’ gets a value of 3.
as i starts with 0 it should count up to 2, how did it become 3?

Thank you

Your code so far

function checkScope() {
  let i = 'function scope';
  if (true) {
   let i = 'block scope';
    console.log('Block scope i is: ', i);
  }
  console.log('Function scope i is: ', i);
  return i;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: ES6 - Compare Scopes of the var and let Keywords

Link to the challenge:

2

The loop continues while i is less than 3. So it stops when i is 3. If i never went higher than 2 then the loop would never stop. So i actually will equal 3 and then the loop will stop.

1 Like
3

Ooooo, this is a FUN one! The reason is explicitly because of the scope of i. Because it is a var, it is scoped to the nearest containing function - in this case, as there is no containing function, i is a single global variable.

So when printNumTwo() is executed, it looks in the closest scope for an i and doesn’t find one. At that point, it continues expanding scope until it finds our global i, and gets the current value of it - which is that value after that loop has exited. The loop doesn’t exit if i is less than three, only when it passes that threshold… Be being equal to three.

Had we used let i here rather than var i, then each time through the loop would be an entirely new block scope (each time we revisit the {...}, it’s a new block), and each iteration of that function has its own local i - so the function would do what you wanted, showing the local value of the block in which that printNumTwo function was defined.

4

Thanks all,
If I may ask, why will the console display the values [0, 1, 2] and 3

5

Based on what code? Please paste in the code that is producing these results for you.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

6 
var numArray = [];
var i;
for (i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
console.log(i);

Here the console will display the values [0, 1, 2] and 3.

7

Yes, because that code pushes the numbers 0, 1, and 2 to the numArray array and thus console.log(numArray) will print an array with those three numbers to the console.

And since the for loop ends when i is equal to 3, then console.log(i) will print 3 to the console.

Can you explain a little more what you don’t understand about these results?

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.