ES10 en JavaScript – Novedades y Ejemplos Prácticos

JavaScript sigue evolucionando, y con ES10 (también conocido como ECMAScript 2019), llegaron nuevas características que hacen nuestro código más limpio, eficiente y fácil de entender.

Si eres desarrollador, estas mejoras te ayudarán a escribir código más moderno y mantenible. Vamos a explorarlas estas novedades.

1. Array.prototype.flat() y Array.prototype.flatMap()

¿Alguna vez has tenido que trabajar con arrays anidados y te has frustrado al intentar «aplanarlos»? Con flat(), esto es pan comido. Este método nos permite aplanar arrays de manera sencilla, eliminando los niveles de anidación que especifiquemos.

Por ejemplo, imagina que tienes un array con varios niveles de anidación:

const arrayAnidado = [1, 2, [3, 4, [5, 6]]];

Si quieres aplanarlo completamente, puedes usar flat() y pasarle el número de niveles que deseas aplanar. En este caso, 2:

const arrayAplanado = arrayAnidado.flat(2); // [1, 2, 3, 4, 5, 6]

¿Y si no sabes cuántos niveles de anidación tiene tu array? Puedes usar Infinity para aplanarlo completamente:

const arrayComplejo = [1, [2, [3, [4, [5]]]]];
const arrayTotalmenteAplanado = arrayComplejo.flat(Infinity); // [1, 2, 3, 4, 5]

Por otro lado, flatMap() es una combinación de map() y flat(). Primero mapea cada elemento del array y luego aplana el resultado en un solo nivel. Esto es útil cuando necesitas transformar y aplanar al mismo tiempo.

const numeros = [1, 2, 3];
const duplicados = numeros.flatMap(num => [num, num * 2]); // [1, 2, 2, 4, 3, 6]

En este ejemplo, flatMap() duplica cada número y luego aplana el array resultante en un solo nivel.

2. Object.fromEntries()

Este método es especialmente útil cuando trabajas con estructuras de datos que involucran pares clave-valor, como los arrays de arrays. Object.fromEntries() transforma una lista de pares clave-valor en un objeto.

Imagina que tienes un array de arrays, donde cada subarray contiene una clave y un valor:

const entries = [['nombre', 'Carlos'], ['edad', 25]];

Con Object.fromEntries(), puedes convertirlo fácilmente en un objeto:

const objeto = Object.fromEntries(entries); // { nombre: 'Carlos', edad: 25 }

Este método es el inverso de Object.entries(), que convierte un objeto en un array de pares clave-valor. Juntos, son una combinación poderosa para manipular datos.

3. String.prototype.trimStart() y String.prototype.trimEnd()

¿Cansado de los espacios en blanco al inicio o final de un string? Estos métodos te ayudan a eliminarlos de manera específica, sin afectar el resto del contenido.

Por ejemplo, supongamos que tienes un string con espacios innecesarios:

const texto = "   Hola Mundo!   ";

Si solo quieres eliminar los espacios al inicio, usa trimStart():

console.log(texto.trimStart()); // "Hola Mundo!   "

Y si solo quieres eliminar los espacios al final, usa trimEnd():

console.log(texto.trimEnd());   // "   Hola Mundo!"

Estos métodos son ideales para limpiar datos de entrada, como formularios o archivos de texto.

4. Optional Catch Binding

En versiones anteriores de JavaScript, el bloque catch siempre requería un parámetro para capturar el error, incluso si no lo ibas a usar. Con ES10, esto ya no es necesario. Ahora puedes omitir el parámetro del catch si no lo necesitas.

Por ejemplo, en lugar de escribir:

try {
  // Código que puede fallar
} catch (error) {
  console.log("Algo salió mal, pero no necesito detalles del error.");
}

Puedes simplificarlo así:

try {
  // Código que puede fallar
} catch {
  console.log("Algo salió mal, pero no necesito detalles del error.");
}

Esto hace que el código sea más limpio y fácil de leer, especialmente cuando no necesitas manejar el error de manera específica.

5. Symbol.prototype.description

Los símbolos en JavaScript son únicos y se utilizan principalmente como identificadores para propiedades de objetos. Antes de ES10, si querías acceder a la descripción de un símbolo, tenías que convertirlo a string. Ahora, con description, puedes acceder directamente a la descripción.

Por ejemplo:

const miSimbolo = Symbol("miDescripción");
console.log(miSimbolo.description); // "miDescripción"

Esto es especialmente útil cuando trabajas con símbolos y necesitas depurar o mostrar información sobre ellos.

6. Mejoras en JSON.stringify()

ES10 también incluye una mejora en JSON.stringify() para manejar caracteres especiales. Anteriormente, si intentabas convertir un string que contenía caracteres Unicode fuera del rango BMP (Basic Multilingual Plane), como los emojis, JSON.stringify() los convertía en secuencias de escape. Ahora, estos caracteres se mantienen intactos.

const texto = "😊";
console.log(JSON.stringify(texto)); // ""😊""

Esto hace que la serialización de datos sea más predecible y fácil de trabajar.

7. Function.prototype.toString() Mejorado

En ES10, el método toString() de las funciones ahora devuelve una representación más precisa del código fuente, incluyendo comentarios y espacios. Esto es útil para depuración y herramientas de análisis de código.

function suma(a, b) {
  // Suma dos números
  return a + b;
}
console.log(suma.toString());

Salida:

"function suma(a, b) {
  // Suma dos números
  return a + b;
}"

Conclusión

ES10 trae mejoras que, aunque no revolucionan el lenguaje, sí nos hacen la vida más fácil. Desde métodos para manipular arrays y strings hasta simplificaciones en el manejo de errores, estas características están diseñadas para que escribamos código más limpio y eficiente.

5 Retos para Practicar

Para completar con este post, te invito a que realices estos retos para practicar lo aprendido:

1. Aplana un array anidado de 3 niveles usando flat() y luego duplica cada elemento con flatMap().
2. Convierte un array de pares clave-valor en un objeto usando Object.fromEntries().
3. Crea una función que elimine los espacios en blanco al inicio y final de un string usando trimStart() y trimEnd().
4. Escribe un bloque try-catch sin usar el parámetro del catch.
5. Crea un símbolo con una descripción y accede a ella usando description.

¿Te animas a resolver estos retos? ¡Compártelos en la caja de comentarios y cuéntame cómo te fue! Si tienes dudas o quieres aportar algo, no dudes en comentar 🚀.

---

👨‍💻 Frontend Developer | 🌱 Personal Growth | 💙 Tech Lover | 🔥 Hacking your limits

Sigueme en mis redes sociales para más contenido

• Facebook
• Twitter
• Instagram
• LinkedIn
• GitHub

---