Lecciones de vida con ECMAScript

Cuando conozco a una persona y dejo de verla algún tiempo, me quedo con su imagen en mi cabeza, el cómo era física y mentalmente, y me ha pasado que cuando vuelvo a verla me sorprende lo mucho que ha cambiado.

Algo similar me ha ocurrido en estos días pero, en este caso, no fue con una persona sino con un lenguaje de programación. Después de un tiempo de no escribir código Javascript, regresé a desarrollar para la web y ¿cuál fue mi sorpresa? El lenguaje tenía un nuevo estándar para codificar: ECMAScript. Con ello llegaron otros cambios que me obligaron a conocerlo todo desde el principio. Ver estas dos versiones me hizo denominarlos como el Antiguo y Nuevo Testamento de Javascript.

Comencé a entender este cambio junto con Babel, que es una librería que interpreta la nueva gramática y la transforma internamente en el lenguaje común Javascript. Cada año liberan una nueva actualización con pequeñas diferencias pero la esencia de la nueva escritura se mantiene. Estoy utilizando la versión más actual que es ECMAScript 2015 (ES6 para los cuates).

Tardé un tiempo en entender las características principales que ahora posee, pero una vez que las conoces encuentras que hay algunas muy útiles como las siguientes:

Variables y constantes

ECMAScript nos da nuevas formas de declarar variables además de la clásica palabra reservada “var”. La nueva notación “let” nos sirve para definir valores que pueden cambiar en cualquier operación, mientras que “const” nos ayuda a definir valores que no deben alterarse durante el flujo del programa.

Funciones “Arrows”

Esto es algo que me confundió al principio pero le empecé a tomar cariño conforme seguía tirando código. ECMAScript implementó una nueva forma de escribir funciones sin tener la palabra reservada “function” de JS. Por ejemplo, escribiré una simple función anónima:

function (x) {
console.log(x);
}

Y ahora, esta función con ES6 se puede escribir así:

(x) => {
console.log(x);
}

Los signos = y > forman la famosa flecha que denota la función que estamos creando. Como es costumbre en varios lenguajes, entre los paréntesis mandamos los parámetros de la función y entre las llaves tenemos el cuerpo o flujo de ella.

Plantillas de cadena

Desde aquí empezaré con las menciones honoríficas para ES6. Al codificar nos encontramos siempre con el detalle de crear una cadena de caracteres a partir de dos distintas o, en pocas palabras, concatenar. Javascript manejaba el operador + entre dos cadenas para unirlas en una nueva, tal como lo hace el lenguaje Java, pero esto se convertía en un gran problema al tener tres o más cadenas o, peor aún, al tener que agregar variables. Daré un ejemplo:

const cadena1 = “Hola a todos”;
const cadena2 = “Bienvenidos”;
let cadena = cadena1 + “ ” + cadena2 + “, esto es una concatenación en Javascript”;
console.log(cadena);

Nótese que hay que escribir los espacios y las comas para que la cadena sea entendible. ES6 facilita esta situación con sus denominadas ‘plantillas de cadena’, las cuales hacen que el código anterior se escriba ahora de la siguiente manera:

const cadena1 = “Hola a todos”;
const cadena2 = “Bienvenidos”;
let cadena = `${cadena1} ${cadena2}, esto es una concatenación en Javascript`;
console.log(cadena);

La salida en consola será la misma pero la cadena en el código se forma de una manera más entendible para el desarrollador.

Desestructuración

Otra de las molestias al momento de programar es tener que ir extrayendo valores de un arreglo de datos. Esto es a lo que me refiero:

const valores= [1, 2, 3];
const primerValor= valores[0];
const segundoValor= valores[1];
const tercerValor= valores[2];

Este ejemplo se ve sencillo pero ¿se imaginan si tenemos más valores dentro del arreglo? Se escribirían demasiadas lineas de código. Fue así que ES6 introdujo la funcionalidad de la desestructuración (del inglés ‘destructuring’), la cual resuelve este problema de la siguiente manera:

const valores = [1, 2, 3];
const [primerValor, segundoValor, tercerValor] = valores;

Sencillamente hacemos lo mismo que el primer ejemplo pero con una sola línea de código. El intérprete de ES6 va asignando cada uno de los valores de una estructura a otra que imita su contenido y podemos aplicarlo en arreglos y/u objetos. Es una gran ayuda al momento de extraer datos de un JSON.

Clases

Y finalmente llego con uno de los cambios que me sorprendieron más en este Nuevo Testamento Javascript. Me refiero a las clases y el manejo orientado a objetos dentro del lenguaje. Anteriormente se podía “simular” el paradigma usando los famosos prototipos (Prototypes) pero para un desarrollador que llegaba de otro lenguaje orientado a objetos, su funcionalidad se tornaba un poco confuso (ese fue mi caso). Es por esto que no me detendré a explicar mucho de cómo se realizaba el código, ya que ECMAScript 6 tuvo la gran gentileza de crear el intérprete adecuado para nosotros.

Ahora con ES6 contamos con:

1.- La palabra reservada “class” para definir una nueva clase.

2.- Herencia con la palabra “extends” (similar a Java) junto con la palabra “super” para referirnos a la clase padre.

3.- Su propio constructor, métodos e instancias de objetos.

Existen otros cambios que ES6 realizó a Javascript pero, en lo particular, estos que describí anteriormente son los que más importantes que rescato. Todo esto me ha dejado una lección de vida: No dejes de lado mucho tiempo a una herramienta o a un lenguaje, puede cambiar de un momento a otro. Siempre hay que mantenernos actualizados.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.