Development

Nuevas características EcmaScript 2021

Publicado por
Pedro Muñoz
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. 🧐

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Descarga nuestro Clever UI KIT 👇

Acá en Clever Experience trabajamos en un pequeño UI KIT que puede ayudarte en la próxima propuesta rápida, idea o proyecto que debas o quieras desarrollar.
Ingresa tu nombre y correo para descargar.

Gracias. Te será enviado un mail confirmando la inscripción
¡Ups! Algo salió mal al enviar el formulario.