Cet article est destiné à approfondir certains des concepts javascript les plus importants pour vous aider à écrire un meilleur code.

Si vous aimez le mode sombre, vous pouvez lire cet article ici .

La pile d'appels est une structure de données LIFO ( Last In First Out ). Chaque fois qu'une fonction est invoquée, un contexte d'exécution est créé et poussé en haut de la pile des appels. Lorsque l'exécution est terminée, le contexte d'exécution est retiré de la pile d'appels.

Javascript est un langage à thread unique, ce qui signifie qu'il a une pile d'appels et qu'il ne peut donc faire qu'une seule chose à la fois. Maintenant, une chose importante que je veux mentionner rapidement est que le javascript asynchrone est possible grâce à un ensemble d'API de navigateur comme la file d'attente de rappel. Ce n'est pas vraiment une partie du langage javascript.

Lorsqu'une fonction est invoquée, le contexte d'exécution est créé et placé au-dessus de la pile d'appels, et lorsque la fonction se termine, elle est retirée de la pile.

Chaque entrée de la pile d'appels est appelée Stack Frame .

Comment le contexte d'exécution est ajouté à la pile

Prenons une fonction simple :

function foo() {
  bar()
}

function bar() {
  console.log('bar')
}

foo()

      
                

                    
                    
                
            

Voyons à quoi ressemblent ces erreurs que nous rencontrons habituellement dans notre console lorsque quelque chose ne va pas :

function foo() {
  bar()
}

function bar() {
  baz()
}

function baz() {
  throw new Error('this is an error')
}

foo()

Souffler la pile

Cela se produit parfois avec des boucles ou de la récursivité, et tout cela signifie que la pile d'appels déborde. Cela se produit parce qu'un contexte d'exécution continue d'être ajouté et qu'il y a une limite à cela.

function foo() {
  foo()
}

foo()

Un dernier exemple pour enfoncer le clou

Faites attention à chaque cadre de pile dans l'illustration ci-dessous.

function foo() {
  console.log('hi')
  bar()
  console.log('bye')
}

function bar() {
  console.log('bar')
  baz()
}

function baz() {
  console.log('baz')
}

foo()