Esta publicación está destinada a profundizar en algunos de los conceptos de javascript más importantes para ayudarlo a escribir un mejor código.

Si te gusta el modo oscuro, puedes leer este artículo aquí .

La pila de llamadas es una estructura de datos LIFO ( último en entrar, primero en salir ). Cada vez que se invoca una función, se crea un contexto de ejecución y se coloca en la parte superior de la pila de llamadas. Cuando finaliza la ejecución, el contexto de ejecución se elimina de la pila de llamadas.

Javascript es un lenguaje de un solo subproceso, lo que significa que tiene una pila de llamadas y, por lo tanto, solo puede hacer una cosa a la vez. Ahora, una cosa importante que quiero mencionar rápidamente es que JavaScript asíncrono es posible debido a un conjunto de API de navegador como la cola de devolución de llamada. En realidad, no es parte del lenguaje javascript.

Cuando se invoca una función, el contexto de ejecución se crea y se coloca encima de la pila de llamadas, y cuando la función finaliza, se saca de la pila.

Cada entrada en la pila de llamadas se denomina marco de pila .

Cómo se agrega el contexto de ejecución a la pila

Tomemos una función simple:

function foo() {
  bar()
}

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

foo()

      
                

                    
                    
                
            

Veamos cómo quedan esos errores con los que nos solemos encontrar en nuestra consola cuando algo anda mal:

function foo() {
  bar()
}

function bar() {
  baz()
}

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

foo()

soplando la pila

Esto sucede a veces con bucles o recursión, y todo lo que significa es que la pila de llamadas se desborda. Esto sucede porque se sigue agregando un contexto de ejecución y hay un límite para esto.

function foo() {
  foo()
}

foo()

Un último ejemplo para llevar el punto a casa

Preste atención a cada marco de pila en la siguiente ilustración.

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

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

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

foo()