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

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">

JavaScript runs code sequentially in top-down order. However, there are some cases that code runs (or must run) after something else happens and also not sequentially. This is called asynchronous programming.

Callbacks make sure that a function is not going to run before a task is completed but will run right after the task has completed. It helps us develop asynchronous JavaScript code and keeps us safe from problems and errors.

In JavaScript, the way to create a callback function is to pass it as a parameter to another function, and then to call it back right after something has happened or some task is completed.

- freecodecamp.org

You can read more here.

The above answers are right. Mine is just a simplification of one of the reasons (async nature)

Note that NOT everything is sequential.

• A call to a database could take 100ms or 200ms or 1s to return data.
• Reading a file that you do not know the size it could take X seconds.

In cases where you do not know how long a operation will take you use the callback approach and that is a JavaScript feature.

Some languages block the flow (I will wait the call to the database) or create threads ( I will execute in another "process" those operations)

JS will go with Promises and callbacks.