Callback Hell
V tomto článku se dozvíte co je to Callback Hell (callbackové peklo). Ještě předtím si ale musíme říct co to jsou callbacky a proč se v JavaScriptu používají nebo používaly.
JavaScript je jednovláknový
JavaScript umí dělat jen jednu věc najednou. Neumí například něco vypisovat do konzole a zároveň při tom něco počítat, musí to udělat zvlášť. Následující ukázka ukazuje, že když například použijeme funkci alert, tak JavaScript musí počkat až uživatel zavře vyskakovací okno a až poté může pokračovat v provádění kódu. Možná to úplně nesouvisí s tím že je JavaScript jednovláknový, ale rozhodně to ukazuje že se jednotlivé příkazy musí vykonat postupně.
alert("zavřením tohoto okna bude moci JavaScript pokračovat ve vykonávání kódu");
console.log("druhý");
Co je to callback?
V předchozí ukázce kódu JavaScript při zavolání funkce alert přestane vykonávat kód a počká až zavřeme vyskakovací okno. U některých funkcí ale JavaScript nečeká a namísto toho pokračuje dál. Příkladem může být funkce setTimeout, kterou když zavoláme tak se po nějakém stanoveném čase zavolá předaná funkce. JavaScript nebude čekat až přijde čas funkci zavolat, namísto toho bude pokračovat v provádění dalšího kódu a zjišťování jestli už je potřeba funkci zavolat nebo ne ho vůbec nezajímá. Některé operace totiž JavaScript na starosti nemá. Funkci setTimeout má na starosti prohlížeč, JavaScript mu jen řekne že ji má provést. Zavoláním funkce setTimeout prohlížeči JavaScript řekne: "za tento čas mě informuj o tom že mám vykonat tuto funkci". JavaScript tedy při volání funkce setTimeout prohlížeči předává funkci, které se říká callback. Callback je funkce, kterou předáváme jiné funkci aby ji zavolala až dokončí svoji práci. Callbacky používáme tam, kde trvá delší čas než se provede nějaká operace, například při získávání dat z API.
setTimeout(() => { // předání callbacku
console.log("třetí");
}, 1000);
// JavaScript nečeká až uběhna jedna sekunda, jede dál
console.log("druhý");
Co je to Callback Hell?
Callbacky do sebe můžeme navzájem vnořovat. Uvnitř callback funkce můžeme zavolat nějakou další funkci, která přijímá jako argument callback a tak dále. Pro jednoduchost si v následující ukázce ukážeme vnořování callbacků s funkcí setTimeout i když bychom při jejím použití v praxi vnořování callbacků nemuseli použít. Po každé minutě budeme chtít aby se vypsala jiná zpráva, takže do sebe navzájem budeme vnořovat funkce setTimeout s callbacky.
console.log("první");
setTimeout(() => {
console.log("druhý");
setTimeout(() => {
console.log("třetí");
}, 1000);
}, 1000);
}, 1000);
Jak vidíte, takové vnořování kódu nevypadá vůbec hezky a dělá nám náš kód méně čitelnější. Říká se tomu Callback Hell (callbackové peklo). Proto byly do JavaScriptu přidány promisy, které tento problém řeší.