ES2021: Novedades de JavaScript en 2021

JavaScript (o EcmaScript) es un lenguaje vivo y cada año recibe algunas novedades. En el año 2015 recibió muchas mejoras importantes, pero por lo general las mejoras que recibe cada año no son rompedoras. Este es el primero de una serie de artículos donde vamos a repasar las novedades de los últimos años en JavaScript. Empezaremos por las novedades del año 2021, es decir, por ES2021.

Me voy a centrar exclusivamente en aquellas novedades de ES2021 que sean más asequibles. Las novedades que impliquen un uso avanzado del lenguaje las comentaré simplemente de pasada.

String.prototype.replaceAll

Se trata de un nuevo método para las cadenas de texto. Es una variante del método replace(), con la diferencia que el método replace() solo reemplaza la primera aparición del texto que buscamos, mientras que replaceAll() reemplaza todas las apariciones.

var plantilla = "Muchas gracias [usuario] por tu compra en nuestra tienda!<br>"+
    "Esperamos volver a verte pronto [usuario].";
var resultado = plantilla.replaceAll("[usuario]", "Pepe");
document.write(resultado);

Como es algo muy nuevo, y para maximizar compatibilidad con navegadores antiguos, sigue siendo preferible el uso de expresiones regulares (además con expresiones regulares podemos hacer que sea insensible a las mayúsculas).

var plantilla = "Muchas gracias [USUARIO] por tu compra en nuestra tienda!<br>"+
    "Esperamos volver a verte pronto [usuario].";
var resultado = plantilla.replace(/\[usuario\]/gi, "Pepe");
document.write(resultado);

Promise.any

Las promesas son un tema complejo, así que no voy a entrar en detalle, pero cualquiera que haya usado promesas entenderá fácilmente para que sirve este nuevo método. Si no las has usado con anterioridad, te recomiendo mi artículo de introducción a las promesas y mi artículo sobre async/await.

En el primer artículo se mencionan los métodos estáticos de la clase Promise. Pues bien, any() es un nuevo método estático de dicha clase.

El método any() es muy similar al método race() (comentado en dicho artículo). La diferencia simplemente es que en el caso del método race(), si falla una promesa se produce una excepción, mientras que con el método any() solo se produce una excepción si fallan todas las promesas.

En caso de error se proporciona un nuevo tipo de objeto de la clase AggregateError, que viene a ser una  especie de array con todos los errores (uno por cada promesa que haya fallado).

WeakRefs

Es un tema muy avanzado que la mayoría de mortales no vamos a necesitar usar NUNCA. De hecho, la propia propuesta dice claramente que «they are best avoided if possible». Así que simplemente me voy a limitar a comentar en que consiste.

En pocas palabras se trata de referencias a objetos que son ignoradas por el recolector de basura. Eso significa que si un objeto solo tiene este tipo de referencias activas, puede ser borrado sin contemplaciones por el recolector de basura.

Logical Assignment Operators

La idea es combinar operadores lógicos con expresiones de asignación.

Se incluyen los siguientes 3 operadores nuevos:

• ??= «QQ equals» – asigna un valor solo si vale null/undefined.
• &&= «And and equals» – asigna una valor a la variable si su valor resuelve a true
• ||= «Or or equals» – asigna una valor a la variable si su valor resuelve a false

Lo mejor es ver un ejemplo de cada uno:

function saluda(nombre) {
  nombre ??= "Alumno"; // si no tiene valor (undefined), valdrá "Alumno"
  alert("Hola " + nombre);
}
saluda();
saluda("Pepe");

var x = 1;
var y = 0;
x &&= "ok";     // x valdrá "ok", ya que su valor actual (1) resuelve (equivale) a true
y &&= "not ok"; // y seguirá valiendo 0, ya que su valor actual (0) resuelve a false

var x = 1;
var y = 0;
x ||= "ok";     // x valdrá 1, ya que su valor actual (1) resuelve (equivale) a true
y ||= "not ok"; // y valdrá "not ok", ya que su valor actual (0) resuelve a false

Numeric separators

Se trata simplemente de la posibilidad de añadir el símbolo _ para separar los dígitos de un número para facilitar su lectura y/o interpretación. Sirve tanto para números enteros como números de coma flotante.

La interpretación del número es cosa nuestra, el símbolo _ simplemente permite separar los números sin provocar un error.

var importe = 12345678;   // este importe que es? euros? céntimos de euro?
var importe = 123_456_78; // podemos interpretarlo como céntimos de euro (123.456,78)
var importe = 12_345_678; // podemos interpretarlo como euros (12.345.678€)

En los 3 casos de este ejemplo, el valor es el mismo (12345678), pero con la diferente separación podemos inferir si el importe corresponde a céntimos de euro o a euros.

var importe = 1283792189; // cientos de millones? miles de millones? decenas de miles de mill.?
var importe = 1_283_792_189; // con el separador se ve fácilmente que son mil millones

Se puede usar también para los decimales, números hexadecimales, etc.

var peso = 0.000_001 // 0.000001
var hex = 0x45_FE_C3_34; // 0x45FEC334

Evita ir a la última

Y nada más. Como podéis ver las novedades de ES2021 fueron poca cosa, pero nunca está de más conocerlas para aprovechar aquellas que nos resulten útiles o reconocer aquellas que encontremos en código fuente ajeno.

De todos modos, recomiendo no ir a la última y empezar a usar estas novedades de ES2021 como si nos fuera la vida en ello. Recordad que al ser novedades del lenguaje, es recomendable no usarlas si no estamos seguros de que nuestros usuarios tienen el navegador actualizado, ya que en caso contrario, provocarán errores al intentar ejecutarse.

Si te has quedado con ganas de más, puedes echarle un vistazo al artículo con las novedades del año anterior, es decir, con las novedades de ES2020.