Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript DOM Scripting By Example Improving the Application Code Refactor 1: Create List Items

Label outside the scope

Hi, I don't understand this part. Why do we have to return it in the function to work ?

In the video: "with appendToLI, I can't append the checkbox to it. Well that's because the label is being created outside the scope beyond the checkbox's reach. So if appendToLI returned the label once it was finished, you could call appendChild on it and pass in the checkbox."

2 Answers

Steven Parker
Steven Parker
229,732 Points

Normally, any variables created in a function go out of scope and are disposed the moment the function ends. However, any value that is returned by the function is available to the caller.

Begana Choi
Begana Choi
Courses Plus Student 13,126 Points

still cannot understand clearly. can you explain more simply? sorry, maybe I'm too beginner to understand it. so if I understand it, if we want to call checkbox function through (into) the label function, we need to return label function first? it just mixed up in my head... please help me to understand it.

Steven Parker
Steven Parker
229,732 Points

Perhaps a code example would help:

function scopeTest() {
    var first = "one";
    var last = "two";
    return first;
}

var first = scopeTest();
console.log(first);  // this will output "one"
console.log(last);   // this will cause a ReferenceError, since last is not defined here

Steven Parker I, too, have the same question... your code sample makes TOTAL SENSE... I liked to humbly believe that before this video I understood and applied my knowledge of variable/function scope... but this makes me feel shaky.

To further the conversation: if the label is being created outside of the checkbox scope, why isn't it also true that the CONST LI is created outside the scope of these new functions?

I understand that adding the return statement is helpful here but I can't quite understand why it is only really applicable to the label/checkbox conundrum.

Thank you for your time & expertise.

Steven Parker
Steven Parker
229,732 Points

The "appendToLI" function is in the same scope as "const li", so it has access to "li" variable.

But the "element" is created inside the "appendToLi" function, so the code outside that function does not have access to it directly. By providing at as the function's return value, you then chain the "appendChild" method to it.

Only the label and the checkbox are being added to new elements. In the other cases, the elements are created and added to the list by themselves.

Steven Parker - Aaahh... I see now. Thanks. You rock, man!