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.

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.

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.

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.

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).

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.

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.

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.