When should I callback?

Intro to the concept and usage of callback functions in JavaScript

What is a callback function?

A callback function is essentially a function passed as an argument to another function. The function that accepts other functions is called a higher-order function — containing the logic for when the callback function gets executed. The callback is a function that is invoked or called after something else happens. Whether it runs or not depends entirely on something else happening and not simply from running the program.

Why should I use a callback?

JavaScript is an event-driven language which means instead of executing code in sequence from top to bottom, the program is driven by the events such as a mouse click, scroll, page reload, or higher-order function calls. The lines of code triggering the event gets executed first and skips over the other lines. We need callback functions to handle this asynchronous control flow. It’s a way for us to make sure specific lines of code does not execute until another set of code has completed its execution.

Without callback function…

• In the example below, the function first is executed first then then the function second is executed second but the console will log the message of the second function first and then the first function after due to the one 1,000 millisecond delay using setTimeout function. What if we want to execute the second function only when the first function has been fully executed?

Callback function added…

• To resolve the problem above, we can use a callback function by adding the second function as an argument to the first function. The second function must wait (1,000 milliseconds) until the first function has been completed before getting executed.

What if I enter callback hell…?

If you have a callback that’s in another callback that’s in another callback that’s in another callback…you’ve most likely entered the callback hell which is a phenomenon where multiple callbacks are nested after another (usually in Node, rare in frontend JavaScript). Your code can still work as intended but nesting the callbacks can be difficult for another developer to read.

Leave comments to explain your code

In case you want to leave your nested callbacks, you should leave clear self-explanatory comments explaining the steps for another developer to understand.

Split up callbacks into smaller functions

Break up the nested functions into smaller functions to reduce the lines of nested code for ease in readability.

Use promises

Nested callbacks in JavaScript are commonly replaced by promises especially when you need to wait on a response from multiple API requests that are asynchronous.

A Promise is a special Javascript object that represents the eventual result of an asynchronous action. A promise is kind of a proxy for a value that we don’t have yet.

Use async/await

The latest async, await resolves the callback hell pretty nicely and provides more ease in readability for developers. They are extensions of promises.