No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Qu茅 es Call Stack

8/13
Recursos

El Call Stack consiste en ordenar las funciones que son invocadas de arriba hacia abajo, donde la 煤ltima tarea ser谩 la que se ejecute primero. Una vez se ha guardado la informaci贸n del archivo o programa, es momento de ejecutarlas.

Primeramente, guarda todas las funciones o declaraciones en anonymous que representa el objeto global.

Representaci贸n del Call Stack

Y as铆 sucesivamente. Va agregando y quitando ejecuciones en el orden correspondiente. Es por eso que JavaScript realiza una tarea a la vez.

Ejemplo de ejecuci贸n

El siguiente c贸digo contiene tres funciones hello, world y main que ya han sido guardadas en el memory heap al declararlas y est谩n listas para ejecutarse.

Ejemplo de ejecuci贸n funci贸n main

Al llegar a la funci贸n main, el Engine lo coloca en el Call Stack para ejecutarlo. Pero dentro se encuentran m谩s invocaciones a otras funciones, por ende, primero ejecutar谩 la que est茅 m谩s arriba hasta ejecutarlas todas.

Ejemplo de ejecuci贸n funci贸n hello

Al invocar la funci贸n hello, el Engine lo coloca en el Call Stack. La funci贸n console.log tambi茅n es una funci贸n, por lo que el Engine tambi茅n lo colocar谩 en el Call Stack.

Ejemplo de ejecuci贸n funci贸n console.log dentro de hello

Una vez ejecutada la funci贸n console.log el Engine lo sacar谩 del Call Stack.

Ejemplo de ejecuci贸n funci贸n hello finalizada

Como la funci贸n hello ya ha sido ejecutada, el Engine lo sacar谩 del Call Stack para seguir ejecutando la funci贸n main.

Ejemplo de ejecuci贸n funci贸n world

Y as铆 sucesivamente, hasta que termine de ejecutarse main, o todas las tareas en el Call Stack. Cuando no existan tareas en el Call Stack, el programa habr谩 finalizado.

Contribuci贸n creada por Andr茅s Guano.

Aportes 125

Preguntas 16

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渄esbordamiento 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.
.

<h3>Funcionamiento del call stack, (en firefox: pila de llamadas)</h3>

.
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 鈥渃all 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: 鈥淟IFO鈥: https://www.tutorialspoint.com/data_structures_algorithms/stack_algorithm.htm

Call Stack es un mecanismo para que un int茅rprete (como el int茅rprete de JavaScript en un navegador web) 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 鈥渄esbordamiento de pila鈥.

By: https://mzl.la/33S28jQ

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

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)

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 鈥淣o 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 鈥減lato鈥 y se lo va asignando al Call Stack, si el parser encuentra otra funci贸n dentro de la primera asigna el 鈥減lato鈥 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.

<h3>Call Stack</h3>

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 鈥渢his.鈥. 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

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 鈥渟econdary 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

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

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

Esto esta muy bueno

last in first out

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 鈥渃trl + 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.

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

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

buena clase

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!

Bien explicado

Que es Call Stack

Esta clase de ver como acceder al Call Stack vale oro!

Se me ocurre que observar funciones recursivas es muy interesante aqu铆

Est谩 interesante no sab铆a la parte del debugger

Hermoso y simple debugger, sos crack Diego!