Wat is een Callback?

In JavaScript worden callbacks vaak gebruikt om asynchrone taken af te handelen, zoals het ophalen van gegevens van een API, het lezen van bestanden of het wachten op gebruikersinvoer.

Callbacks vormen de basis van asynchrone programmering in JavaScript omdat ze het programma in staat stellen taken die tijd kosten af te handelen zonder de uitvoering van de rest van de code te blokkeren.

Hoe Callbacks Werken in Asynchrone Programmering

Bij een asynchrone bewerking wordt een callbackfunctie uitgevoerd zodra de bewerking is voltooid, zodat de rest van het programma kan doorgaan terwijl op de taak wordt gewacht.

• fetchData: Simuleert een asynchrone bewerking (zoals het ophalen van gegevens), die 2 seconden duurt om te voltooien. De callbackfunctie wordt aangeroepen zodra de gegevens beschikbaar zijn;
• displayData: De callbackfunctie die wordt doorgegeven aan fetchData. Deze wordt aangeroepen met de opgehaalde gegevens zodra de bewerking is voltooid;
• De rest van de code blijft uitvoeren terwijl de gegevens worden opgehaald, en wanneer de gegevens gereed zijn, wordt de callback geactiveerd om deze te verwerken.

Problemen met callbacks: Callback hell en geneste callbacks

Hoewel callbacks krachtig zijn, kunnen ze snel tot problemen leiden wanneer er veel asynchrone bewerkingen zijn die van elkaar afhankelijk zijn. Dit resulteert vaak in "callback hell", waarbij callbacks diep genest zijn, waardoor de code moeilijk leesbaar en onderhoudbaar wordt.

getUser(1, user => {
  console.log('User fetched:', user);

  getOrders(user.id, orders => {
    console.log('Orders fetched:', orders);

    getOrderDetails(orders[0].id, orderDetails => {
      console.log('Order details fetched:', orderDetails);

      getShippingStatus(orderDetails.shippingId, status => {
        console.log('Shipping status fetched:', status);
      });
    });
  });
});

Dit voorbeeld illustreert callback hell, een probleem dat optreedt wanneer meerdere asynchrone operaties van elkaar afhankelijk zijn, wat leidt tot diep geneste callbacks. Hier is elke functie (getUser, getOrders, getOrderDetails, getShippingStatus) afhankelijk van het resultaat van de vorige, wat resulteert in een geneste structuur die moeilijk te lezen, te onderhouden en te debuggen is. Deze aanpak bemoeilijkt foutafhandeling, stroomcontrole en toekomstige aanpassingen, waardoor de code omslachtig wordt naarmate het aantal callbacks toeneemt.

Callbacks refactoren voor overzichtelijkere code

Om callback hell te voorkomen en de leesbaarheid en onderhoudbaarheid van de code te verbeteren, zijn er enkele strategieën om callbacks te refactoren:

Benoemde functies: In plaats van anonieme callbackfuncties te gebruiken, benoemde functies aanmaken die herbruikbaar zijn en de code overzichtelijker houden.

function getUserCallback(user) {
  console.log('User fetched:', user);
  getOrders(user.id, getOrdersCallback);
}

function getOrdersCallback(orders) {
  console.log('Orders fetched:', orders);
  getOrderDetails(orders[0].id, getOrderDetailsCallback);
}

function getOrderDetailsCallback(orderDetails) {
  console.log('Order details fetched:', orderDetails);
  getShippingStatus(orderDetails.shippingId, getShippingStatusCallback);
}

function getShippingStatusCallback(status) {
  console.log('Shipping status fetched:', status);
}

getUser(1, getUserCallback);

Door gebruik te maken van benoemde functies wordt de stroom van de code duidelijker. Het is eenvoudiger te begrijpen, te onderhouden en te debuggen dan diep geneste anonieme callbacks.

Logica Uiteenrafelen: Verdeel complexe taken in kleinere functies. Elke functie voert één specifieke bewerking uit en roept de volgende bewerking aan. Dit vermindert geneste structuren en maakt de code meer modulair.

Promises (later behandeld in volgende hoofdstukken): Promises zijn een moderne alternatieve methode voor callbacks en bieden een schonere, beter leesbare manier om asynchrone operaties af te handelen. Promises helpen om callback hell te voorkomen door .then()-methoden te koppelen.