Why to use callback functions when I can simply call them?

I was reading about callback functions here (also in an online course which I am participating) and now I am stuck. The reason is that I cannot understand Why do I need to use callback functions if I can simply call them. Exemples below:

1 – Using callback functions:

    function showArticle(id, callbackSuccess, callbackError){
        
        if (true){
            callbackSuccess("This is a callback function", "It is very utilized.");
        } else {
            callbackError("Error on data recovery.");
        }

    }

    var callbackSuccess = function(title, description){
        document.write("<h1>" + title + "</h1>");
        document.write("<hr>");
        document.write("<p>" + description + "</p>");
    }

    var callbackError = function(error){
        document.write("<p><b>Erro:</b>" + error + "</p>");
    }

    showArticle(1, callbackSuccess, callbackError);

2 – Here is my code not using callback functions and having the same results:

    function showArticle(id){
        
        if (true){
            callbackSuccess("This is a callback function", "It is very utilized.");
        } else {
            callbackError("Error on data recovery.");
        }

    }

    var callbackSuccess = function(title, description){
        document.write("<h1>" + title + "</h1>");
        document.write("<hr>");
        document.write("<p>" + description + "</p>");
    }

    var callbackError = function(error){
        document.write("<p><b>Erro:</b>" + error + "</p>");
    }

    showArticle(1);

Why should I use callback functions and not simply calling them in the example 2?

Answer

You’re right, there’s no point to the callback functions in the example you’ve given, but that’s not how callback functions are normally used.

Typically, callbacks are used:

1. By iteration, mapping, or filtering functions that call your callback for every element in an array, list, or other container

2. By functions that perform asynchronous work that call your callback when the work is successfully completed, fails, or both (depending on the style of the API you’re calling)

3. By functions that accept callbacks they’ll call when or if something happens, such as a click event handler on a DOM element

…but there are other categories as well.

The filter function on arrays is an example of #1: It calls the callback for each entry in the array, using the return value of the callback to decide whether the entry should be in the new, filtered array it returns:

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const odds = numbers.filter(num => {
    console.log(`callback called with ${num}`); // logs 10 times
    return num % 2;
});
console.log(odds); // [1, 3, 5, 7, 9]

The Promise methods then, catch, and finally are examples of #2. Let’s assume we have a startSomethingAsynchronous function that returns a promise. Here’s how the fulfillment and rejection handlers (callbacks) might be set up:

startSomethingAsynchronous()                // Starts an asynchronous process
.then(result => {                           // <−+
    // ...do something with the result...   //   +− This is a fulfillment handler
})                                          // <−+
.catch(error => {                           // <−+
    // ...report or handle error...         //   +− This is a rejection handler
});                                         // <−+

The fulfillment handler is called if the promise from startSomethingAsynchronous() is fulfilled (successfully completed). The rejection handler is called if that promise is rejected (fails), or if that promise is fulfilled but the promise returned by then rejects (for instance, because an error occurs in the fulfillment handler). (Chaining things like this is fairly common, but there are lots of other ways to use promises, this is just one example.)

The addEventListener function in the DOM is an example of #3:

document.querySelector("input[type=button]")
    .addEventListener("click", function() {
        console.log("Clicked!"); // logs as many times as you click the button
    });

<input type="button" value="Click Me">