Aperçus sur la Call Stack, La face cachée de la pile
Tags: javascript, beginners, french
Published: 2021-08-27 15:19:55

### Call Stack

JavaScript est un langage *single/mono-thread* (mono-tâche) et synchrone. C'est-à-dire que l'interpréteur JS exécutera le code ligne par ligne, de la première à la dernière ligne.
Pourquoi ? Parce qu'il n'a qu'une seule *call stack* (pile d'exécution).

Voyons ce qu'on peut lire sur le [MDN](https://developer.mozilla.org/fr/docs/Glossary/Call_Stack) à ce sujet : 

> Une pile d'exécution est le mécanisme d'un interpréteur (comme l'interpréteur de JavaScript sur un navigateur web) pour conserver la trace de son emplacement dans un script qui appelle plusieurs fonctions depuis d'autres fonctions — quelle fonction est en cours d'exécution, quelles fonctions sont appelées depuis cette fonction et doivent être appelées ensuite, etc.

[Felix Gerschau](https://felixgerschau.com/) dans son article [JavaScript Event Loop And Call Stack Explained](https://felixgerschau.com/javascript-event-loop-call-stack/) résume ainsi : 
> La *call stack* est un mécanisme qui aide l'interpréteur JavaScript à **garder la trace des fonctions que le script appelle.**

*Garder la trace des fonctions que le script appelle* pour y retourner une fois la fonction terminée.


### Comment ça se passe ?
Lorsqu'une fonction est appelée, l'interpréteur l'ajoute à la *call stack* et l'exécute.

Toutes les fonctions appelées par cette première fonction sont ajoutées ou plutôt empilées sur la *call stack* pour être exécutées le moment venu.

Quand une fonction est terminée, celle-ci est retirée de la *call stack* et l'interpréteur retourne à la fonction précédente de la pile.

### Un exemple concret
Je vais reprendre et traduire l'exemple donné sur la version en-US du [MDN](https://developer.mozilla.org/en-US/docs/Glossary/Call_Stack):


```
function greeting() {
   // [1] du code par ici
   sayHi();
   // [2] du code par là
}
function sayHi() {
   return "Hi!";
}

// appelle la fonction 'greeting'
greeting();

// [3] Du code ...
``` 

Bon alors, comment ça se passe ici ? Le code sera exécuté ainsi :


1 - L'interpréteur atteint l'appelle de la fonction greeting().

2 - greeting() est ajouté dans la *call stack*.

> Call stack:
 - greeting

3 - Le code de la fonction greeting() est exécuté jusqu'à sayHi().

4 - La fonction sayHi() est appelée.

5 - La fonction sayHi() est empilée sur la *call stack*.

> Call stack:
- sayHi
- greeting


6 - Le code de la fonction sayHi() est exécuté jusqu'à sa fin.

7 - Retour à la ligne où la fonction sayHi() a été appelée pour exécuter le reste de la fonction greeting().

8 - sayHi() est retirée de la pile.


> 
Call stack:
- greeting

9 - Une fois toute la fonction greeting() exécutée, retour à la ligne où elle a été appelée pour exécuter la suite du code.

10 - La fonction greeting() est retirée de la pile.


> 
Call stack:
- EMPTY


### Taille limite de la *call stack*

 On rappelait au début de ce court article que le JS est single thread et synchrone. Le script n'exécutera une instruction que l'une après l'autre. Si une fonction, par exemple, met du temps à retourner un résultat, c'est tout le code qui sera bloqué pour autant de temps. Et dans l'hypothèse d'une fonction récursive telle que celle-ci :


```
function a() {
    b();
}

function b() {
    a();
}

a();
``` 

...on se retrouverait avec une page qui freeze indéfiniment.

C'est pour empêcher cela que les navigateurs ont une *call stack* de taille limitée. Limite, qui, lorsqu'elle est atteinte, nous gratifie de cette erreur qu'on a tous rencontrée un jour: 


> 
Uncaught RangeError: Maximum call stack size exceeded