intive Argentina Blog

Meetup Frontenders al Poder. Vol 1: JS

Durante el mes pasado, en intive-FDV realizamos nuestro primer meetup, un evento destinado a compartir con la comunidad un poco de todo lo que aprendemos cada día. En esta primera edición, enfocada en el mundo Frontend, Daniel Mata y Mariano Furriel prepararon una charla sobre Javascript, y hoy – a través de nuestro blog – la liberamos al mundo online.

Los fundamentos de JS

Dani nos contó los fundamentos básicos de JavaScript, y nos hizo saber que este lenguaje de programación hoy es el corazón de la web, diseñado principalmente para agregar comportamiento dinámico a cualquier sitio. Todos los navegadores modernos interpretan el código JavaScript integrado en una página web. Se trata de un lenguaje muy flexible que permite hacer prácticamente todo, y que se actualiza constantemente por ECMAScript, la organización que lo gestiona. Cabe aclarar que JS es fácil de aprender pero se hace muy difícil de dominar, por el dinamismo con el que se modifica periódicamente.

Paradigma y tipos de variables de JS

JavaScript se podría ubicar dentro de paradigmas de varios lenguajes. Si tuviéramos que clasificarlo de alguna manera, podríamos considerarlo como un lenguaje intermedio entre uno de orientación a objetos y uno funcional, pero JS “no se casa con ninguno, no utiliza solo un paradigma”. En JavaScript, al tratarse de un lenguaje “no tipado”, una variable puede almacenar un número y más tarde almacenar en la misma variable una frase. No necesita cambiar su tipado mediante una función para poder cambiar el tipo de información que almacena la variable (ésto último sí sucedería en un lenguaje tipado). Dentro de los tipos de variables que maneja Javascript, están los “objetos” (las variables más poderosas que existen, según Daniel), que pueden tener referencias a funciones fuera del objeto, como podemos ver en el ejemplo:

Screen Shot 2017-07-19 at 12.05.57 PM

La forma en que se accede a las propiedades de un objeto es la siguiente:

Screen Shot 2017-07-19 at 12.08.09 PM

El “Constructor” define un plano o una estructura para cada objeto a crear, y se llena el plano con las propiedades del objeto.

Definición de un objeto genérico

Continuando con el mismo ejemplo, muchas veces queremos crear varias instancias de un mismo objeto. En este caso puntual, queremos hacer varias instancias de “Persona”. Para ello, hacemos lo siguiente:

Screen Shot 2017-07-19 at 12.21.43 PM

“This”

“This” crea las reglas dentro del compilador, indica en qué contexto se ejecuta una función.

En el ejemplo anterior, establecimos que las nuevas variables (“nombre”, “apellido”, “extranjero”) pertenecían al contexto en el que se ejecutaba la función.

“this” se define mientras está corriendo el programa de manera dinámica, y puede ser que su comportamiento varíe.

Para definirlo se pueden utilizar dos métodos:

  • .bind: El método .bind() crea una nueva función que, cuando es llamada, asigna a su operador “this” el valor entregado, con una secuencia de argumentos dados. Es importante el uso de .bind() porque cada función tiene su propio contexto determinado, y es necesario especificarlo de manera implícita antes de llamar a un método que use valores asociados al “this”.
  • apply / call: Existen dos opciones para este método:
  1. apply: permite llamar a una función pasándole un contexto y una serie de parámetros en forma de array.
  2. call: permite llamar a una función pasándole un contexto y una serie de parámetros individualmente.

La diferencia con .bind() es que .bind() devuelve una nueva función con un contexto asignado.

De clases y prototipos

Los objetos siempre tendrán asociados un prototipo, que es un objeto madre del cual “heredan” sus propiedades.

Una clase, en cambio, es una «plantilla» para definir objetos. Se usan para representar entidades o conceptos de la realidad. En el nuevo estándar de JavaScript (ES6 o ECMAScript 2015) se introdujo el concepto de clases para definir objetos.

Veamos un ejemplo de cadena de prototipado que nos mostró Dani en la presentación:

Screen Shot 2017-07-19 at 12.23.31 PM

En esta instancia estaríamos redefiniendo el prototipo que viene por defecto con el objeto “Persona”. Entonces le agregamos la función “mostrarNombre”. De esta manera, logramos que al crear un nuevo objeto “Persona”, éste herede dicha función automáticamente de su correspondiente prototipo, como vemos a continuación:

Screen Shot 2017-07-19 at 12.24.55 PM

Luego, creamos un prototipo para “Empleado”. Cuando creamos un nuevo objeto “Empleado”, si bien su prototipo no posee la función “mostrarNombre”, JavaScript busca en el objeto anterior a la cadena el prototipo “Persona” y se lo atribuye igualmente. Por eso podemos decir que el prototipo “Empleado” está “heredando” atributos de “Persona”.

Screen Shot 2017-07-19 at 12.25.39 PM

En un tercer nivel, lo mismo sucede con el prototipo de “Jubilado”, que heredará atributos de “Empleado” y de “Persona”.

Screen Shot 2017-07-19 at 12.26.19 PM

Hay que tener cuidado de modificar los prototipos correspondientes para no incurrir en errores que pueden introducir problemas de performance o de memoria, sobre todo en modelos más complicados que el que nos mostró Daniel. Lo que aprendimos en este meetup es que (si se lo sabe manejar) el prototipado es una herramienta muy útil que presenta JavaScript.

No se pierdan la próxima nota del Meetup de Frontenders, donde estaremos contándoles todo lo que aprendimos sobre React.

Daniel Mata

Daniel Mata es desarrollador Frontend en intive-FDV e ingeniero en Sistemas por la Universidad Nacional Experimental Politécnica de la Fuerza Armada Nacional (UNEFA). Oriundo de Venezuela, vive en Argentina hace un año y seis meses [al tiempo de esta biografía: julio 2017]. Le gusta leer, cocinar y el gaming. Sus principales preferencias en esos rubros: los policiales, las pastas y los juegos de aventuras.

Paula Becchetti

Paula es la editora del blog de intive – FDV. Licenciada en Comunicación Audiovisual de la Universidad Nacional de San Martín (UNSAM), se destaca como Content Manager especializada en blogs, contenido web, email marketing y social media. Su amplia experiencia en la industria del software la hace muy valiosa a la hora de traducir contenidos técnicos a un lenguaje coloquial. Según sus propias palabras: “Me conecto con el mundo por medio de la tecnología, pero también a través de todo aquello que respira, del deporte, de la música y de mis viajes”.

Deja un comentario