Hi everyone, I’m on the first exercise of the ES6 part of the JavaScript course.
I’m a little stuck, and would be most grateful for any help from the community, thanks in advance.
Here’s the link to the exercise: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords
The exercise provides 4 examples at the start (before the main challenge), and I have trouble understanding examples #3 and #4. I can kind of guess what’s happening but really not sure.
Example 3 (provided before the challenge):
var printNumTwo;
for (var i = 0; i < 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo()); // Console: 3
I’ve attached an image with numbers indicating the order in which I think the code is being executed.
My understanding is that we first call “printNumTwo()”. This then takes us to the “for” loop. We then initialize the counter with “var i = 0” then we look at the condition “i < 3” that needs to be true for the body of the “for” loop to execute.
Both “i === 0” and “i === 1” are less than 3, so we move on in the code, but since in both cases “i” is not === 2, nothing happens.
We finally get “i === 2” (at number 5) in image. We then call the function (number 6), return “i”.
This is a function expression, and by assigning a function to a variable (in this case “printNumTwo”, we have “function-ified” (I sort of made up the term, not sure if there’s a technical term for this) the variable. What this means is the variable now holds a reference to the function, and this variable can later be called like any other function.
My understanding is it doesn’t really matter what “i” is at number 7 in the image (although “i” should have a value of 2 at that point). This is because all we’re saying is the variable “printNumTwo” now holds a reference to a function, which in turn returns “i”.
Then, “i++” gets executed because the body of the “if” statement has been executed, thus bringing “i” to 3. We’re now at number 9 in the image and we essentially console log whatever is the result of calling “printNumTwo()”, which is “return i”.
Since “i” has been incremented and is now 3, the console logs 3. Is this a correct understanding of what’s happening?
As for example #4 (provided before the challenge):
let printNumTwo;
for (let i = 0; i < 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo()); // Console: 2
console.log(i); // Console: i is not defined
I’m guessing what’s happening here is more or less like in the earlier example. But since console.log(printNumTwo()) now prints 2, I’m not sure if this means “printNumTwo” doesn’t hold a reference to:
function() {
return i;
}
Furthermore, I tried to fix the code by adding a line and it still doesn’t work:
let printNumTwo;
for (let i = 0; i < 3; i++) {
if (i === 2) {
let i = 2; // I added this, but i is still not defined.
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo()); // Console: 2
console.log(i); // Console: i is not defined
Here, console.log(i) still leads to “i is not defined”, how would I go about fixing this?
Thanks so much, and sorry for the long post.
.