JavaScript: ¿qué hay de nuevo, ES2020?

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.

if (condition) {
  const newModule = await import('./myNewModule.js');
  newModule.run();
}

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:

let currentSize;
if (myObject && myObject.customPropery) {
  currentSize = myObject.customPropery.size;
}

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

const 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í:

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

const 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:

const test = 0;

const currentSize = test || 10; // 10
const 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:

const promises = [
  Promise.resolve(10),
  Promise.reject(new Error('Upss....')),
  Promise.resolve(true)
];

const allPromises = await Promise.allSettled(promises);
console.log(allPromises);

// [ {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