Clarification on variable scope

JavaScript
1

This challenge really knocked me down a few pegs, But after some studying and MDN reading I feel that I honestly understand how this works.

I would just like a little clarification on the scope of the const variable “resultDisplayArray” in the function makeList().

In the function we assigned the “resultDisplayArray” const the value of the .map() method that would allow us to create an array containing the desired outputs. So in the function the scope of that variable is local and that is why outside of the function block we are able to declare another const variable of the same name and assign it the value of the function call makeList(result.failure), correct?

If that is correct I misunderstood and is why I was unable to complete the challenge on my own and ended up looking at a solution, as I was trying to use a for loop that would allow me to do the same by pushing the values into an empty array. I think i was making this a lot more complicated than it should have been .


const result = {
success: ["max-length", "no-amd", "prefer-arrow-functions"],
failure: ["no-var", "var-on-top", "linebreak"],
skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
"use strict";

// Only change code below this line

const resultDisplayArray = arr.map(item =>`<li class="text-warning">${item}</li>`)
 
// Only change code above this line

return resultDisplayArray;
}

const resultDisplayArray = makeList(result.failure);


console.log(resultDisplayArray);
2

Well, yes, pretty much. let and const variables are block scoped, meaning that their scope is limited to the block in which they were declared. (A block is one or more statements wrapped inside a pair of curly braces.)

You may also add an if statement or a for loop inside your function and declare another const with the same name. This is called variable shadowing, and it allows you to declare variables with the same name as long as their scope is different. However, please note that shadowing also means that you will lose access to the shadowed variable. Consider this rather useless function:

const x = 3;
function print() {
    const x = 5;
    console.log(x);
}

This will print 5 because inside the function print() we no longer have access to the outer x variable.

I hope it helps! :smiley:

1 Like
3

Yes, the resultDisplayArray inside the function is thrown away as soon as the function call is over, so there’s never a chance for it to conflict with the other resultDisplayArray.

1 Like
4

Thank you both for the very helpful replies!

I see too that we could have declared the function variable with any other name and set the return to that other name and the function and function call would all still work perfectly. Which maybe due to my inexperience I dont understand why the local variable in the function had to be named the same as the global variable . I can only assume that there are various valid reasons for this but for my current understanding it just seems confusing.

Thanks again for help you two !

1 Like
5

The local and global variable didn’t have to be named the same as each other. There’s no benefit, it’s just confusing and should be changed.

1 Like
6

I’m already easily confused with these types of things, and I would really like to believe that’s the only reason I was unable to complete the challenge on my own and had to look at a solution to help me figure out the rest.

1 Like
7

If you’d like to raise this issue on Github, referencing this thread, I’d support you.

8

I don’t feel that I am the right person for that, but I appreciate your support!