Skip to content 
JavaScript callbacks are important to support the asynchronous operations such as user interactions (e.g., mouse clicks), network requests (e.g., loading images or making API calls), timers (e.g., setTimeout()), and reading files.
Callbacks are functions that you pass as parameters to other functions. These receiving functions will execute the callback functions at some point in the future, based on when the receiving function decides to execute the callback function. For instance, if you write button.addEventListener(‘click’, function(){…}), you’re creating a callback. The callback function won’t run immediately; it’ll run whenever the button gets clicked. That is the basic concept behind JavaScript callbacks, delaying the execution of code until something has happened.
Although it may take some getting used to, once you get the hang of how callbacks operate, you’ll begin to see them throughout your code. So let’s go through five basic concepts that will enable you to learn and apply callbacks successfully:
1. What is a Callback?
A callback is simply a function that you’ve passed to another function. That receiving function will call the callback function at a later time. Thus, the term “callback” was chosen to indicate calling-back-later.
In JavaScript callbacks, it is the receiving function that determines when to invoke its callback function. The receiving function could call the callback immediately (a synchronous callback) or sometime in the future (an asynchronous callback). In either case, you are delegating control to someone else.
For example, when you use the built-in setTimeout() function, you give it two pieces of information, a callback and a delay. Once the delay has elapsed, setTimeout() will call your callback. You don’t know precisely when this will occur, only that it should occur somewhere near your requested time.
Callbacks aren’t a specific part of JavaScript. They are simply functions being passed to another function in a particular way. Since functions in JavaScript are first-class objects (i.e., they can be treated as values like anything else), passing functions around as values is natural and very effective.
2. Synchronous Callbacks: Run Now.
All callbacks aren’t asynchronous. There exist synchronous callbacks that are executed immediately within the context of the invoking function.
A prime example of synchronous callbacks is the Array.prototype.forEach() method. You pass a callback and forEach() invokes your callback for every element one by one. Similarly, map(), filter(), and reduce() all create synchronous callbacks.
Synchronous callbacks are useful for encapsulation and reuse. Rather than writing out a manual loop to iterate over each element in an array, you can describe what you want done with each element in a single callback. The looping logic remains hidden inside the array method itself, and your custom logic remains hidden inside your own callback.
Understand the distinction between synchronous and asynchronous callbacks. Synchronous callbacks keep things linear on the call stack. Asynchronous callbacks force you to think about how your code interacts with both the event loop and the task queue.
3. Asynchronous Callbacks: Managing Delayed Operations and Event Driven Code
By far, the most common application of JavaScript callbacks is for managing asynchronous operations. An operation begins now, but doesn’t complete until later fetching data from a remote server, listening for a user action (such as clicking), starting a timer.
When you pass a callback to setTimeout(), fetch(), or addEventListener(), JavaScript does NOT pause and wait for an event to occur. Instead, JavaScript creates an entry in the task queue for your callback and continues running whatever code follows in your original function. At some point later, the event occurs or the timer elapses, your callback is placed on the task-queue and ultimately invoked.
This non-blocking nature of JavaScript makes it well suited for developing dynamic, interactive Web Applications. Your application can react to user actions while waiting for a network response. And again, callbacks form the basis of this design paradigm.
But there is a catch: Asynchronous JavaScript callbacks require a new mental discipline. You can no longer assume results are available immediately. Instead, you place the code that depends on those results inside the callback.
4. Callback Hell: The Pyramid of Doom
When working with multiple asynchronous operations where each subsequent operation relies on previous ones, it is easy to fall into a trap known as “callback hell.” This refers to having deeply nested callbacks, which make code nearly impossible to read or maintain.
For example, let’s say we need to load user info, then load their posts, then load comments on their first post. Each step involves a callback that includes the next steps. The nesting causes your indentation to grow significantly to the right side of your screen. Also, since each level of recursion will involve error checking, your code becomes increasingly redundant.
While “callback hell” is not actually a bug in how JavaScript implements callbacks per se, it arises naturally due to naively recursive use of callbacks. Such nested structures make code brittle and harder to debug. However, knowing how to convert such structures into simpler forms is essential.
Fortunately, Modern JavaScript introduces alternative approaches (promises and async/await) that simplify this process. While you will continue to encounter callback based APIs (due to legacy code or older Node.js versions), learning how to refactor “callback hell” into more manageable forms is an important skill.
5. Refactoring and Alternative Strategies for Dealing with Deeply Nested Callbacks
There are several ways you can avoid “callback hell”. One of the easiest is simply naming your callbacks rather than writing anonymous functions. Naming functions allows you to define named functions outside of your current scope, and thus greatly reduces the amount of nesting needed.
Another strategy is to break up large chains into smaller reusable functions that accept callbacks. Not only does this improve clarity and testability for individual parts of your codebase, but also improves overall organization.
And finally, when writing new applications, I highly recommend using promises instead. A promise represents a future value. Using .then() to chain together callbacks is much easier than using nested callbacks. Plus, Promises include built-in error handling via .catch(). Even better yet is async/await which is built on top of Promises and enables you to write asynchronous-looking code!
However, regardless of how you choose to write asynchronous code (callbacks, promises, or async/await), you will likely still need to understand how JavaScript callbacks work because many APIs (setTimeout(), DOM events, old Node.js) rely heavily on callbacks. Although Promises can wrap callbacks (via new Promise()) you need to understand how to create callbacks in order to effectively utilize Promises.
Mastery of callbacks will allow you to work with virtually any type of asynchronous JavaScript code whether it uses callbacks, Promises or async/await.
Putting It All Together
With these five basic concepts (definition, synchronous callbacks, asynchronous callbacks, callback hell, and refactoring), you now have a comprehensive overview of how JavaScript callbacks operate.
First off — try writing simple callbacks with setTimeout() and addEventListener(). Next, experiment with using array methods with callbacks. Follow that with nested callbacks to experience the dreaded “pyramid of doom”. Lastly find yourself learning how to wrap callbacks in Promises so that you can see how modern JavaScript builds on top of this established paradigm.
As you continue practicing and experimenting with asynchronous control flow with callbacks, you will quickly become accustomed to thinking about controlling when and how your code operates relative to time.
Key Reference Guide for Mastering JavaScript Callbacks
Below is a short checklist reference guide to aid your practice:
- A callback is simply a function that you’ve passed to another function. It will be called at some point in the future. Possibly after some sort of event or delay.
- Synchronous callbacks run immediately: Examples: forEach(), map(), filter().
- Asynchronous callbacks run after an event or delay: Examples: setTimeout(), addEventListener(), fetch().
- Avoid excessive nesting: Callback hell is hard to read/debug.
- Name your callbacks: Reduce indentation complexity. Define separate named functions outside of your current scope.
- Use Promises/async/await for complex async workflows: They build on top of callbacks but provide nicer syntax.
- Always manage errors in your callbacks:
- Conventionally: First parameter = Error object (Node.js). Test your callbacks under various timing conditions:
- Use setTimeout() as a placeholder for simulating delayed operations.
See additional resources below for further guidance into these areas: JavaScript.info’s guide on callbacks is a great resource for learning how to properly implement & use callbacks. MDN documentation’s intro page on Asynchronous Programming in JavaScript covers how callbacks fit into modern JavaScript paradigms
New to HTML? Start Here: HTML Tutorial for Beginners: Your Complete Introduction to HTML Basics
New to CSS? Start Here: CSS Introduction: Master 5 Core Concepts Easily
New to JavaScript? JavaScript Introduction: 5 Proven Steps to Learn JS
[INSERT_ELEMENTOR id=”122″]
