What's the point? Functions as a parameter

Question

What's the point of setting up functions as a parameter and why is this discussed in the DOM course???
I can see how it can be done and I understand it but I don't think Guil did a good job explaining on WHY we need to know how to do it and how it's applicable, or just applicable to the understanding of the DOM. He only vaguely says it will help us understand how JavaScript can respond to user events.
Plus this seems randomly placed into the DOM course.
Maybe i'm missing something, any tips or advice would be appreciated, thank you.

Brendan Whiting · Answer

The main benefit of passing functions as a parameter in DOM manipulation is passing callback functions to event listeners.
Let's say we want to update the contents of some container when someone clicks a button:
```JavaScript
const button = document.querySelector("#button");
const messageContainer = document.querySelector(".message-container");
button.addEventListener("click", function(){
    messageContainer.innerHTML = "Button was clicked";
});
```
The 2nd argument to the method addEventListener is a function. In this case, we're passing in an anonymous function. But we could also assign a function to a variable, and then pass that in.
```JavaScript
const button = document.querySelector("#button");
const messageContainer = document.querySelector(".message-container");
const updateMessageContainer = () => {
  messageContainer.innerHTML = "Button was clicked";
}
button.addEventListener("click", updateMessageContainer);
```
Notice that when we pass in the function as an argument, we pass in the name of the function without parens, we're not calling it yet. We're just passing the reference to the function, and later on, when the button is clicked, the function will be called.

Welcome to the Treehouse Community

Looking to learn something new?

Cory Thomas

Cory Thomas

What's the point? Functions as a parameter

1 Answer

Brendan Whiting

Brendan Whiting