---
# System prepended metadata

title: Qu'est-ce qu'une fonction de callback ?
tags: [ironhack]

---

---
tags: ironhack
---

Qu'est-ce qu'une fonction de callback ?
===

==C'est une fonction passée en paramètre== (à une autre fonction), comme dans cet exemple où une fonction est passée à `.addEventListener` :
```js=
btnEl.addEventListener('click', function () {
  alert("Just clicked the button !!!");
});

console.log("THE END")
```
> :bulb: notre fonction de callback est ici une fonction anonyme, ie: sans nom

Ici, dans l'ordre, nous verrons s'afficher :
- le message `THE END` dans la console
- une boite de dialogue `Just clicked !!!` chaque fois que l'utilisateur cliquera sur le lien de la page.

---

Même si comme on le sait déjà notre programme javascript est lu de haut en bas, on comprend que :
:::warning
Toutes nos lignes de code ne sont pas forcément exécutées dans l'ordre où elles sont écrites. 🙃
:::

Eg, ici la ligne L2 de notre `alert()` interviendra après les autres :

```
L1 › L3 › L4 › L5 ⌚ L2
```

Ceci est justement dû à notre fonction de callback passée en paramètre de `.on`, **qui ne sera exécutée que plus tard** : au moment du `"click"` de l'utilisateur.

En conclusion
---

Les fonctions de callback sont fondamentales dans nos interfaces, puisqu'elles permettent à du code d'être exécuté **plus tard dans le temps** ⌚ en réponse à des actions à venir de l'utilisateur.

Elles présentent également l'avantage pour le programme de ne pas rester "bloqué" en attendant le `"click"` de l'utilisateur, mais au contraire de pouvoir faire autre chose en attendant : comme de contrôler une animation dans la page, faire une requete ajax...etc.
On parle du caractère **non-bloquant** du code de la fonction de callback

---

NB : Pour aller plus loin http://learn.ironhack.com/#/learning_unit/6746