Qué es Call Stack

No conocía cómo usar la parte del Call Stack y el Scope dentro de los dev tools de Chrome. Invaluable esto ❤️

Callstack

• Como se mandan a llamar las variables y las funciones
• Las tareas en el callstack se apilan de abajo hacia arriba.
• Se llaman de la última que mandamos a llamar hacia abajo
• En la base de la pila reposa el Global Object
• Si una función llama a otra, la pone encima de la pila.
• Se ejecuta una tarea a la vez (sincronía)
• Una vez que se van ejecutando las tareas se van retirando de la pila
• Al ejecutar todas las tareas se retira el Global object.

Hay un muy buen video de Sasha que explica la pila de ejecución ( Call Stack): https://youtu.be/ygA5U7Wgsg8

Hay un vídeo del profesor Sacha Lifzyc en el que se explica de manera detallada el Call Stack. Te lo dejo para que lo veas aquí 😉

Sacha explica que es el call stack o pila de ejecucion en este video

Me gusto bastante la forma en que lo explica y los detalles que agrega.

Es una tema de estructuras de datos:
FILO: First Input Last Output (Primero en entrar ultimo en salir)

Para que copien en sus pruebas

function restarDos(num){
    return num-2;
}
function calcular(){
    const sumartotal = 4+5;
    return restarDos(sumartotal);
}

debugger;

calcular();

Call Stack(Pila de ejecucion) y Memory Heap

• JavaScript tiene un solo subproceso con un contexto de ejecución global, esto significa que JavaScript maneja una sola pila de llamadas(Call Stack) y un Memory Heap, que hace referencia a la parte de la memoria no estructurada donde se guardan los objetos y funciones. Las funciones del Call Stack se procesarán en el orden en que se llama, comúnmente conocido como Last-In, First-Out (LIFO).
• El motor de JavaScript utiliza una pila de llamadas(Call Stack) para administrar los contextos de ejecución: el contexto de ejecución global y los contextos de ejecución de funciones. La pila de llamadas funciona según el principio LIFO, es decir, el último en entrar es el primero en salir.
• Cuando ejecuta un script, el motor JavaScript crea un contexto de ejecución global(En la base de la pila reposa el Global Object) lo coloca en la parte superior de la pila de llamadas(Call Stack).
• Siempre que se llama a una función, el motor de JavaScript crea un contexto de ejecución de función para la función, lo coloca en la parte superior de la pila de llamadas(Call Stack) y comienza a ejecutar la función.
• Si una función llama a otra función, el motor de JavaScript crea un nuevo contexto de ejecución de función para la función que se está llamando y lo coloca en la parte superior de la pila de llamadas(Call Stack).
• Cuando se completa la función actual, el motor de JavaScript la saca de la pila de llamadas(Call Stack) y reanuda la ejecución donde la dejó en la última lista de código.
• El script se detendrá cuando la pila de llamadas esté vacía.

Ejemplo de pila de llamadas(Call Stack) de JavaScript

function add(a, b) {
    return a + b;
}

function average(a, b) {
    return add(a, b) / 2;
}

// debugger;
// Si hacemos el debugger con Chrome al ejecutarlo nuestro Script
// en la pila de llamadas(Call Stack), se crea anonymous que es
// el objeto global
average(10, 20);

En la base de la pila reposa el Global Object, que este es el objeto que nos da el navegador, cuando se ejecuta el script, el motor de JavaScript coloca el contexto de ejecución global (indicado por main() o global() función en la pila de llamadas(Call Stack).

El contexto de ejecución global entra en la fase de creación y pasa a la fase de ejecución.

El motor de JavaScript ejecuta la llamada a la average(10, 20) función y crea un contexto de ejecución de función para la average() función y lo coloca en la parte superior de la pila de llamadas(Call Stack):

El motor de JavaScript comienza a ejecutar el average() ya que está en la parte superior de la pila de llamadas.

La average() función llama a la add() función. En este punto, el motor de JavaScript crea otro contexto de ejecución de función para la add() función y lo coloca en la parte superior de la pila de llamadas(Call Stack):

El motor de JavaScript ejecuta la add() función y la saca de la pila de llamadas(Call Stack):

En este punto, la average() función está en la parte superior de la pila de llamadas, el motor JavaScript la ejecuta y la saca de la pila de llamadas(Call Stack).

Ahora, la pila de llamadas(Call Stack) está vacía, por lo que el script deja de ejecutarse:

Desbordamiento de pila

La pila de llamadas tiene un tamaño fijo, dependiendo de la implementación del entorno de host, ya sea el navegador web o Node.js.

Si el número de contextos de ejecución supera el tamaño de la pila, se producirá un desbordamiento de la pila.

Por ejemplo, cuando ejecuta una función recursiva que no tiene condición de salida, resultará en un error de desbordamiento de pila:

function foo() {
    foo();
}

foo();
// stack overflow

Solo espero que les sirva

El Call Stack es un mecanismo para que un intérprete realice un seguimiento de su lugar en un script que llama a múltiples funciones: qué función se está ejecutando actualmente y qué funciones se invocan desde esa función, etc.

Cuando un script llama a una función, el intérprete la agrega a la pila de llamadas y luego comienza a llevar a cabo la función. Cualquier función llamada por esa función se agrega a la pila de llamadas más arriba y se ejecuta donde se alcanzan sus llamadas. Cuando finaliza la función actual, el intérprete la quita de la pila y reanuda la ejecución donde la dejó en la última lista de códigos. Si la pila ocupa más espacio del que le había asignado, se produce un error de “desbordamiento de pila”.

M e encanto super claro, aprendi mucho y quede super picada, como si estuviera viendo final de serie en netflix.

Excelente clase! este curso debería incluirse en la escuela de JavaScript, ayudaría mucho a aclarar ciertos temas de otros cursos.

Puedes realizar el mismo ejercicio que el profesor en Firefox, solo debes escribir el código tal cual esta y cuando lo ejecutes el debugger te llevará a el depurador, que tiene una interfaz similar al de las devtools de chrome. (Es posible que en el depurador de firefox, el panel donde esta el call stack o pila de llamadas, este oculto y debas darle click a un boton a la derecha para mostrarlo), para avanzar en la ejecución y ver el paso a paso hay un control con flechas.
.

.
Primero siempre se carga al call stack el objeto global, ya que a partir de el siguen las siguientes llamadas, cada vez que una función o tarea llama a otra esta se coloca un nivel por encima de la llamante en el call stack, la última función en entrar se resuelve y devuelve a su llamante inmediatamente debajo de esta, por ejemplo:
.
Al ejecutar el bloque de código siguiente, el motor de javascript realizará todas las operaciones previas a la ejecución del código (a grandes rasgos el parseo, interpretación y compilado), y detendrá todo en el debugger.
.
En el debugger antes de llamar a calcular() se puede observar a la izquierda que la pila de llamadas “call stack” tiene al objeto global creado, y listo para ejecución.
.

.
El objeto global realiza la llamada a calcular(), y esta se pasa a la pila de llamadas, por encima de su llamante, calcular comienza a ejecutarse, llegará a la linea 6 donde debe llamar a otra funcion.
.

.
calcular() llama a restarDos(num), y se observa que se le pasa como valor lo sumado previamente, podemos observar que restarDos(num) esta en la pila de llamadas por encima de su llamante.
.

.
Cuando restarDos(num) termina, devuelve su resultado y por lo tanto el control de la ejecución a calcular(), que a su vez tambien termina.
.

.
Por último el control es devuelto al objeto global, este a su vez retorna por consola el resultado del código ejecutado, al no haber mas tareas el call stack queda vacio.

Es importante recordar que en el call stack las tareas a resolver se van apilando, y cuando se resuelven con éxito se van desapilando y devolviendo el control a su llamante, hasta alcanzar el objeto global.
.
Esto es lo que he entendido del tema, espero sea de ayuda. Si me equivoque en algo o no se entiende bien los leo en comentarios 😃

Aquí un documento don se explica la estructura de datos Stack: “LIFO”: https://www.tutorialspoint.com/data_structures_algorithms/stack_algorithm.htm

Sigo sin entender porque el profesor dice se le llama sincronia (dos o mas tareas a la vez), si realmente es asincronia (solo una tarea a la vez)

CALL STACK

Las tareas se apilan de abajo hacia arriba
en la parte inferior de la pila esta el objeto global
alli se empiezan a llamar las tareas.
Cuando una tarea es llamada por una funcion, esta se pone en la cima de la pila
JavaScript trabaja una tarea a la vez.

Tengo que intentar usar más el debugger y menos los console.log para debugear jeje, gran explicación y útil la herramienta para ver el Call Stack.

debugger y callstack de las dev tools es una cosa maravillosa

El call stack sería como una pila de platos, el plato tiene cierta información (código escrito) cada plato se coloca una arriba del otro según el orden en como van a ser llamadas. Y adicional a eso, el ultimo plato en ingresar a esta pila, es el primero en salir. así sucesivamente hasta que la pila esté vacía

super genial los snipperts deberia usarse mas para enseñar y mostrar el funcionamiento de JS, es la mejor forma de aprender saber y conocer todo desde dentro
gracias Diego

Les recomiendo el canal de Sacha Lifszyc, que se llama La Cocina del Código, explica todos estos temas, aquí un vídeo sobre Call Stack

Call Stack. FILO

El contenido de esta clase me recordó al contenido de esta otra clase. 🤓

https://platzi.com/clases/1339-fundamentos-javascript/12957-como-funciona-el-asincronismo-en-javascri-2/

Como dice De Granda, si no lo entiendes “No te preocupes!” genial!

siempre quise una herramienta así, ahora ya puedo ver hasta donde sirve mi codigo, jajaaj,

De Granda, muy buen aporte

Call Stack se comporta en javaScript cómo Last Input - First Output, esto se explica como una pila de platos, a medida que se va ejecutando el programa, el compilador va determinando cual sería el siguiente “plato” y se lo va asignando al Call Stack, si el parser encuentra otra función dentro de la primera asigna el “plato” a continuar y así va continuando hasta que el compilador termine de calcular con la función asignada por el call Stack y continua con el siguiente plato, hasta solo llegar al final (el primer plato) que sería el objeto global window

Muy buena clase y muy claro el ejemplo. Entender este tipo de cosas me parece que es muy importante para recursividad.

Además hacer debugging con el navegador puede ayudarnos con muchos problemas.

Es la cola donde se van llamando todas las funciones al momento de ser ejecutadas. Las cuales se van apilando una encima de otra hasta finalizar nuestro código. Una vez finaliza. Se van liberando las funciones una a una hasta llegar a la primera función. Que siempre es nuestra variable global “this.”. La cual también es liberada, dando por finalizado nuestro proceso.

a ver… el navegador dice que todo corre primero con una función anonima, en otras partes lo denominan hilo principal de ejecución de la página, pero aquí se dice que todo comienza del objeto global ( this windows? ) y que adentro de este objeto global se apilan las tareas?

Para los que quieran ver como funciona el Call stack y Event loop les recomiendo esta pagina

El Call Stack solo puede hacer una tarea a la vez y funciona en forma de pila, para esto tenemos el navegador que nos proporciona Web API para no sobrecargar y hacer lento la ejecución de JavaScript.

CALL STACK

- Se utiliza para saber como se va a comportar nuestro codigo ya en el navegador
- Las tareas se empiezan a apilar de abajo hacia arriba con forme se van llamando
- Conorme se van terminando las tareas las va quitando del call stack
- Como primer tarea pone siempre el objeto global

SINGLE THREAD (Synchronous)

- Javascript solo puede hacer una tarea a la vez por eso apila la tareas!!

Quien juegue Magic the gathering sabe lo que es una Pila, por ejemplo la pila de hechizos hahha

Aquí la diferencia de LIFO (para pilas) y FIFO (para colas).

Representación gráfica de un Call Stack

CALLSTACK
Pila de llamado = LIFO = Last In - First Out

Las ultimas tareas en entrar, serán las primeras en salir

que genial, tienen que pasar muchas cosas para obtener un resultado

Amazing

Esto es oro puro. No sabía que podía depurar a ese nivel el código.

Oigan, si quieren entender esto mejor les recomiendo mucho este video de Platzi explicando más dinámicamente esto:

Call Stack se utiliza principalmente para la invocación de funciones (llamada). Como la pila de llamadas es única, la ejecución de las funciones se realiza, una a la vez, de arriba a abajo. Significa que la pila de llamadas es sincrónica.

Muestra como funciona el **asincronismo **de **JS **respecto a la cola de tareas ,Estas van llegando una encima de la otra y cuando acabe , empezara a ejecutar _la ultima _tarea hasta que este sola la cola de tareas .

Call Stack

Traducido, pila de llamadas, se encarga de albergar las instrucciones que deben ejecutarse. Nos indica en que punto del programa estamos, por donde vamos. Cada llamada a función de nuestra aplicación, entra a la pila generando un nuevo frame (bloque de memoria reservada para los argumentos y variables locales de dicha función). Por tanto, cuando se llama a una función, su frame es insertado arriba en la pila, cuando una función se ha completado y devuelve, su frame se saca de la pila también por arriba. El funcionamiento es LIFO: last in, first out. De este modo, las llamadas a función que están dentro de otra función contenedora son apiladas encima y serán atendidas primero.

CALL-STACK!
The call-stack simply said is the list of duties the engine must resolve starting always with the global object until the last problem in our code.
Inside a duty can be a local problem, something like “secondary missions” where there are local variables that are not relevant for the main object but important to resolve the duty. This is called scope.

Como JavaScript solo puede hacer una sola cosa a la vez (single thread), el Call Stack o Pila de Ejecución ayuda a los motores a saber en que función están parados actualmente y por cuáles funciones fueron pasando hasta llegar ahí. De esta manera, cuando el motor termine de ejecutar la función actual puede continuar ejecutando la funión previa.
Las tareas en el Call Stack se apilan de abajo hacia arriba y la última en entrar es la primera en ejecutarse (Last in, First out)

(anonymous) es nuestro objeto global

Acá un link si quieren profundizar un poco más sobre cómo funcionan Memory Heap y Call Stack en JS

Call stack nos dice como se va a comportar nuestro codigo en el navegador

Imagina que el Call Stack es como una pila de bandejas en una cafetería.

Analogía detallada:
Bandeja Vacía (Función sin Ejecutar): Al inicio, la pila de bandejas está vacía. No hay funciones en ejecución, así que la pila está limpia.
Agregar una Bandeja (Llamar a una Función): Cada vez que llamas a una función, pones una “bandeja” en la parte superior de la pila. Esta bandeja contiene información sobre la función, como las variables locales y el punto en el que se encuentra en su ejecución.
Quitar una Bandeja (Retornar de una Función): Cuando una función ha terminado de ejecutarse y retorna un valor, quitas la “bandeja” de la parte superior de la pila. Esto permite que la función que la llamó originalmente continúe su ejecución.
Pila de Bandejas (Varias Funciones): Si una función llama a otra función, añades otra “bandeja” en la parte superior de la pila, encima de la primera. Las funciones se ejecutan y se retiran de la pila en un orden “último en entrar, primero en salir” (LIFO, por sus siglas en inglés).
Desbordamiento de la Pila (Stack Overflow): Hay un límite en el número de “bandejas” que puedes apilar. Si alcanzas este límite debido a, por ejemplo, una recursión infinita, obtendrás un “Stack Overflow” o desbordamiento de la pila.
Bandeja Actual (Función en Ejecución): La “bandeja” en la parte superior de la pila es la función que se está ejecutando actualmente. Una vez que esta función termina, se retira la “bandeja”, y la función que está justo debajo en la pila se convierte en la función en ejecución.

EXCELENTE EXPLICACION, SENCILLA Y PRECISA!!!

Excelente curso, vengo del curso de web components.

🔥LIFO??

Esto me recuerda a logista y su sistema de flujo de mercancías en donde LIFO (Last In, First Out) es el Último en entrar primero en salir.

Usar el Call Stack cuando se usa recursividad es una maravilla.

Está interesante esto del Call Stack, toca profundizar más.

Esto esta muy bueno

last in first out

JS Engine V8 - Notion

buenos dias call stack

Interesante la estfuctua de como se corre las funciones y variables

JavaScript 💛

Buenísima la herramienta de Chrome Dev tools

que subtítulos tan telibles

https://drive.google.com/drive/folders/1SWGMgTMPbwgasbzcivcpcnIudc2vk_v0?usp=sharing

Dejo por aca mi carpeta de Google Docs con la toma de notas de varios cursos de Platzi! La idea es que participemos entre todos y lo mejoremos.
Saludos!

En Firefox la consola permite usar un editor multilínea en la consola, donde podrán hacer algo similar a lo de Snippets en Chrome

Call Stack

Las tareas se van apilando, se van a poner tareas arriba según una tarea tenga que llamar a otra. Solo se va a ir solucionando una tarea a la vez, por lo tanto siempre la última tarea que fue llamada va a ser la que se va a solucionar primera.

Buena clase, seguimos aprendiendo cada vez más un poquito de JS y su funcionamiento.

El call Stack es algo primordial como developers, muy importante para saber manejar el memory heap

Sí alguno usa Opera pues vale la pena decir que si tiene las mismas Devtools que Chrome.

Interesante herramientas, gran clase!!

Call stack:

• Nos va a decir **cómo se va a comportar nuestro código **ya una vez en el navegador.

• Tenemos una pila y las tareas se van a estar apilando de abajo hacia arriba y tenemos que ir sacando de arriba hacia abajo hasta terminar con el objeto global.

• **Sincronía **es que se van acomodando las tareas tal que la que está abajo va a ir llamando a la de arriba y así. Esto implica que JS solo trabaja una tarea a la vez.

• El callstack funciona más bien como un mapa , nos dice como será el recorrido a través de las funciones considerando el orden en el que fueron llamadas.

Call stack, es lista de tareas que es añadida a la pila de tareas. (Sigle thread- synchronous) Esta pila es procesada, y el último objeto en procesarse es el global object.

CallStack - Notas

• Al CallStack se le llama pila de ejecución porque sigue el ciclo First In Last Out (FILO).

• El CallStack te dice cuando se va a ejecutar la función, dónde está la función (línea de código y archivo), y el contexto de ejecución (quién es this en el momento de ejecución de la función),

Miren este video. Les aclarará todo sobre el CallStack

Pueden ir al siguiente link de un video que encontré para ver a mayor profundidad el Call Stack 😃
https://www.youtube.com/watch?v=ygA5U7Wgsg8&t=219s

De granda es de los mejores profesores!

Excelente explicacion del profesor

Estas herramientas están muy cool

a mi me funcionó con “ctrl + enter”

Ooo excelente lo del call stack!

Muy Interesante

Excelente explicación !

excelente clase y muy importante

Yo creo que el hecho de que un lenguage de programación tenga single threat o no, no depende de dicho lenguaje sino de la máquina que lo corre.

Esta es una de las mejores explicaciones que he visto!

Explicacion de Call Stack como fuente externa. aqui
Esta en ingles pero se deja traducir en las opciones del video.

Genial la parte de DevTools y como se ve el Call Stack paso a paso.

Genial

Excelente explicacion del call stack, y el ejemplo de como muestra el flujo

Super cool!

Esto se relaciona estrechamente con el LIFO (Last Input First Output) por si alguno le interesa en investigar un poco mas!

Un pequeño repaso del curso de básico y fundamentos de Js

Buena clase!

No falta un buen video del buen Sacha
https://www.youtube.com/watch?v=ygA5U7Wgsg8

Excelente!