Что такое Callback Hell и как с ним бороться?

Частый вопрос с собеса, особенно если идти куда-то повыше стажёра.

Callback Hell — это ситуация в асинхронном программировании, когда вложенные друг в друга функции обратного вызова (он же callback) образуют "лесенку", что делает код трудным для чтения и сопровождения.

javascript
1doSomething(function(result) {
2    doSomethingElse(result, function(newResult) {
3        doAnotherThing(newResult, function(finalResult) {
4            doSomethingMore(finalResult, function(lastResult) {
5                console.log(lastResult);
6            });
7        });
8    });
9});
10

Как с этим можно бороться?

Конечно же промисы и async/await синтаксис:

Промисы позволяют писать асинхронный код более линейно и читаемо благодаря цепочке вызовов (chaining):

javascript
1doSomething()
2    .then(result => doSomethingElse(result))
3    .then(newResult => doAnotherThing(newResult))
4    .then(finalResult => console.log(finalResult))
5    .catch(error => console.error(error));
6

А async/await — это более современный синтаксис над промисами, который так же позволяет развернуть вложенные колбеки в плоский код:

javascript
1async function process() {
2    try {
3        const result = await doSomething();
4        const newResult = await doSomethingElse(result);
5        const finalResult = await doAnotherThing(newResult);
6        console.log(finalResult);
7    } catch (error) {
8        console.error(error);
9    }
10}
11
12process();
13

И о Promise, и о async/await у меня уже есть более подробные посты в телеграм канале