liveBook · Manning

Callback hell

As explained in Functional Programming in JavaScript

A deeply nested callback structure that is difficult to read, maintain, and extend.

Callback hell is a deeply nested structure created when asynchronous requests, user events, and DOM updates are handled inside successive callbacks. The code becomes difficult to follow and starts to resemble a horizontal pyramid, also called the “Christmas tree of doom.” section 8.1

Nested student requests

A request fetches students, sorts them, filters US records, fetches each student’s grades, averages them, and handles errors through nested success and error callbacks. The resulting indentation hides the actual sequence of operations.

Common symptoms include:

  • Relying on spacing and indentation to make tangled control flow readable. section 8.1
  • Creating closures that retain unnecessary outer variables. section 8.1

How Functional Programming in JavaScript covers it

How deep it goes
Explains nested callbacks, closure scope, and a continuation-passing refactoring, without extending to a complete functional rewrite.
Examples
Uses nested student and grade requests, click and mouse events, DOM rendering, and a closure bug inside a loop.
What it assumes
Assumes JavaScript callbacks, asynchronous requests, loops, closures, and DOM event handling.
What you can do after
Apply it via continuation-passing style to separate nested callbacks into named functions or lambda expressions.
How it connects
Connects asynchronous programming with callbacks, closures, event handling, continuation-passing style, and AJAX requests.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Functional Programming in JavaScript. The section links point to the parts of the book it draws on.