Aperçus sur la Call Stack, La face cachée de la pile

Benjamin De Mot — Fri, 27 Aug 2021 15:19:55 +0000

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 à 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 dans son article JavaScript Event Loop And Call Stack Explained 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:

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

Un Dev Junior parle aux Dev Juniors

Benjamin De Mot — Thu, 26 Aug 2021 11:32:55 +0000

Ta-da-da-daaam!

Commençons déjà par se présenter.

Je me nomme Benjamin De Mot, aucun lien de parenté. Si vous captez les ref', vous pouvez probablement en déduire mon âge (i.e., 42-7).

Je suis en reconversion dans le développement web. Et d'ailleurs, ça y est, je suis officiellement diplômé Dev Web 👏 après une formation de 6 mois chez OpenClassrooms.
Tournée de Champomy! 🎉

J'adore créer des machins avec mes gros doigts, mon clavier et ma cervelle (parfois). J'aime vraiment chercher et trouver (parfois) des solutions à des problèmes logiques ou esthétiques.

Hey d'ailleurs j'viens de trouver une implémentation JS giga-easy du Merge Sort Algorythm.

Mais surtout, j'aime apprendre et comprendre. On en reparlera plus bas.

Mon kiff à moi, c'est le JavaScript. Mais je ne suis pas sectaire. Une fois que je serai Dev JS Senior (il est l'ooooor) ou avant, je me pencherai sur d'autres langages, ne serait-ce que pour ma culture perso et la compréhension plus profonde de l'informatique.

Bref.

Suivant les conseils de Nicolas Brondin-Bernard, je me lance dans l'écriture d'un blog. Je vais y partager mon expérience de la reconversion, de la formation que j'ai suivie et de ma recherche d'emploi. Mais pas que.

Je veux tenter de produire un contenu de Junior pour Juniors.

Durant ma formation, pour compléter les cours, j'ai dû faire pas mal de recherches sur le net. Parfois pour approfondir un sujet vu en cours, parfois simplement parce que l'explication donnée ne correspondait pas à la façon dont mon cerveau appréhende les choses🤯.
Et il y a deux choses qui m'ont beaucoup frustré:

Le manque de ressources pour les "faux-débutants". C'est-à-dire, ceux qui connaissent déjà les bases du développement mais sont encore loin d'être experts.
M'est avis qu'il y a un vide à combler entre les cours "introduction aux variables" et la documentation froide et ésotérique.
La surabondance de tuto et le manque de théorie. Okay, y'a sûrement un intérêt à ces centaines de tutoriels sur "comment réaliser une restful API en Node.js, Express et MongoDB", mais à long terme, ne serait-ce pas plus intéressant d'insister plus sur le "pourquoi" que sur le "comment" ?

Si tu donnes un poisson à un homme, il mangera un jour, si tu lui apprends à pêcher, il mangera toujours.

Plus haut, je disais "tenter de produire un contenu". Je n'ai pas le niveau d'expertise suffisant pour faire des cours. Mais je peux déjà partager ce que j'ai lu et compris à mon niveau de Junior. Et avec votre aide, tenter d'expliquer simplement des choses compliquées.
En vrai, ça m'obligera à bien comprendre les sujets abordés car le but n'est pas de passer pour une 🍌 sur le net (je joue à LoL pour ça).

Ah puis on fera de la veille aussi.
Parce que les histoires de veille, c'est classe.

DEV Community: Benjamin De Mot