# Callback functies

Een mogelijke manier om te voorkomen dat een functie je code niet zal blokkeren is door gebruik te maken van callback functies.

Definitie

Callbacks zijn functies die als argumenten worden doorgegeven aan andere functies en worden uitgevoerd nadat een specifieke taak is voltooid.

# Syntax

Een callback wordt vaak gedefinieerd als een anonieme functie die wordt doorgegeven als een argument aan een andere functie. De ontvangende functie voert de callback uit wanneer dat nodig is.

function fetchData(callback) {
  console.log("Start ophalen van gegevens");
  setTimeout(() => {
    console.log("Gegevens opgehaald");
    callback("Mijn gegevens");
  }, 2000);
}

function processData(data) {
  console.log("Verwerken van gegevens:", data);
}

// Roep fetchData aan met processData als callback
fetchData(processData);

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Callback Hell

Callbacks kunnen genest worden, wat kan leiden tot een situatie die bekend staat als “Callback Hell” of “Pyramid of Doom”. Dit kan de code moeilijk leesbaar maken. Callbacks werken dus prima zolang het kleine, geïsoleerde functies zijn.

function fetchData(callback) {
  setTimeout(() => {
    console.log("Gegevens opgehaald");
    callback("Mijn gegevens");
  }, 2000);
}

function processData(data, callback) {
  setTimeout(() => {
    console.log("Gegevens verwerkt");
    callback(`Verwerkte gegevens: ${data}`);
  }, 2000);
}

function displayResult(result) {
  console.log("Resultaat weergeven:", result);
}

// Callback hell
fetchData((data) => {
  processData(data, (processedData) => {
    displayResult(processedData);
  });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Tip

Promises en async/await zijn ontstaan als oplossingen voor dit probleem en zijn aangewezen bij complexere asynchrone code.

# In de praktijk

Callbacks kunnen mogelijks erg complex worden maar kunnen ook zeer nuttig zijn. Zo worden ze namelijk veel gebruikt bij het werken met gebeurtenissen of events.

<button id="myButton">Klik me</button>

<script>
  // Eventlistener met callback
  document.getElementById("myButton").addEventListener("click", () => {
    console.log("Knop is geklikt!");
  });
</script>

1
2
3
4
5
6
7
8

Merk op dat er bij callback-functies vaker gebruik wordt gemaakt van de arrow-notatie. Arrow functions worden vaak gebruikt bij het definiëren van callbacks in JavaScript om verschillende redenen:

Kortere syntax en beter leesbare anonieme functies
Geen binding van this

document.getElementById("myButton").addEventListener("click", () => {
  console.log("Knop is geklikt!");
});

// Langer
document.getElementById("myButton").addEventListener("click", function () {
  console.log("Knop is geklikt!");
});

1
2
3
4
5
6
7
8

Arrow functions behouden de waarde van this van het omliggende scope, wat handig is in situaties waarin je de waarde van this wilt behouden binnen een callback-functie.

function Counter() {
  this.count = 0;

  // Zonder arrow function zou 'this' naar de callback-functie zelf verwijzen
  setInterval(() => {
    this.count++;
    console.log(this.count);
  }, 1000);
}

const counter = new Counter();

1
2
3
4
5
6
7
8
9
10
11

Introductie Promises