Callback functions are quite useful as a programmer especially when they’re used with Event Listeners. A callback function by definition is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. For callback functions and event listeners to work properly, they need function referencing, not function invocation. Here, in the blog, I will dive deeper into the difference between the two and explain why you should use one over the other.
Callback Functions
To get a better grasp of invocation, referencing, and callback functions, I’m going to change the text of “Hello, World” to “Goodbye, World” when I click on it. By doing so, I need to create an event listener (addEventListener) to listen for when the click happens. Once the click happens, then the function will run. The function below is the function I’ve declared that will run once the event listener occurs.
As you can see, we grabbed the HTML element to change the text and assigned it to the variable header. Then we want to change the content of that text so we use textContent to change it to what we want it to be once the event listener happens.
In the screenshot above, we were able to change the text from “Hello, World” to “Goodbye, World” using a callback function. If we remember the definition of a callback function mentioned earlier in the blog, we created an anonymous function inside the event listener as the second parameter. We used (event) as a parameter using the arrow functions method ( => ) and then passed that function as an argument when we used it in our handleClick function. This was used to run the handleClick’s code which changed the text from “Hello, World” to “Goodbye, World.” However, in order for the functions to work correctly as designed it’s important to understand why it is better to reference a function rather than invoke or call a function once the event listener occurs.
Invoking a Function
When we use event listeners, typically we want to reference a function rather than invoke or call a function. You might ask, “Don’t we want to call the function?” which technically yes but the screenshot below will help you understand why you don’t want to call the function.
In the example, the function is executed as soon as the line is read by the program. We see that as soon as we put the code into the console, “Hello, World” is immediately changed to “Goodbye, World” without us clicking on the text to make it change. Because we included parenthesis in our _handleClick _function, we executed the function before we could click on “Hello, World.” This is happening because we wrote our function with parenthesis on the end () of our function so therefore, we are calling or invoking the function rather than referencing it which we want to do instead.
Referencing a Function
If we take the same example and reference the function rather than invoke it, we will see very results of what we want to do.
In the screenshots above, we see that once we add the code into the console, “Hello, World” remains as is until we click on the text in which the event listener will occur and the handleClick function will run, changing “Hello, World” to “Goodbye, World” By not adding the parentheses at the end of our handleClick function, we are referencing it instead of invoking. The function will not execute until the event listener or “click” occurs which is what we want to happen. By referencing our handleClick function, it waits until the event listener occurs instead of executing as soon as the script loads as it would have done when we were invoking the function.
Top comments (0)