JavaScript Callbacks

A JavaScript callback is a function passed as an argument to another function, which is then executed (or "called back") at a later point in time to complete a specific task.

This mechanism is fundamental to JavaScript's event-driven and asynchronous programming model.

A callback function is a function passed as an argument into another function.

A callback function is intended to be executed later .

Later is typically when a specific event occurs or an asynchronous operation completes.

The name "callback" stems from the idea that the outer function will "call you back" later when it has finished its task

• Asynchronous Callbacks Asynchronous callbacks are executed at a later time, allowing the main program to continue running without waiting. This is essential for preventing the application from freezing during long-running tasks like network requests.
• Synchronous Callbacks Synchronous Callbacks are executed immediately within the outer function, blocking further operations until completion. Array methods like map(), filter(), and forEach() use synchronous callbacks.

Callbacks are often used in JavaScript, especially in event handling.

User interactions, such as button clicks or key presses, can be handled by providing a callback function to an event listener :

In the example above, displayDate is a callback function passed as an argument to the addEventListener() method.

displayDate will be called when a user clicks the button with id="myButton".

When you pass a function as an argument, remember not to use parenthesis.

Right: displayDate

Wrong: displayDate()

Windows functions like setTimeout() use callbacks to execute code after a specified delay.

In the example above, myFunction is a callback function passed as an argument to setTimeout() .

3000 is the number of milliseconds before myFunction will be called.

Many built-in array methods like map(), filter(), and forEach() accept callback functions to define the action performed on each element.

The forEach() method calls a function (a callback function) once for each array element.

The map() method creates a new array by performing a function on each array element.

Sometimes you would like to have better control over when to execute a function.

Suppose you want to do a calculation, and then display the result.

You could first call the calculator function myCalculator , and then call the display function myDisplayer :

Or, you could call the calculator function myCalculator , and let the calculator function call the display function myDisplayer :

The problem with the first example above, is that you have to call two functions to display the result.

The problem with the second example, is that you cannot prevent the calculator function from displaying the result.

Now it is time to bring in a callback.

Using a callback, you could call the calculator function ( myCalculator ) with a callback ( myCallback ), and let the calculator function run the callback after the calculation is finished:

In the example above, myDisplayer is used as a callback function . It is passed to myCalculator() as an argument . Callback Key Concepts Function as an Argument Because functions in JavaScript can be treated like any other variable or object, you can pass them as arguments to other functions. Deferred Execution The key benefit of a callback is that it allows for deferred execution, meaning the callback function does not run immediately. Instead, it runs later, after a specific condition is met, an event occurs, or an asynchronous operation completes. This mechanism ensures that the program can continue to execute other code while waiting for long-running tasks (like fetching data from a server, reading a file, or waiting for a user click) to complete .

It is passed to myCalculator() as an argument .

• Function as an Argument Because functions in JavaScript can be treated like any other variable or object, you can pass them as arguments to other functions.
• Deferred Execution The key benefit of a callback is that it allows for deferred execution, meaning the callback function does not run immediately. Instead, it runs later, after a specific condition is met, an event occurs, or an asynchronous operation completes. This mechanism ensures that the program can continue to execute other code while waiting for long-running tasks (like fetching data from a server, reading a file, or waiting for a user click) to complete .