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 ?
1function delay(duration, done) {23setTimeout(done, duration*1000);45}67 console.log('starting delay');89 delay(2,() => { console.log('two seconds delay')10 delay(3, () => { console.log('three seconds delay')})11 }12 )1314console.log('another block of code')
if you copy the above code to any javascript environment and run you’ll have the following output
1starting delay2another block of code3two seconds delay4three seconds delay
What is happened in the above Code?
At Line 1, I declared a function called delay which takes in a callback function done as an argument
Then I execute the delay function and passed the done function implementation as a Callback.
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