En este post verás 7 mejoras concretas de ES10 (también conocido como ECMAScript 2019), que hacen nuestro código más limpio, eficiente y fácil de entender.
Si estás comenzando con las versiones modernas de JavaScript o quieres entender cómo llegó hasta ES10, te recomiendo leer primero mi guía sobre ES9 (ECMAScript 2018) para tener el contexto completo de estas mejoras.
- 1. Aplana Arrays Anidados en Segundos con flat() y flatMap()
- 2. Convierte Arrays en Objetos al Instante: Object.fromEntries()
- 3. Limpia Strings sin Complicaciones: trimStart() y trimEnd()
- 4. Manejo de Errores Más Limpio con Optional Catch Binding
- 5. Identifica propiedades de objetos con Symbol()
- 6. Nuevas mejoras en JSON.stringify()
- 7. Mejoras en .toString()
- Conclusión
- 5 Retos para Practicar
1. Aplana Arrays Anidados en Segundos con flat() y 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 Si quieres aplanarlo completamente, puedes usar flat() y pasarle el número de niveles que deseas aplanar. En este caso, 2
const arrayAnidado = [1, 2, [3, 4, [5, 6]]];
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.
Los métodos de arrays como flat() y flatMap() son parte de varios métodos para manipular arrays en JavaScript. Si quieres dominar otros métodos como map(), filter(), reduce() y entender cuándo usar cada uno, te recomiendo mi guía completa de métodos de Arrays en Javascript donde explico estos conceptos con ejemplos prácticos.
2. Convierte Arrays en Objetos al Instante: 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. Con Object.fromEntries(), puedes convertirlo fácilmente en un objeto.
const entries = [['nombre', 'Carlos'], ['edad', 25]];
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.
Si trabajas con estructuras de datos complejas y quieres entender mejor cómo organizarlas y acceder a ellas eficientemente, mi post sobre estructuras de datos en programación te dará una base sólida para aplicar estos métodos en proyectos reales.
3. Limpia Strings sin Complicaciones: trimStart() y 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. Si solo quieres eliminar los espacios al inicio, usa trimStart(). Y si solo quieres eliminar los espacios al final, usa trimEnd().
const texto = " Hola Mundo! ";
console.log(texto.trimStart()); // "Hola Mundo! "
console.log(texto.trimEnd()); // "Hola Mundo!"Estos métodos son ideales para limpiar datos de entrada, como formularios o archivos de texto.
4. Manejo de Errores Más Limpio con 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. Identifica propiedades de objetos con Symbol()
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.
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. Nuevas 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. Mejoras en .toString()
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.
Si quieres ver cómo continúa esta evolución, no te pierdas ES11 en JavaScript, donde donde exploramos Optional Chaining y Nullish Coalescing, que complementan perfectamente lo que aprendiste aquí.
5 Retos para Practicar
Para completar con este post, te invito a que realices estos retos para practicar lo aprendido:
- Aplana un array anidado de 3 niveles usando
flat()y luego duplica cada elemento conflatMap(). - Convierte un array de pares clave-valor en un objeto usando
Object.fromEntries(). - Crea una función que elimine los espacios en blanco al inicio y final de un string usando
trimStart()ytrimEnd(). - Escribe un bloque
try-catchsin usar el parámetro delcatch. - Crea un símbolo con una descripción y accede a ella usando
description.
💬 Cuéntame: ¿Cuál de estas funciones de ES10 usarás primero? ¿Te animas a resolver estos retos? Déjame un comentario y comparte tu experiencia.
👉 Únete a mi Canal de WhatsApp para más recursos
👉 Sigueme en mis redes sociales para más contenido de programación y productividad