“Callbacks in JavaScript: A Comprehensive Guide with Examples”

Callback function in JavaScript

Callbacks in JavaScript are functions that are passed as arguments to other functions and are executed after the completion of the function.

Here are some key points to keep in mind:

1. Callbacks are functions that are passed as arguments to other functions.
2. They are executed after the completion of the function.
3. Callback functions can be synchronous or asynchronous.
4. In synchronous callbacks, the callback function is called immediately after the parent function finishes executing.
5. In asynchronous callbacks, the function does not wait for the callback to complete before moving on to the next task.
6. Callbacks are commonly used for event handling, AJAX requests, and other asynchronous tasks.
7. They allow for non-blocking behavior, which means that the program can continue to execute while waiting for a callback to be called.
8. The callback function is typically defined as a function expression and passed as an argument to the parent function.
9. Callback functions can take arguments and return values just like any other function.
10. Callback functions can be anonymous or named functions.
11. Error handling in callback functions is important, as errors can be thrown and need to be handled appropriately.

Let’s understand Callbacks with a fun example :

Example 1:

Let’s say we want to make a breakfast sandwich with bacon, eggs, and toast. However, each of these items takes a different amount of time to cook. Instead of waiting for each item to finish cooking before starting the next one, we can use callbacks to continue running the code until each item is ready to be added to the sandwich.

1.1

1.2

In this example, each cooking function takes a callback function as an argument. When the cooking is complete, the callback function is executed. The setTimeout function is used to simulate the time it takes to cook each item.

The cookBacon function is called first, and when it completes cooking the bacon, it executes the callback function that cooks the eggs. When the eggs are done, the callback function toasts the bread. Finally, when the toast is done, the last callback function is executed, which logs that the breakfast sandwich is ready.

This example demonstrates the power of callbacks in JavaScript, allowing us to write asynchronous code that runs efficiently without blocking the execution of the rest of our program.

Example 2:

Let’s say we have a function called getNumber() which takes a callback function as an argument. The getNumber() function generates a random number between 1 and 10 and passes it to the callback function as an argument.

2.1

Now, let’s define a callback function called printNumber() which simply logs the number to the console.

2.2

We can now call the getNumber() function and pass the printNumber() function as a callback.

2.3

When this code is executed, the getNumber() function generates a random number and passes it to the printNumber() function, which logs it to the console. This allows us to perform some action with the generated number without having to wait for the getNumber() function to complete its operation.

In summary, callbacks are functions passed as arguments to other functions and are executed after the completion of the parent function. They are useful in asynchronous programming and can handle errors. With callbacks, we can write non-blocking code that runs efficiently.

Happy Coding !