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 Mews11,540 Points
Passing a function as a parameter for another function?
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!
So this is one of the lines you're referring to:
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.
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.
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
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?