Novedades ES10 o ES2019.

Sin duda se ve un poco extraño decir ES10 o ES2019, pero desde que salió la versión ES6 (ES2015) JavaScript tiene una versión anual (es por eso que mi curso en lugar de llamarse ES6, ES7, ES8, ES9, ES10 se llama JavaScript Moderno que engloba todas estas versiones). Entonces veamos algunas de las nuevas características que vas a encontrar en ES10

.flat

Creará un nuevo array con todos los sub-arrays (arrays dentro de otro array) que este array contenga, supongamos el siguiente arreglo con otros arreglos dentro:

const edades = [8,10,9, 11, [13,18, 20, [18,20,21]]];

console.log(edades);

// Resultado: (5) [8, 10, 9, 11, Array(4)] 

.flat será muy útil para acceder al segundo al primer sub-array con el siguiente código:

console.log( edades.flat() );

// Resultado: (8) [8, 10, 9, 11, 13, 18, 20, Array(3)]

El código anterior nos permitirá acceder al primer sub-array, pero nota como aún tenemos un segundo arreglo, no hay problema podrías hacerlo de las iguiente forma:

console.log( edades.flat().flat() ); // 2 veces flat para acceder a los 2 sub-arrays
// Resultado: (10) [8, 10, 9, 11, 13, 18, 20, 18, 20, 21]

De esta forma estaremos accediendo a todos los valores del array ( y sub arrays) sin necesidad de escribir una gran cantidad de código para hacerlo, el problema con el código anterior es: tenemos 2 sub-arrays, y escribimos 2 veces .flat, ¿Qué pasaría con 100 sub-arrays? Si, con esta solución tendrías que escribir 100 veces .flat() después de tu arreglo, por lo tanto .flat() le puedes pasar como parámetro la cantidad de sub-arrays a los que deseas acceder:

// acceder al primer nivel de profundidad del sub-array
console.log(edades.flat(1));
// Resultado: (8) [8, 10, 9, 11, 13, 18, 20, Array(3)]

// Acceder a los 2 niveles de sub-array
console.log(edades.flat(2));
// Resultado: (10) [8, 10, 9, 11, 13, 18, 20, 18, 20, 21]

En el ejemplo anterior puedes ver que al pasar 1, nos permite acceder al primer nivel de sub-arrays de nuestro array principal, el segundo nos permite acceder a 2 niveles (que son los que tenemos en nuestro arreglo principal, el problema es que mientras más arreglos tengas, más complicado será saber la profundidad, por lo tanto puedes utilizar el siguiente código para acceder a todos los niveles:

console.log(edades.flat(Infinity));
// Resultado: (10) [8, 10, 9, 11, 13, 18, 20, 18, 20, 21]

Puedes ver que si tomamos la traducción literal: flat – plano parece que este método cumple a la perfección de “aplanar” un arreglo.

.flatMap

Es una combinación de .map y .flat, te permite crear un nuevo arreglo nuevo accediendo a cada elemento del arreglo, pero también aplica un .flat a cada elemento, supongamos el siguiente código:

const productos = [
    { nombre: 'Producto 1', precio: 20},
    { nombre: 'Producto 2', precio: 30},
    { nombre: 'Producto 3', precio: 40}
];

Supongamos que deseamos colocar cada uno de estos productos en un nuevo arreglo que coloque productos y precios juntos, si utilizaramos un .map el resultado sería el siguiente:

const resultado = productos.map(producto => [producto.nombre, producto.precio]);
console.log(resultado);
// Resultado
(3) [Array(2), Array(2), Array(2)]
0: (2) ["Producto 1", 20]
1: (2) ["Producto 2", 30]
2: (2) ["Producto 3", 40]

Un poco mejor, pero con .flatMap aplicaremos un .flat() junto al .map() anterior y el resultado será un arreglo (sin sub-arrays) con productos y precios:

const resultado = productos.flatMap(producto => [producto.nombre, producto.precio]);

console.log(resultado);

// Resultado
(6) ["Producto 1", 20, "Producto 2", 30, "Producto 3", 40]

.trimStart

Te permitirá eliminar el espacio en blanco al inicio en un string. Ideal para limpiar o validar las entradas de un formulario:

// variable con string y espacio al inicio y final
const correo = "     [email protected]      ";

// eliminar el espacio en blanco al inicio
console.log(correo.trimStart());

// Resultado: "[email protected]       "

.trimEnd

Te permitirá eliminar el espacio en blanco al final de un string.

// variable con string y espacio al inicio y final
const correo = "     [email protected]      ";

// eliminar el espacio en blanco al final
console.log(correo.trimEnd());

// Resultado: "     [email protected]"

Existe un método más llamado .trim() que borrará el espacio al inicio y al final, pero ese método está disponible desde ES5.

.toString()

Retorna un string que representa una función.

function sumar(a,b) {
    return a + b;
}
// convertir con toString()
console.log(sumar.toString());

// Resultado: (como string)
function sumar(a,b) {
    return a + b;
}

Este método es ideal para conocer una función de una librería o previamente escrita sin necesidad de tenerla que buscar en el código (entre otras ventajas) pero personalmente es donde me ha parecido que se puede utilizar.

Try Catch

El try catch no es algo nuevo en JavaScript. Pero la nueva versión añade nuevas opciones para el catch, personalmente creo que la opción anterior sigue siendo buena. Anteriormente al tener un error como el siguiente (o el resultado de una consulta a una Base de Datos) el catch era ejecutado, y es posible acceder al error de la siguiente forma:

//  Try Catch - Antes
try {
    throw new Error('Algo salió mal');
} catch (error)  {
    console.log(error);
}

En ES10 Es posible hacer lo siguiente con el mismo resultado:

//  Try Catch - ES10
try {
    throw new Error();
} catch  {
    console.log('Hubo un error');
}

Nota como ya no pasamos (error) en el catch, y no es necesario pasar un mensaje de error al crear un new Error();

Existen otras características nuevas de E10, personalmente estas fueron las que mas me gustaron, recuerda que estas son características nuevas y la adopción por parte de los navegadores es parcial, por lo tanto con el tiempo cada navegador las soportará correctamente.