Vanilla Javascript create a custom callback function

A callback is a function that is passed in as an argument into another function. The purpose of a callback function is to be called after a function has been executed.

The example below illustrates a callback function.

The function above capitalizes the text in a passed in html element. It takes in the element that should be capitalized and a function that will be called immediately after.

The element is passed into the callback function in this case, but note that something else can be passed in, depending on your use case. In this use case, we want the user of the function to be able to do anything with the element in the callback function (which is why we passed the element into the callback function).

Below, we use makeCapital() to capitalize the text in a HTML element and then change the color of the text to red in the callback function.

Callback functions are synchronous in nature. This means that they will wait for a function to complete before being executed. In this case, our callback function waited for the paragraph to be capitalized before changing it’s color to red.