Callbacks in Javascript

The callback pattern is a javascript asynchronous pattern that enables us to run asynchronous functions one after the other.

What is an asynchronous function?

An asynchronous function is a long-running function that doesn’t block the execution thread and gets executed later by javascript instead of immediately. e.g setTimeout()

How Callbacks works ?

Copy
1function delay(duration, done) {
2
3setTimeout(done, duration*1000);
4
5}
6
7  console.log('starting delay');
8
9 delay(2,() => { console.log('two seconds delay')
10                 delay(3, () => { console.log('three seconds delay')})
11               }
12      )
13 
14console.log('another block of code')

if you copy the above code to any javascript environment and run you’ll have the following output

Copy
1starting delay
2another block of code
3two seconds delay
4three seconds delay

What is happened in the above Code?

1. At Line 1, I declared a function called delay which takes in a callback function done as an argument

2. Then I execute the delay function and passed the done function implementation as a Callback.

3. The done callback function gets executed after the delay by calling another delay function. Note: instead of calling delay again it could call any other function

Result Interpretation

from the result interpretation, the asynchronous functions get executed in the appropriate order hence bringing the need for callbacks.

if we didn’t implement the function in a callback manner we wouldn’t be able to execute the asynchronous function in the right order.

The asynchronous function delay didn’t block the thread execution because the section another block of code came before it even though it was called first.

Callbacks have some disadvantages as the above code seems difficult to read resulting in an anti-pattern called callback hell. We’ll explore better approaches in the next post