Callback functies binnen Javascript

Gepubliceerd op 29 december 2018Leestijd: 3 minuten

Functies zijn zeer krachtige tools binnen Javascript. Het zijn zogenaamde first-class objecten, net zoals een string, int, en array. Hierdoor hebben functies meerdere mogelijkheden. Zo kunnen functies worden opgeslagen als variabelen, kunnen functies als parameters aan andere functies worden doorgegeven, etc. Een callback functie maakt gebruik van de laatste mogelijkheid.

Een callback functie is een functie die je meegeeft als parameter aan een andere functie die in die functie wordt uitgevoerd. Een voorbeeld:

Javascript callback blog.png

In bovenstaand voorbeeld is doneShopping de callbackfunctie. Bij het aanroepen van goShopping geven we de callback functie mee, doneShopping. De functie doneShopping wordt uitgevoerd binnen goShopping. Let wel, hier is de callback functie verplicht. Wanneer je de functie goShopping aanroept zonder een callback functie op te geven, zal er een fout optreden. Om de callback functie optioneel te maken, doe je het volgende:

Javascript callback functions optioneel.png

Hiermee bouw je ook gelijk een check in of de callback wel een functie is en niet bijvoorbeeld een string of een array.

Bovenstaande functies maken gebruik van ‘named functions’, functies met een naam die je opnieuw kan aanroepen. Je kunt voor een callback functie ook gebruik maken van aan anonieme functie:

Javascript callback functions.png

Deze functie heeft geen naam en kun je dus ook niet opnieuw aanroepen.

Het is ook mogelijk om meerdere callback functies aan te roepen. Hieronder voorbeeld met een jQuery Ajax call:

Javascript callback function.png

Bovenstaand voorbeeld is een synchrone functie, dat wil zeggen dat de code opeenvolgend wordt uitgevoerd. Bij sommige functies weet je niet hoe lang het duurt voordat de functie klaar is, een asynchrone functie.

Asynchrone callback

Een voorbeeld van een asynchrone functionaliteit is bijvoorbeeld aan een Ajax call of een websocket connectie om data op te halen vanaf de server. Je kunt hier gebruik maken van een asynchrone callback, zie het voorbeeld hieronder.

Javascript callback functions async.png

Hier geef je aan het request een extra parameter mee, de callback functie. Deze functie wordt niet direct uitgevoerd met de andere code, maar wordt opgeslagen en pas later uitgevoerd. De callback functie wordt in een wachtrij gezet, genaamd de ‘event loop’ en wordt pas uitgevoerd als er een result terug is van het request.

Callback Hell

Zoals ook al eerder besproken, kun je meerdere callbacks aanroepen binnen een functie. Stel, je wilt het resultaat van een request gebruiken om een ander request te doen.

Javascript callback callback hel.png

Zoals je ziet wordt de code een stuk minder leesbaar als je op deze manier gebruik maakt van callback functies. Dit wordt dan ook wel ‘callback hell’ genoemd. Wat je kunt doen om dit tegen te gaan en de code leesbaar te houden is goed op de naamgeving letten. Probeer een zo duidelijk mogelijke naam te geven aan de functies en variabelen. Ook kun je code van elkaar scheiden, dus een javascript file aanmaken met daarin je callback functies.