How to avoid infinite kitchen sink

ByPanu Pitkamaki

Performing an operation after an asynchronous call has ended requires you to place subsequent program logic inside a callback. Performing multiple steps leads to deeply nested callbacks.

Is there any way to avoid deeply nested callbacks?

There's one good way to flatten nested callbacks. It's got to do with Promise resolving to a value, and it uses async functions and the await keyword. This method allows you to write flat program code free of nested callbacks.

Placing logic inside callback

When using callbacks, you're required to put dependent program logic that is to be executed after an asynchronous operation has completed inside a callback. When you combine multiple such calls, you end up with deeply nested code.

Wide image, should span negative margin to both sides.

Image that meets right end.

Image that doesn't meet right end.

Let's write a program that reads two files and prints their lengths. When using callbacks, our example looks like the following.

const fs = require("fs");

fs.readFile("file1.txt", "utf8", (err, file1) => {
  fs.readFile("file2.txt", "utf8", (err, file2) => {
    console.log(`total length: ${file1.length + file2.length}`);
  });
});

await

Promises and the await keyword can be used to write flat asynchronous code. You need a Promises-based version of your API.

The example Promises, async functions, and await would look like the following. Notice how flat the program structure is - there are no callbacks.

const fs = require("fs-promise");

(async function () {
  const file1 = await fs.readFile("file1.txt", "utf8");
  const file2 = await fs.readFile("file2.txt", "utf8");

  console.log(`total length: ${file1.length + file2.length}`);
})();

You can use async functions and the await keyword natively in new JS engines that support it or use TypeScript or Babel to convert code into the previous specifications of JavaScript.

Avoid infinite nesting callbacks

Use ES2017 async functions and await to write flat asynchronous code instead of infinite nesting callbacks. You can use await natively or with the help of TypeScript or Babel.

Related articles

Lists

Some unordered action.

• prettier favors “ double quotes by default
• gjslint (Google Closure Linter) favors ‘ single quotes
• standart (an NPM) packade), favors ‘ single quotes
• jslint favors “ double quotes by default
• eslint favors “ double quotes by default
• Typescript Contributors Coding Guidelines favor “ double quotes

And some ordered ones.

1. prettier favors “ double quotes by default
2. gjslint (Google Closure Linter) favors ‘ single quotes
3. standart (an NPM) packade), favors ‘ single quotes
4. jslint favors “ double quotes by default
5. eslint favors “ double quotes by default
6. Typescript Contributors Coding Guidelines favor “ double quotes

• Blocking and non-blocking calls in Node.js
• Promises - A gentle introduction

Node doesn't wait for your database call to finish?

Learn how asynchronous calls work and make your app run as you intended. Get short email course on asynchronicity and two chapters from Finish Your Node App.