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
Robert Mews
11,540 PointsPassing a function as a parameter for another function?
Hey all,
I'm really trying my best to understand some of the concepts here. I noticed when Andrew mentioned that we are already within the checkbox element within the taskCompleted function (~4:20 mark in video), I wasn't quite sure I'm following. Please keep in mind, I've already taken the basic JavaScript courses, but I feel like there are concepts demonstrated here that haven't really been explained. Hopefully, someone can help me out!
First, I get that we're initially setting up variables that use the getElementById method to obtain the current html element objects. Then we create functions that we want to perform actions when certain DOM events take place.
The part that's a bit tricky is the code at the bottom part, specifically the bind parameter. It seems we have a function bindTaskEvents that takes two arguments. That part is pretty straight forward. Done that many times. However, one of the arguments is an array and the other is another function all together! MIND BLOWN. Now, I haven't encountered that before. Probably could have used some explaining. So can someone explain what's happening here. How does the code exactly get executed when one argument is an array and the other is a function? Thanks!
1 Answer
Marcus Parsons
15,719 PointsHey Robert,
So this is one of the lines you're referring to:
bindTaskEvents(incompletedTasksHolder.children[i], taskCompleted);
What you're doing is passing in to bindTaskEvents the value of an array (which is the child at index i) and a function reference.
Let's go over them one by one.
First Argument
The first argument is actually the value of an array. It is the child element located at index i. Children of elements go from 0...n by 1, where 0 is the first element and n is the last element. So when this element is passed in, the placeholder in the function bindTaskEvents that is named taskListItem takes the place of incompletedTasksHolder.children[i] for each iteration of the loop.
You are then utilizing the querySelector method to get only those inputs and a button that are for that specific child because you are calling querySelector on that child that was passed in. This way the function can be dynamic and take in any number of children.
Second Argument
The second argument is, of course, a function, but it's a reference to the function, not a function call. When you put () on the end of a function name, you are calling that function right then and there i.e. function call.
We don't want to call the function right then, because we only want the functions to fire off when an event happens (such as mouse click) so that we can have data to give to the function from that event. i.e. we wouldn't want to update what's in the text box as soon as we hit the Edit button because it didn't give us any chance to type anything in. So, that's why we leave off the parenthesis and just write the function name so that it's a reference to the function.
And then the same thing happens with the function. The function reference that was sent in (whether it be taskCompleted or taskIncomplete) gets put into the placeholder named checkBoxEventHandler so that way checkBoxEventHandler can be dynamic and the function be dynamic, as well.
Does that make more sense?