Una de las cosas que más me llamó la atención antes de hacer parte del equipo de La Haus, hace dos años, es que tenían un grupo de estudio interno semanal. Cuando entré a la compañía me encantó el hecho de poder participar como asistente para aprender cosas nuevas y también, me emocionaba el hecho de poder compartir aquellas cosas que me apasionaban del mundo frontend, la parte del sitio web que se encarga de toda la interacción con usuarios.
Nuestras charlas internas han sido tan interesantes y enriquecedoras que hemos querido compartir todo lo que hacemos con personas externas.
Primero, porque varios integrantes del equipo La Haus hemos sido organizadores de comunidades por mucho tiempo y nos apasiona el hecho de compartir en comunidad.
Segundo, porque nuestro equipo de tecnología está creciendo y nos encantaría poder mostrar lo que hacemos para que muchas más personas se unan a él.
En la Haus creemos en crear comunidades de práctica y en el aprendizaje organizacional. Por eso, hemos decidido abrir nuestros grupos de estudio a todo el que quiera participar. A estos espacios los hemos llamado La Haus In House y sucederán cada mes.
Son meetups para conversar sobre diversos temas que activan eso que lo mantiene a uno motivado, haciéndose preguntas y dándose cuenta que las maneras de hacer las cosas son diversas en el universo del desarrollo.
Con esa motivación hemos realizado nuestro primer meetup abierto a la comunidad con la excusa de jugar con JavaScript.
Primer meetup: Playing the Squid Game and JavaScript
Su nombre fue "Playing the Squid Game and JavaScript" como haciendo analogía con Squid Game, serie de gran acogida mundial que trata sobre “juegos de niños” pero entre la vida y la muerte.
Así cada pregunta del juego, además de retar los conocimientos de JavaScript, se inspiró en los juegos que la serie propone. Se hicieron 6 juegos sobre aspectos del lenguaje de programación ya nombrado como event Loop, clonar un objeto o hoisting. Luego se explicó la función o el aspecto del lenguaje en detalle.
Los 6 juegos:
El juego tenía cinco preguntas relacionadas con conceptos esenciales de JavaScript y una relacionada a La Haus.
Usamos una plataforma de participación remota llamada Kahoot en la que todos los jugadores debían responder con un límite de tiempo y, posteriormente, se explicaba la solución a cada una de las preguntas.
Estas, a su vez, estaban relacionadas con cada uno de los nombres de los juegos que tuvieron que pasar los concursantes de la serie ya nombrada, así que estuvimos jugando una versión JavaScript de esta.
1. Juego luz roja - luz verde y Event Loop de JavaScript
Los programas tienen distintos modos que permiten generar la concurrencia de eventos o eventos asincrónicos
JavaScript tiene un modelo de concurrencia basado en un "loop de eventos". Este modelo es bastante diferente al modelo de otros lenguajes como C o Java.
by MDN contributors
El Event Loop puede ser un poco confuso al principio, pero una de las cosas que más me gusta hacer, es explicarlo de forma visual.
El motor de JavaScript tiene solo un subproceso, es decir, no tiene concurrencias de eventos en sí mismo pero, afortunadamente el navegador nos brinda una API web que puede ayudarnos a crear un comportamiento asincrónico así como vemos:
La primera pregunta relacionada con el Event loop es:
2. Juego “paneles de miel de azúcar” y formas de clonar un objeto en JavaScript
En JavaScript tenemos 2 grupos de datos que son primitivos de los objetos: la variable y su valor.
No podemos clonar un objeto con una función “igual (=)”. Lo que esto haría es replicar la dirección del objeto en la memoria sin realizar una copia del mismo.
En JavaScript existen varias formas de clonar un objeto, usando:
- Spread Operator
- Object.assing
- JSON.stringify y JSON.parse
La segunda pregunta del juego fue:
3. Juego “Tira y afloja” y Hoisting en JavaScript:
Cuando el motor JavaScript comienza a ejecutar nuestro código línea por línea, suceden dos fases:
1. La fase de creación: se declaran las variables y se les asigna un valor predeterminado (en este caso, undefined. A este proceso se le conoce como Hoisting.
2. La fase de ejecución: se realizan las operaciones que el código plantea.
Ahora que conocemos las diferentes fases por las que pasa nuestro código, comprendemos mucho mejor lo que sucede en realidad.
Ahora vamos a ver si comprendiste: ¿Cuál es la salida del siguiente código?
4. Juego de “canicas” y la variable “This” en JavaScript:
El primer contexto de ejecución que se crea cuando el motor JavaScript ejecuta nuestro código se denomina “contexto de ejecución global”.
Inicialmente, este contexto de ejecución se compone de dos cosas:
1. Un objeto global
2. Una variable llamada __ this
La variable this hace referencia al objeto global que será “window'', si estás ejecutando JavaScript en el navegador, o “global”, si lo estás ejecutando en Node.js.
Sin embargo, cuando se ejecuta una función en JavaScript, se crea su contexto de ejecución sin crear ningún objeto global (como en el contexto de ejecución global que nombramos antes).
En su lugar crea:
- Un objeto de argumentos.
- Un objeto this (en este ejemplo es el mismo objeto “window”.
- Configura un espacio en la memoria para variables y funciones.
- Asigna un valor predeterminado a las variables en la fase de creación (que veíamos anteriormente).
Ahora trata de resolver si la variable this de la función “obtener jugador” es el objeto “window”
Juego de Peldaños de vidrio y “Método map” en JavaScript:
El “método map” es uno de los más utilizados cuando estamos trabajando con “arrays” en JavaScript. Sirve para ejecutar una función que transformará cada elemento del array inicial, y nos devolverá un nuevo array con los nuevos datos.
En nuestro ejemplo en The Squid Game, lo que hicimos fue modificar el color de los emojis que tenemos organizados en un ”array” inicial.
Según esto, ¿cuál crees que es la salida de este código?
6. Squid Game y La Haus
Estos son algunos de los conceptos más importantes que todo desarrollador(a) frontend debe conocer.
En La Haus, somos curiosos sobre los conceptos de cada uno de los lenguajes con los que trabajamos y nos motiva acercarnos a diversos niveles del conocimiento, tanto del práctico como del teórico. Esto, con el fin de abordar y dar solución a problemas, implementar mejores prácticas, optimizar nuestro código, entre otras cosas.
Compartir conocimiento y motivar conversación es parte de lo que nos hace mejorar cada día, aprender constantemente nos obliga a encontrar nuevas soluciones a los problemas y queremos ampliar el impacto de esto y también que te animes a trabajar con nosotros.
Te esperamos en una nueva sesión de nuestros meetups cada mes a las 6:00pm - hora Colombia en nuestro canal de YouTube donde estaremos transmitiendo en vivo todas nuestras charlas de La Haus in house.
