Browser issue? Understanding var v let Keywords

JavaScript
1

Tell us what’s happening:
I am working on the lesson titled “ES6: Compare Scopes of the var and let Keywords.” I am comparing various blocks of code in the explanation section and tinkering with them using the “Inspect > console” feature of my browser (the latest version of Google Chrome) to try to fully understand them.

Problem is, my results in the browser don’t match what is given in the lesson.

Lesson code reads:

'use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns "i is not defined"

However, when I copy and paste that same code into the console, I don’t get the return vales of 2 and undefined. What I get is this:

VM184:1 Uncaught SyntaxError: Identifier 'printNumTwo' has already been declared
    at <anonymous>:1:1

I don’t understand the problem.

Perhaps I should add that when I try deleting the line that declares the variable and instead just declare and define the variable on the same line of code like this…

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

… I get very different results: 3 and 3.

I am very confused.
Thanks in advance for your help.

Your browser information:

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

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

2

Your syntax error is saying to me that you have once declared ‘printNumTwo’ variable already and trying to declare the same variable again. Try to refresh page (clearing console is not enough).

When using let, a variable with the same name can only be declared once.

3

Tell us what’s happening:
I do not understand why my browser console does not yield the same results as FreeCodeCamp.

Your code so far
The following code passed the test in the ES6: Compare Scopes of the var and let Keywords exercise:


function checkScope() {
"use strict";
  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;
};

But when I paste that same code into my browser (Inpsect > console) I get this result:

undefined

Why the different results? How can I get the browser console to instead say

Block scope i is: block scope
Function scope i is: function scope

I am very confused. I have never come across a discrepancy like this before. I am using the latest version of Google Chrome.

Thanks in advance for your help.

Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36.

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

4

If you want to get the same result, you must call the function: checkScope(). If just copy and paste, only you’re defining the function.

For example,

let x = 'hello world' // you get undefined
console.log(x) // you get 'hello world'
5

Ah, of course – yes, you are right. How silly of me. Thank you.

Another issue that I figured out is that if I try to test the code multiple times, I start to get this error:

VM197:1 Uncaught SyntaxError: Identifier 'printNumTwo' has already been declared
    at <anonymous>:1:1

And the only way I can fix is by refreshing the browser window. I guess that’s because the first ES6 lesson says, “when using let , a variable with the same name can only be declared once.”

But wiat. . . that actually raises a new question: if it’s true that “when using let , a variable with the same name can only be declared once,” why does it work to declare and define the let variable i two times?

6

Exactly!
You declare a variable using let only one time at block scope. In the same block is forbidden. For the code above, the second time is at function scope and not at global scope.