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
Konrad Dziekonski
7,798 Pointsquestions about assigning const and function parameter
Hello,
in This code:
ul.addEventListener ('click', (e) => {
if (e.target.tagName === 'BUTTON') {
const li = e.target.parentNode;
const ul = li.parentNode;
ul.removeChild(li)
}
});
we have declared a const ul. Why did we have to declare it again since it was declared in the global scope at the beginning, in the global scope we have 3 constants:
const form = document.getElementById('registrar');
const input = form.querySelector('input');
const ul = document.getElementById('invitedList');
even in this example the ul const is handling the event listener, so how is it different than the one that we declared inside, and what is more they both refer to this same ul element. And I have checked, when I remove keyword const, the button stops responding.
And also if someone could explain to me or send me to some article or a video that REALLY explains how do we assign parameters to functions. This is problematic for me, I do not have a clue why in the function Guil createted for readabillity and maintainability he used text as a parameter?
const createLI = function(text) {
const li = document.createElement('li');
li.textContent = text;
const label = document.createElement('label');
label.textContent = 'confirmed';
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
label.appendChild(checkbox);
const button = document.createElement('button');
button.textContent = 'Remove';
li.appendChild(button);
li.appendChild(label);
return li;
};
why not anything else? ;p or didn't he just leave it empty. Its a black magic for me so please help :)
thanks!
4 Answers
Steven Parker
231,261 PointsThe "const ul" inside the function is a completely separate variable from the global one with the same name. Inside the function the new one "shadows" the global one, making the global one not accessible in the function. Removing "const" breaks the program because it then attempts to modify the content of the previously declared constant global, which is not allowed.
And the naming of parameters is programmer's choice, though it is considered "best practice" to use a name that relates to the value that will be stored in the parameter, or the function it will be used for. In this example, "text" is an obvious choice since it will be used to pass in some text which will be used to fill a "textContent" attribute.
Konrad Dziekonski
7,798 PointsAwesome! Tthanks a TRILLION!!! I'm gonna save this sentence for a future reference as this has puzzled up this concept in my brain a litte :)
Konrad Dziekonski
7,798 PointsWell it definatelly isn't obvious for me ;p but thanks, I'll figure it out. Actually second thought is even more confusing, because text is a variable declared within main event listener, than it was just taken out of the curly braces and used within another function without declaration and used as its parameter, (the scope is supposed to be from one curly brace to another and no hoisting applies for let and const) and the body of the function is first, before body of the event listener . My english is not good enough to express what I feel ;)
Steven Parker
231,261 PointsThe naming of a parameter in the function definition serves as the declaration of the parameter, and the scope of a parameter is the body of the function it is declared in.
Parameters also "shadow" any variables of the same name in the outer or global scope.
Patrick Kane
Full Stack JavaScript Techdegree Student 354 Pointsas we passed parameter "text " into the function, I am just curios if its not going to be related to third line of the code, there is also word "text" included
function createLI(text){
const li = document.createElement("li");
li.textContent = text;
const label = document.createElement("label")
label.textContent = "Confirmed"
const checkbox = document.createElement("input")
checkbox.type = "checkbox";
label.appendChild(checkbox);
li.appendChild(label)
const button = document.createElement("button")
button.textContent = "remove";
li.appendChild(button);
return li;
};