max-nested-callbacks

Enforce a maximum depth that callbacks can be nested

Many JavaScript libraries use the callback pattern to manage asynchronous operations. A program of any complexity will most likely need to manage several asynchronous operations at various levels of concurrency. A common pitfall that is easy to fall into is nesting callbacks, which makes code more difficult to read the deeper the callbacks are nested.

foo(function () { bar(function () { baz(function() { qux(function () { }); }); }); }); 1
2
3
4
5
6
7
8
9

Rule Details

This rule enforces a maximum depth that callbacks can be nested to increase code clarity.

Options

This rule has a number or object option:

"max" (default 10) enforces a maximum depth that callbacks can be nested

Deprecated: The object property maximum is deprecated; please use the object property max instead.

max

Examples of incorrect code for this rule with the { "max": 3 } option:

Open in Playground

/*eslint max-nested-callbacks: ["error", 3]*/ foo1(function() { foo2(function() { foo3(function() { foo4(function() {  // Do something  }); }); }); }); 1
2
3
4
5
6
7
8
9
10
11

Examples of correct code for this rule with the { "max": 3 } option:

Open in Playground

/*eslint max-nested-callbacks: ["error", 3]*/ foo1(handleFoo1); function handleFoo1() { foo2(handleFoo2); } function handleFoo2() { foo3(handleFoo3); } function handleFoo3() { foo4(handleFoo4); } function handleFoo4() { foo5(); } 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19