JavaScript: ¿qué hay de nuevo, ES2020?

Ricardo Vega

por Ricardo Vega el 13 de mayo, 2021

Etiquetas:

ProgramaciónJavascript

5 minutos.

Hace unos años hablaba en "Actualiza tu Javascript" de las nuevas funcionalidades que había incluido este lenguaje con ES6, lo que en muchos casos había supuesto una pequeña revolución en la forma en la que escribimos nuestro código.

Sin embargo, Javascript ha seguido evolucionando estos años y en el post de hoy quería recopilar alguna de las funcionalidades más interesantes (y novedosas en el día que estoy escribiendo esta entrada) que tiene el lenguaje y que nos permiten usarlo de forma más sencilla para construir nuestras aplicaciones tanto de cliente como de servidor.

Importar dinámicamente

Gracias a esta funcionalidad, puedes importar ficheros y módulos de JavaScript dinámicamente en tu código, lo que permite realizar los imports exclusivamente si el código va a ser utilizado.

Esta técnica no es nueva y herramientas muy comunes en el stack de JavaScript com puede ser Webpack permitían su aplicación (el llamado "code-splitting") pero, gracias a ES2020, podemos aplicar este patrón de forma nativa.

1if (condition) {
2 const newModule = await import('./myNewModule.js')
3 newModule.run()
4}

Optional Chaining

Esta funcionalidad, para la que no he encontrado una traducción adecuada, nos provee de una sintaxis sencilla para acceder a propiedades internas de objetos sin tener que hacer comprobaciones sobre si el objeto sobre el que hacemos la lectura es null o undefined.

Si llevas ya un tiempo trabajando con JavaScript te sonará código con esta pinta:

1let currentSize
2if (myObject && myObject.customPropery) {
3 currentSize = myObject.customPropery.size
4}

Gracias a esta nueva funcionalidad, podemos simplificar nuestro código por:

1const currentSize = myObject?.customPropery?.size

De forma que, al igual que en el primer fragmento, si una de las propiedades anteriores es nula o no-definida, el valor de currentSize será undefined, estando protegidos de errores de referencia.

Nullish Coalescing

Otra funcionalidad que no sé muy bien como traducir 😁.

Otro fragmento de código bastante habitual en nuestro código hasta ahora sería algo tal que así:

1const currentSize = test || 10

Si describiésemos qué hace esa linea, podríamos resumirlo en que currentSize valdrá el valor de test, siempre que la variable test no sea "falseable", es decir, no sea false, 0, null o undefined. En caso de que test tenga alguno de estos valores, el valor de currentSize será 10.

Esta nueva funcionalidad, nos permite evaluar valores no mirando si son "falseables" simplemente, sino exclusivamente null o undefined.

1const currentSize = test ?? 10

Muy semejante al anterior, pero currentSize será el valor de test excepto si este es exclusivamente null o undefined, en cuyo caso será 10.

Vistos los dos ejemplos juntos y las diferencias de estos operadores:

1const test = 0
2
3const currentSize = test || 10 // 10
4const currentSize = test ?? 10 // 0

Promise.allSettled

Hasta la fecha, podíamos usar Promise.all(promesas) para unificar una serie de promesas. Este método nos devolvía otra promesa que se resolvía una vez todas las que lo componían habían concluido con éxito o bien, rechaza la petición en cuanto una de las que lo componían fallaba.

A partir de ahora podemos contar también con Promise.allSettled(promesas) quien nos devolverá una promesa que se resolverá cuando todas las que lo componen estén resueltas (con éxito o con rechazo), devolviéndonos un array especificando el valor de cada una.

Te pongo un ejemplo:

1const promises = [
2 Promise.resolve(10),
3 Promise.reject(new Error('Upss....')),
4 Promise.resolve(true),
5]
6
7const allPromises = await Promise.allSettled(promises)
8console.log(allPromises)
9
10// [ {status: 'fulfilled, value: 10}, {status: "rejected", reason: Error}, {status: 'fulfilled, value: true}]

globalThis

ES2020 introduce una nueva palabra clave: globalThis que principalmente es equivalente al objeto global pero está unificada en los deferentes entornos que uses.

Hasta esta funcionalidad, para acceder al objeto global, deberías utilizar diferentes palabras clave según tu entorno de ejecución, a saber:

  • window en navegadores
  • global en Node.js
  • self en Web Workers

Lo que era especialmente problemático si quieres que tu código sea reutilizable en diferentes entornos de ejecución.

Con esta funcionalidad, puedes usar simplemente globalThis.

Puede que algunas de estas nuevas funcionalidades ya las conocieses o las usases a través de alguna otra herramienta del ecosistema de JavaScript. Sin duda, el hecho de que ahora las tengamos disponibles de forma nativa en el lenguaje siempre es positivo, permitiéndonos una sintaxis más estandarizada sin tener que recurrir a añadidos.

Espero que este post te haya podido servir de utilidad y te ayude a conocer mejor este lenguaje que se ha convertido en mi principal herramienta de trabajo durante los últimos.

Nos vemos en el próximo post.

Un saludo,

Ricardo

Discutir en Twitter

Compartir artículo
Ricardo Vega
Ricardo Vega es un desarrollador "full-stack" al que le gusta "cacharrear con todo" pero está especializado sobre todo en tecnologías Javascript, principalmente en React. Intenta devolver a Internet lo que Internet le ha dado.

Sigue leyendo 😀


Apoya al blog y mi actividad


Si te ha gustado este artículo, valora apoyarme económicamente a través de Patreon o comprándome un café. Cualquier pequeño donativo, significa mucho y ayuda a la continuidad del blog.

Puedes consultar otras opciones adicionales e información adicional en /donate

Permanezcamos en contacto!


¿Quieres enterarte de todas las novedades del sector? ¿Te gustaría trabajar conmigo? ¡Puedes contactar conmigo de forma muy sencilla!

@ricveal

ricardo.vega@ricveal.com

Ricardo Vega
Copyright © 2021 | Política de Privacidad