Javascript ES12 – ES2021

Mientras termino de redactar un nuevo curso, continuo ampliando el conocimiento sobre Javascript y para ellos vamos a ver las últimas features que se han incluido en la última versión de Javascript ES12 (ES2021).

A continuación veremos las features que se han incluido en esta nueva versión:

• replaceAll()

  • Esta nueva feature nos permite remplazar todas las coincidencias de una cadena de texto.

  • const text = "Tu contraseña ha cambiado. Recuerda actualizar tu contraseña y guardar tu contraseña en un sitio seguro";
    
    text.replace('contraseña', 'PASSWORD')
    // "Tu PASSWORD ha cambiado. Recuerda actualizar tu contraseña y guardar tu contraseña en un sitio seguro"
    
    text.replaceAll('contraseña', 'PASSWORD')
    // "Tu PASSWORD ha cambiado. Recuerda actualizar tu PASSWORD y guardar tu PASSWORD en un sitio seguro"

• Operador de asignación lógica

  • Este operador nos permite combinar los operadores lógicos ??, || y && con una asignación.
  • &&=, la asignación solo se realiza si el valor es true.
  • ||=, la asignación solo se realiza si el valor es false.
  • ??=, la asignación solo se realiza si el valor es null o undefined, siendo su comportamiento similar al operator nullish coalescing.

  • let status = true;
    let result = 'Hello';
    
    status &&= result;
    console.log('&&=', result, status); // Hello Hello
    
    status = false;
    status &&= result;
    console.log('&&=', result, status); // Hello false
    
    status = true;
    status ||= result;
    console.log('||=', result, status); // Hello true
    
    status = false;
    status ||= result;
    console.log('||=', result, status); // Hello Hello
    
    status = null;
    status ??= result;
    console.log('??=', result, status); // Hello Hello
    
    status = undefined;
    status ??= result;
    console.log('??=', result, status); // Hello Hello
    
    status = 0;
    status ??= result;
    console.log('??=', result, status); // Hello 0

• Promise.any

  • Nos permite gestionar un array de promesas. capturando la primera que se resuelva satisfactoriamente.
  • En el caso de que ninguna se resuelva ninguna, nos devolverá un array de excepciones.
  • Existe otro método llamado .race() que funciona igual, solo que en este caso no importa si falla o resuelve.

  • (async () => {
        const fn = (status, time) => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                   status ? resolve('OK') : reject('FAIL');
                   resolve(status);
                }, time);
            });
        };
        
        // Promise.any [OK ===> OK]
        try {
            const arr = [fn(true, 1000), fn(false, 100)]; // Se cumple antes el fallo, pero espera a la correcta
            const result = await Promise.any(arr);
            console.log('OK ===>', result);
        } catch(err) {
            console.log('ERR ===>', err);
        }
    
        // Promise.any (todas fallan) [ERR ===> AggregateError: All promises were rejected]
        try {
            const arr = [fn(false, 1000), fn(false, 100)]; // Se cumple antes el fallo, pero espera a la correcta
            const result = await Promise.any(arr);
            console.log('OK ===>', result);
        } catch(err) {
            console.log('ERR ===>', err);
        }
    
        // Promise.race [ERR ===> FAIL]
        try {
            const arr = [fn(true, 1000), fn(false, 100)]; // Se primera que se cumpla
            const result = await Promise.race(arr);
            console.log('OK ===>', result);
        } catch(err) {
            console.log('ERR ===>', err);
        }
        
    })();

• Separadores numéricos

  • Con esta nueva feature podemos tener literales numéricos más legibles usando el carácter ‘_‘.

  • const numero = 1_000_000_000; // 1000000000
    

• Intl.ListFormat

  • El objeto Intl se encuentra dentro del API de internacionalización de ECMAScript incluido en la versión anterior.
  • En esta nueva versión han incluido el nuevo constructor ListFormat, que permite formatear un array de strings en un string.
  • Puedes encontrar mas información aquí

  • const nombres = ['Iván', 'Gustavo', 'Juan Manuel'];
    const language = 'es';
    
    const formatA = new Intl.ListFormat(language, { style: 'long', type: 'conjunction' });
    console.log(formatA.format(nombres)); // Iván, Gustavo y Juan Manuel
    
    const formatB = new Intl.ListFormat(language, { style: 'long', type: 'disjunction' });
    console.log(formatB.format(nombres)); // Iván, Gustavo o Juan Manuel

• Métodos de clase privados

  • En esta nueva revisión también han incluido métodos privados usando como prefijo a su definición la ‘#‘.

  • class Persona {
        #addPrivate(val) {
            console.log('PRIVATE...', val);
        }
        addPublic(val) {
            console.log('PUBLIC....', val);
        }
    }
    const P1 = new Persona();
    P1.addPublic(100);  // PUBLIC.... 100
    P1.addPrivate(200); // Uncaught TypeError: P1.addPrivate is not a function