English version: https://latteandcode.medium.com/javascript-5-novedades-que-nos-traer%C3%A1-es2021-fc9929226267

Desde que allá por 2015 quedó liberada ES6, año tras año Javascript ha recibido interesantes novedades que mejoran la forma en que trabajamos con este lenguaje.

Es cierto que ninguna ha supuesto la revolución que en su momento significó las características incorporadas con EcmaScript 2015 (spread operator, promesas…), pero sí que han contribuido a hacer de Javascript un lenguaje cada vez más maduro.

Ahora que estamos a finales de 2020 toca por repasar todo lo que está por llegar el próximo año con la liberación de ES2021

¿Me acompañas?

Asignadores lógicos

Si no conoces los “shortcircuits” de Javascript lo primero que te recomiendo es que visites esta “receta javascriptera”:

Como habrás visto, el operador || podía emplearse para la asignación de valores por defecto:

let bar;
const foo = 'some value';
bar = bar || foo;

A partir de 2021 podremos realizar esa asignación de una forma más corta gracias al operador ||=

let bar;
bar ||= 'some value';

Además de el también se han incorporado el operador &&= :

let foo = 'foo';
let bar = 'bar';
foo = foo && bar; // 'bar'foo &&= bar; // 'bar'

Y el operador ??= , que emplea el null coalescing operator para realizar la asignación:

let foo = null;
let bar = 'bar';foo = foo ?? bar; // 'bar'foo ??= bar; // 'bar'

String.prototype.replaceAll

En Javascript el método replace que tienen los strings posee una característica que no es del todo intuitiva. Si el primer argumento es un string, tan sólo será reemplazada la primera ocurrencia:

const p = 'These are foo, foo, and foo.';
p.replace('foo', 'bar'); // 'There are bar, foo, and foo.'

Para que el método funcione como seguramente esperamos es necesario pasar el string como una expresión regular:

const p = 'These are foo, foo, and foo.';
p.replace(/foo/g, 'bar'); // 'There are bar, bar, and bar.'

Algo que no es del todo cómodo.

Sin embargo, ES2021 introduce el método replaceAll que sustituye directamente todas las ocurrencias por el string que indiquemos:

const p = 'These are foo, foo, and foo.';
p.replaceAll('foo', 'bar'); // 'There are bar, bar, and bar.'

Este método, al igual que replace no modifica la cadena original sino que devuelve una nueva con el resultado de la sustitución.

Promise.any

El método any del objeto Promise devuelve una promesa tan pronto como una de las pasadas como argumentos pasa al estado “fullfilled”. La diferencia con el método Promise.race es que este método no lanza una excepción si la primera promesa en ejecutarse falla. Tan sólo lanza una excepción en el caso de que todas las promesas del array terminen en el estado rejected.

Invocación de Promise.any con un array de promesas en el que al menos una se resuelve correctamente:

const promises = [  new Promise((resolve, reject) => reject('Primera')),  new Promise((resolve, reject) => reject('Segunda')),  new Promise((resolve) => resolve('Tercera'))];Promise.any(promises)  .then(result => console.log(result)); // 'Tercera'

Invocación de Promise.any con un array de promesas en el que todas fallan:

const promises = [  new Promise((resolve, reject) => reject('Primera')),  new Promise((resolve, reject) => reject('Segunda')),  new Promise((resolve, reject) => reject('Tercera'))];Promise.any(promises)  .then(result => console.log(result))  .catch(error => console.log(error)); // AggregateError: All promises were rejected

Separadores numéricos

Una característica muy simple pero que hará más legible nuestro código es la posibilidad de emplear el caracter _ para separar grupos de dígitos de un número:

const number = 1_000_000_00;
console.log(number); // 100000000

Intl.ListFormat

La clase Intl de Javascript nos permite traducir de forma nativa fechas y cantidades monetarias a diferentes idiomas:

https://github.com/ger86/recetas-javascripteras/blob/master/4.%20Special%20Objects/04.%20Intl%20Object.md

En ES12 se le añade un nuevo método: Intl.ListFormat :

const people = ['Pepito', 'Fulanito', 'Menganito'];new Intl.ListFormat('es', { style: 'long', type: 'conjunction' }).format(people); 
// "Pepito, Fulanito y Menganito"new Intl.ListFormat('es', { style: 'long', type: 'disjunction' }).format(people);
// "Pepito, Fulanito o Menganito"

WeakRef

En un artículo anterior ya te hablé de los WeakMaps :

Ahora ES2021 incorpora el objeto WeakRef para definir referencias débiles a variables de modo que no cuenten a la hora de que sean eliminadas por el “garbage collector”.

El “garbage collector” de Javascript se encarga de eliminar de forma automática todas aquellas variables que ya no estén siendo utilizadas en ninguna parte del código, de modo que la memoria quede optimizada.

Veamos el uso de WeakRef con un ejemplo muy sencillo en el que definimos un intervalo de tiempo que intercambia el estilo de un enlace hasta que este desaparece.

function toggleUnderline(element) {
  const weakElement = new WeakRef(element); 
  let intervalId = null;
  
  function toggle() { 
    // Obtener el elemento de la Weak Reference
    const el = weakElement.deref();     // Puede que ya no exista
    if (el) {
      const decoration = weakElement.style.textDecoration;
      if (decoration === 'none') {
        weakElement.style.textDecoration = 'underline';
      } else {
        weakElement.style.textDecoration = 'none'; 
    } else { 
        clearInterval(intervalId); 
    }
  }
  intervalId = setInterval(toggle, 1000);
}toggleUnderline(document.getElementById("animatedLink"));setTimeout(() => {
  document.getElementById("animatedLink").remove();
}, 10000);

Este objeto WeakRef puede resultar muy útil para la implementación de cachés y si quieres saber más sobre él te aconsejo que leas detenidamente este artículo:

Conclusiones

Como ves, el año 2021 no nos traerá muchas novedades en lo que a características “súper” interesantes se refiere. Sin embargo, creo que esto se debe a que poco a poco Javascript va alcanzando un alto grado de madurez, de modo que ahora el equipo de desarrolladores se está centrando en mejorar algunas de sus características.

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇

Apóyame en Patreon

🧡🧡🧡 Gracias a: Joseba, Óscar, Alex y Jorge.