Nuevas características EcmaScript 2021

Cada año, la organización Ecma International acepta solicitudes de los desarrolladores del mundo para agregar nuevas características al lenguaje JavaScript, este año no ha sido la excepción y estos son algunos de los más destacables.

‍

String.prototype.replaceAll

‍

Cuando se necesitan reemplazar todas las ocurrencias buscadas en una cadena de texto, estamos obligados a utilizar expresiones regulares, puesto que la función .replace que viene en el objeto String sólo lo hace con la primera ocurrencia.

A solucionar esto llega el método .replaceAll, el cual nos permite reemplazar todas las ocurrencias encontradas sin necesidad de escribir una expresión regular.

Su uso es igual al de replace, recibe como primer parámetro el valor a buscar y como segundo parámetro el valor a reemplazar.

‍

//String.prototype.replaceAll(searchValue, replaceValue)

const textToReplace = 'Be_nice_be_clever';

const textWithSpace = textToReplace.replaceAll('_',''); //Out: 'Be nice be clever'

‍

Promise.any

‍

Este nuevo método para las promesas nos permite obtener la primera en cumplirse, pero esto ya lo tenemos con el método race, la diferencia entre estos dos grandes métodos es que si en race una promesa es rechazada, todo el flujo es cancelado, mientras que con any, esperará a que una se cumpla y si todas son rechazadas, lanzará un nuevo error de tipo AggregateError, el cual podemos interceptar dentro del método catch.

‍

Promise.any([
  fetch('https:duckduckgo.com/').then(()=> 'Duck Duck Go'),
  fetch('https://www.google.cl/').then(()=> 'Google'),
  fetch('https://www.bing.com').then(()=> 'Bing'),
  fetch('https://www.ecosia.org/').then(()=> 'Ecosia'),
])
.then((first)=> {
  console.log(first);// Primera promesa es completarce setisfactoriamente
})
.catch((error)=>{
  console.log(error); // Solo si todas las promesas han sido rechazados
});

‍

Nullish Coalescing

‍

La característica nullish coalescing o Fusión de null viene a solucionar un problema específico que en ocasiones se presenta en el desarrollo, por ejemplo cuando queremos validar en la asignación que un valor sea válido, utilizamos el siguiente formato:

‍

const a = '';

let b = a || 'Other value';

‍

El cual revisará si la constante ‘a’ no contiene un valor falsy (es decir, false, null, 0, ‘’, undefined, NaN) asignará su valor, por el contrario, asignará el que está siguiente a los pipes (||). Esto funciona, pero hay ocasiones en los que necesitamos sólo validar si es null o undefined.

Por ejemplo, tenemos un caso en que un string vacío es un valor válido para nuestro funcionamiento, en estos casos nos sirve perfectamente esta nueva funcionalidad.

Su notación es igual a la de los pipes, pero reemplazándolos por dos signos de interrogación:

‍

const a = null ?? 'Hello'; //Out: 'Hello'

let b = undefined ?? 'World'; // Out: 'World'

const c = 0 ?? 100; // Out: 0

const d = false ?? true; // Out: false

const e = '' ?? 'Not empy'; // Out: ''

‍

Asignación de Operador Lógico

‍

Actualmente en JavaScript existe la posibilidad de asignar valores con los operadores matemáticos, como los de incremento, multiplicación, división o sustracción.

‍

let a = 10;

a += 20; // a = 30

‍

En esta nueva característica se agregan las asignaciones de operadores lógicos, la cual se inspira en el lenguaje Ruby. Siguen la misma estructura de los matemáticos, pero estas utilizan los símbolos de ||, && y ??, a continuación unos ejemplos con su respectivo equivalente.

El operador || comprueba si el valor actual de la variable es falso, asignará el nuevo valor.

‍

let a = false;

a ||= 20; // 'a' es falso, asigna nuevo valor.

// Sería el equivalente
if (a) {
    a = 20;
}

‍

El operador && comprueba si el valor actual de la variable es verdadero, asignará el nuevo valor.

‍

let a = true;

a &&= 50; // 'a' es verdadero, asigna nuevo valor.

// Sería el equivalente
if (a){
    a = 50;
}

‍

De igual forma el operador ?? comprueba si el valor es null o undefined y asigna el nuevo valor.

‍

let a = undefined;

a ??= 100; // 'a' es undefined asigna nuevo valor

‍

Con esto simplificamos líneas de código y nuestra sintaxis queda más legible.

‍

Separador numérico

‍

Cuando trabajamos con valores numéricos grandes en JavaScript, es bastante engorroso leerlos rápidamente, por ejemplo: 100000000. Todos tenemos métodos distintos para leerlos, ya sea contando los ceros o agregando los puntos donde corresponde, a esto viene este nuevo feature, el cual nos permite separar los números con guiones bajo (_) como si fueran los separadores de miles que siempre utilizamos y esto no afecta en nada la funcionalidad del código, es simplemente azúcar sintáctica. Dejo una muestra de esto.

‍

console.log(100000000)
100000000
undefined
console.log(100_000_000);
100000000
undefined
console.log(100000000 === 100_000_000);
true

‍

Estas son algunas de las nuevas características que trae EcmaScript para este año, utilizarlas o no está al criterio de cada uno, pero siempre es bueno conocerlas para sacarle el máximo provecho al lenguaje y crecer como profesionales.

Hay que destacar que todas estas funcionalidades estarán disponibles a partir de junio de este año, sin embargo, ya se pueden probar en las versiones canary de varios navegadores, como es el caso de Google Chrome. Todas las propuestas presentadas y aceptadas se encuentran en el repositorio en github de la versión especificación de este año.

‍

And remember, be Nice Be Clever. 🧐

‍

‍