ES6 - Compare Scopes of the var and let Keywords

JavaScript
1

Tell us what’s happening:

Hi,
Here: " As you can see, printNumTwo() prints 3 and not 2."
The explanation has a small error. It says the function will return 3 because it uses the latest value of the loop variable i. In JavaScript with var, the function actually captures a “snapshot” of i’s value when it’s created inside the loop. So, it will always return the value i had at that specific moment (2 in this case), not the final value after the loop (3).

Can you please tell me if I am wrong or not.

Your code so far

function checkScope() {
  var i = 'function scope';
  if (true) {
    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 (Macintosh; Intel Mac OS X 10.15; rv:124.0) Gecko/20100101 Firefox/124.0

Challenge Information:

ES6 - Compare Scopes of the var and let Keywords

2

Did you run the code?

3

Hi lasjorg,

This is not about running the code. I am talking about the code explanation. I have no problem with solving the code, but I am afraid that the information in the explanation might be wrong.

Again, in this code:

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

I was confused by the following explanation:

As you can see, printNumTwo() prints 3 and not 2. This is because the value assigned to i was updated and the printNumTwo() returns the global i and not the value i had when the function was created in the for loop.

But this is how I see it:

  1. Loop Iteration:
  • The loop runs three times (i < 3).
  • Inside the loop:
    • You check if i is equal to 2.
    • If it is (on the third iteration), you assign a function to printNumTwo. This function simply returns the value of i.

Crucially, the function remembers the value of i at the time it’s created (which is 2 in this case), not the value when it’s called.

  1. After the Loop:
  • The loop finishes, and i becomes 3.
  • You call console.log(printNumTwo()).
  • Even though i is now 3, the function printNumTwo returns the value it captured earlier (which is 2).

So, the console will indeed display 2 and not 3.

Am I correct by assuming this or wrong?

4

If you ran the code example, it should answer your own question.

Does it log 2 when you run the code?

5

Hi lasjorg,

I apologize for the wasted time, you are correct. I should’ve been more careful :open_mouth: The console in fact gives 3.

Actually what happened is that I wanted to understand the code better, asked AI (Gemini) to explain me this code and it told me that the “console will display 2” and explained why (which was it’s mistake).

I actually got me explained a lot of things by AI that previously I didn’t understand and it helped me a lot, but this might be a lesson that I shouldn’t trust AI at 100% and experiment with running the code more often.

Thank you.

6

There is no substitution for running code.

It is good to try and understand code and have an idea about what it does. But in the end, you should run it and confirm your assumptions. Log it out or run it using a debugger.

Reading code is static analysis, and you will often fail to get it 100% correct. That is why we write buggy code that is only fixed after we run the code and see the bugs.

1 Like