DEV Community

Mrityunjay-Palled
Mrityunjay-Palled

Posted on

Callbacks In JavaScript

Before discussing callbacks, let's take a look at an example

Image description

Output:

secondFunction   
firstFunction    
Enter fullscreen mode Exit fullscreen mode

In the above example we can see that the secondFunction is executed before the firstFunction even though firstFunction is called before the secondFunction.This happens because of asynchronous nature. Here secondFunction has a timeout of only 1000 milliseconds so it will be executed first and then firstFunction is executed with a timeout of 2000 milliseconds.
If we want to execute secondFunction only after the execution of the firstFunction then we have to use callbacks.

Callbacks: In JavaScript callbacks are nothing but the functions which are passed as an argument to another function, which is then invoked inside the outside function.

Example:

Image description

Output:

firstFunction
secondFunction
Enter fullscreen mode Exit fullscreen mode

In the above example we can see that secondFunction is passed as a
callback to the firstFunction which is then invoked inside the firstFunction only after the execution of firstFunction. Now we can see that firstFunction is executed first eventhough it has 2000 milliseconds of timeout.

Benefits Of Callbacks:

  1. Can be used when you want to invoke certain function only after
    the execution of another function

  2. Can be used when you are waiting for certain results to arrive.
    For example, data coming from an API will take some time, so we
    have to wait for the data to perform further operations.

Top comments (0)