JavaScript moderno con ES6-ES13 (JS-Tutorial)

Esto es lo que puede esperar en este curso de JavaScript ES6.

JavaScript existe en los navegadores desde hace muchos años. Casi todos los sitios web contienen más o menos código JS. Aunque las primeras versiones eran todavía muy accidentadas, era posible trabajar bastante bien con el estándar ES5, al menos si se era capaz de evitar con habilidad las trampas y los imponderables. Entonces, ¿por qué aprender algo nuevo y no seguir con lo probado? En esta lección, le mostraré las ventajas del nuevo estándar ES6 y las razones por las que realmente no puede prescindir de él.

Esta lección presenta una forma de configurar un entorno de desarrollo. Utilizamos Visual Studio Code de MS como IDE y ViteJS como servidor de desarrollo.

Hasta ES5 inclusive, la palabra clave var era la única forma de declarar variables, y sus peculiaridades a menudo conducían a comportamientos no deseados o incluso a errores. ES6 introduce las dos nuevas palabras clave let y const, que subsanan algunos de los defectos de var.

Todo desarrollador web está familiarizado con el bucle For. También se utiliza a menudo para recorrer matrices. Con ES6, hay una variante del bucle For que permite hacer esto de una manera mucho más corta y compacta.

Las funciones son esenciales en JS y antes sólo se declaraban y definían utilizando la palabra clave function. ES6 introduce una notación muy elegante y breve que no sólo hace el código más legible, sino que también ofrece una solución a un persistente problema con esto.

En ES5, los parámetros opcionales pueden realizarse de forma algo complicada y no se revelan a la persona que llama a una función. Con ES6, los parámetros opcionales y sus valores por defecto pueden escribirse directamente en la firma de la función.

La desestructuración permite la extracción selectiva de elementos de objetos y matrices. Si se analiza más detenidamente, existen muchas aplicaciones posibles que hacen que el código JS sea más elegante y compacto.

Hasta ES6, era necesario manejar la variable argumentspara permitir un número variable de parámetros para las funciones. Esto es mucho más fácil en ES6 con los llamados parámetros restantes.

El operador ... no sólo se utiliza para los parámetros residuales en las definiciones de funciones, también se puede utilizar en la estructuración de matrices para capturar el "resto" de los elementos y ponerlos a disposición como una matriz.

El operador resto no sólo se puede utilizar con matrices, también se puede utilizar con objetos para recoger las propiedades restantes y hacerlas disponibles como un objeto.

Lo contrario del operador resto es el operador dispersión. Tiene el mismo aspecto (...), pero se encuentra al otro lado de una asignación y divide la matriz en sus partes individuales.

El "truco" con el operador de dispersión también funciona muy bien con objetos. Se puede utilizar para "mezclar" objetos en otros objetos. Sin embargo, también hay una muy buena alternativa para esto con Object.assign().

Las funciones en literales de objeto son muy engorrosas de escribir con la palabra clave function. Con ES6, sin embargo, también se pueden escribir de una forma mucho más corta y pegadiza.

Trabajar con cadenas es una herramienta básica para todo programador. Es bueno que ES6 ofrezca algunas funciones de cadena nuevas y muy útiles que ahorran mucho trabajo de mecanografía.

No hay otra forma de decirlo: hasta ES6, los literales de cadena de varias líneas con valores de variable integrados eran un coñazo y además muy desagradables de leer. Los nuevos literales de plantilla de ES6 son una bendición sintáctica.

ES5 ya dispone de algunas funciones de array muy útiles que adoptan un enfoque más funcional. ES6 ha añadido algunas más que hacen que trabajar con arrays sea aún más cómodo. Sin embargo, algunas de las "viejas" funciones ya disponibles en ES5 también se mantienen aquí.

Los objetos siempre han podido utilizarse como almacén de valores clave o diccionario, pero con algunas desventajas. La nueva estructura de datos map se deshace de estas desventajas y ofrece una sólida funcionalidad de diccionario, como se conoce de otros lenguajes de programación.

Los procesos asíncronos pueden manejarse con funciones de devolución de llamada, pero existe el riesgo de que la profundidad de anidamiento sea demasiado grande y el código se vuelva confuso (el llamado infierno de las devoluciones de llamada). Las promesas resuelven este problema evitando el anidamiento profundo y permitiendo encadenar procesos asíncronos en un nivel.

Después de que el infierno de las devoluciones de llamada pueda evitarse con Promises, la construcción async/awaitlleva el azúcar sintáctico un paso más allá. Se basa en Promises y permite programar procesos asíncronos casi como síncronos. Una vez que hayas programado con async/await, evitarás el uso directo del método thende Promises (y aún más el uso de callbacks).

Los módulos se han utilizado en Node.js desde el principio, pero al principio se basaba exclusivamente en el formato de módulo CommonJS con require. Desde ES6, existe una definición de módulo en el estándar y, por tanto, las nuevas palabras clave import/export. Este formato es ahora soportado por casi todas las (nuevas) librerías JS, y Node.js también puede manejarlo en las últimas versiones.

Además de la importación estática de módulos con la palabra clave import, ES6 también soporta la importación dinámica con la función import. Como todo funciona de forma asíncrona, se devuelve una promesa, cuya resolución puede esperarse utilizando await. Esto significa que nada se opone a la recarga de módulos en cualquier momento durante el tiempo de ejecución.

Hasta ES6, la programación orientada a objetos clásica con clases y herencia sólo existía a través de las desviaciones de un prototipo en una función constructora. Esto era engorroso, no parecía muy compacto y, por tanto, también era propenso a errores. Con ES6, la nueva palabra clave class permite ahora la definición de forma compacta, tal y como se conoce de otros lenguajes de programación como Java, C# y C++. Internamente, sin embargo, sigue siendo un sistema fundamentalmente basado en prototipos, sólo que con una sintaxis más agradable.

La herencia también sigue basándose en prototipos, pero es mucho más fácil y clara de escribir en ES6 con la palabra clave extends. Si la usas, tienes que llamar al constructor de la clase base con super en el momento adecuado. Por supuesto, en esta lección también se explica cómo hacerlo.

Las nuevas normas también permiten declarar miembros o campos. Esto significa que los campos estáticos también pueden declararse e inicializarse.

Ahora también se pueden declarar campos privados, y se garantiza que no se pueda acceder a ellos desde el exterior. Hay que acostumbrarse un poco a la declaración, ya que es notablemente diferente a la de otros lenguajes de programación.

Con la nueva palabra clave class y las características asociadas como la herencia y el encapsulamiento de datos (campos privados), todos los programadores OO deberían estar contentos, ¿verdad? En esta lección, me gustaría presentar una alternativa para la creación de objetos que funciona sin clases, prototipos y esto, pero en cambio permite un tipo más flexible de "herencia" o más bien "composición".

Las características más importantes de la versión ES6 y posteriores deberían estar ya cubiertas. Sin embargo, siempre se están añadiendo nuevas funciones. Algunas funciones de uso menos frecuente aún no se han mencionado. Esta lección explica qué se puede esperar todavía en el futuro y qué funciones podrían seguir siendo interesantes en casos especiales.