[Go Make Things] What is a callback function?

By rahmat hidayat

Wednesday, January 15, 2025

​ Callback functions are a core part of how a lot of modern JavaScript methods work. But what exactly are they? A callback function is just a function that another function runs (either immediately or a later time). For example, consider the Element.addEventListener() method. You pass in the type of event to listen for, and a callback function that should run when the event happens… document.addEventListener('click', function (event) { console.log('The document was clicked!'); }); A lot of methods that modify arrays ([]) loop over each item in the array and run a callback function on each one. For example, here the Array.prototype.forEach() method runs the callback function on every wizard in the wizards array, and logs their name to the console… let wizards = ['Merlin', 'Gandalf', 'Radagast']; wizards.forEach(function (wizard) { console.log(wizard); }); The examples above use anonymous callback functions. A new unnamed function is created and passed directly into the method. But you can also predefine a named function and pass that in as a callback function instead. When you do, omit the the parentheses (()) at the end. Those cause the function to run, and we only to pass in the function itself. The method that's using it will run it when needed. function handleClicks (event) { console.log(`The ${event.target} was clicked!`); } document.addEventListener('click', handleClicks); Looking at this code, you might also wonder: where do the arguments passed into the callback functions come from? We'll talk about that tomorrow! Like this? A Go Make Things membership is the best way to support my work and help me create more free content. Cheers, Chris ​ Want to share this with others or read it later? View it in a browser.​ ​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+