En el post de la semana pasada hacíamos referencia a algunos de los métodos de iteración existentes actualmente en JavaScript. Vimos que conocerlos es importante, pues te permite evitar utilizar el “viejo” for, además de ayudarte a desarrollar aplicaciones de forma más rápida.
En las próximas sesiones quiero compartir contigo algunos conceptos fundamentales de JavaScript que debes conocer, sobre todo si ya tienes un conocimiento básico de JavaScript y te interesa mucho saber cosas como “cómo funciona un intérprete de JavaScript”, o hasta donde se puede acceder a una variable.
Conocer estos conceptos y términos no solamente es importante para tí, pero también para tu equipo. De esta forma, podéis hablar en el mismo “idioma” cuando estés hablando de funcionalidades, por ejemplo.
Pila de llamadas
La pila de llamadas, “call stack”, es una estructura dinámica de datos LIFO que almacena información sobre las subrutinas de una aplicación. Piensalo como el lugar para llamadas de funciones, o una estructura de datos que implementa el tipo de datos de la pila (stack), en que solamente se puede ejecutar una función a la vez.
¿Cómo funciona?
Para entender cómo funciona la pila de llamadas en JavaScript, miremos un ejemplo sencillo:
El resultado del código ejecutado en la consola sería algo parecido a:
¿Era el resultado que esperabas? Como puedes observar, hemos declarado las dos variables (myFriendCats y myCats) en sitios opuestos. ¡Observa también la posición de las funciones y las correspondientes llamadas!
¿Qué ha pasado? ¿Por qué myCats no es igual a 3?
Primer paso
Lo primero que hace JavaScript es crear espacio en memoria para todas las funciones y variables. Lo que pasa con las variables es que el intérprete de JavaScript ejecuta el código línea por línea desde la parte superior del código. Por tanto, el valor asignado a la variable myCats en el momento de ejecutarse “console.log()” no es tu valor 3, si no undefined.
….¿y las funciones?
Porque se declaran y se inician de una sola vez, las funciones pueden funcionar desde cualquier sitio. Además, en esta fase JavaScript crea el concepto de contexto global. El contexto es un entorno creado por JavaScript cuando se añade una función a la pila. JavaScript también añade al contexto global - disponible en cualquier sitio, un objeto global - window o global - y una referencia a this. JavaScript crea la variable this automáticamente para cada nuevo contexto. This puede ser un dolor de cabeza para nuevos programadores de JavaScript. Por eso es importante entender su contexto.
Segundo paso
Cómo hemos comentado anteriormente, JavaScript ejecuta el código línea por línea, por eso en el contexto global asigna myFriendCats al valor 2. Todas las funciones ya están creadas, entonces ejecuta showMyCats().
Recuerda que siempre que llamamos una función se crea un nuevo contexto para aquella función y se añade a la pila de llamada.
Para que tengas una idea visual, te dejo también una animación hecha en latentfli.com/loupe que te permitirá ver como fuciona la pila de llamada. Te recomiendo utilizar Loupe si quieres entender más sobre pilas de llamadas, o eventos de tu propio código.
Resumiendo
El resultado de la ejecución del código es el que ves en el gif anterior, y es así por las siguientes razones:
- JavaScript crea el contexto global, las variables globales y las funciones
- Para cada llamada de función, crea un nuevo contexto asignando memoria para cada declaración de función o variables, además de una referencia a this y a su entorno externo.
- Cuando la función retorna, aunque sea “undefined”, se extrae de la pila y su contexto de ejecución se recolecta como basura - o sea, la variable en memoria se elimina automáticamente.
- En el momento que la pila está vacía, JavaScript elimina los eventos de la cola de eventos.
Conclusión
Ahora que ya sabes como funciona la pila de de llamadas de JavaScript, ya puedes justificar en tu equipo, por qué myCats es undefined en el ejemplo que utilizamos en este artículo.
Además, ya sabes qué tienes que hacer para declarar funciones/variables con alcance global que se pueden ejecutar en cualquier parte de tu código. En la próxima sección seguiremos hablando sobre conceptos fundamentales, alcances locales, su definición e implicaciones en tu código. Si tienes alguna pregunta, !no dudes en dejarnos un comentario!
¿Cuál fue tu peor experiencia utilizando this en tus aplicaciones de JavaScript? ¿y la mejor?
Fotografía: Magda Ehlers en Pexels
Fuentes:
