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

호출 스택

JavaScript는 단일/모노 스레드(모노 스레드) 및 동기화를 언어화하지 않습니다. C'est-à-dire que l'interpreteur JS exécutera le code ligne par ligne, de la première à la dernière ligne.
뿌르콰이? Parce qu'il n'a qu'une seule 호출 스택(pile d'execution).

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 기사 JavaScript Event Loop And Call Stack Explained 이력서 아인시 :

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.

코멘트 ça se pass ?

Lorsqu'une fonction est appelée, l'interpreteur l'ajoute à la call stack et l'execute.

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'interpreteur retourne à la fonction précédente de la pile.

예시가 없는 구체적인

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 pass ici ? Le code sera exécuté insi :

1 - L'interpreteur atteint l'appelle de la fonction Greeting().

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

Call stack:

• greeting

3 - 인사말() est exécuté jusqu'à sayHi().

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

5 - 호출 스택에 대한 기능 sayHi() est empilée sur la fonction sayHi().

Call stack:

• sayHi
• greeting

6 - 기능에 대한 코드 작성 Hi() est exécuté jusqu'à sa fin.

7 - 기능 인사말() a été appelée pour exécuter le reste de la fonction Greeting().

8 - sayHi() est retireé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 executer la suite du code.

10 - La foction Greeting() est retireée de la pile.

Call stack:

• EMPTY

Taille limit de la 콜 스택

On Rappelait au début de ce 법원 기사 que le JS est single thread et synchrone. Le script n'exécutera une instruction que l'une après l'autre. Si une foction, 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 recursive 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 navigationurs on 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