Trabajar con arrays anidados es más común de lo que parece, sobre todo cuando manejas matrices o respuestas de APIs que devuelven listas dentro de listas. Aprender a usar flat y flatMap en JavaScript te ahorra líneas de código y te evita depender de un reduce complejo para aplanar datos. Esta guía es para ti si ya dominas map y filter, y quieres dar el siguiente paso con estructuras anidadas.
Qué son los arrays anidados y por qué aparecen en JavaScript
Un array anidado es aquel que dentro de sus posiciones contiene otros arrays. JavaScript no tiene una estructura nativa de matrices como otros lenguajes, así que replica ese comportamiento colocando arrays dentro de arrays.
Esto genera un problema práctico: cuando quieres iterar todos los elementos como si fueran una sola lista, la estructura te obliga a recorrer varios niveles. Podrías resolverlo con un reduce verificando en cada iteración si el elemento es un array, pero existen métodos que hacen exactamente eso en una sola línea.
¿Qué es un array anidado? Es un array que contiene otros arrays dentro de sus posiciones. Se usa en JavaScript para simular matrices y estructuras de datos jerárquicas.
Cómo funciona el método flat para aplanar arrays
El método flat toma un array con varios niveles y lo convierte en uno lineal. Recibe un parámetro que indica hasta qué profundidad quieres aplanar [02:15].
Si tu array tiene un nivel de anidación, un flat(1) es suficiente. Si tiene dos niveles, necesitas flat(2). El problema es que muchas veces no sabes cuántos niveles trae la estructura, y ahí entra el truco más útil: pasarle Infinity como argumento.
array.flat(1): aplana un nivel.array.flat(2): aplana dos niveles.array.flat(Infinity): aplana todos los niveles sin importar la profundidad.
Con Infinity no importa si el array tiene dos, cuatro o cinco niveles: siempre vas a obtener un array de un solo nivel. Esto es especialmente útil cuando trabajas con datos externos donde la estructura no es predecible.
Cuándo usar flat con un número específico o con Infinity
Usa un número específico cuando conoces la estructura exacta de tus datos y quieres controlar hasta dónde se aplana. Usa Infinity cuando la profundidad es desconocida o variable. La ventaja es que delegas el cálculo al motor de JavaScript y no arriesgas dejar niveles sin procesar.
Qué es flatMap y cómo combina map con flat
El patrón de hacer un map que devuelve arrays y luego aplanar el resultado es tan común que JavaScript creó un método específico: flatMap [08:40]. Piénsalo como un map que ejecuta un flat(1) automáticamente al final.
Imagina que tienes el array [1, 2, 3] y quieres devolver cada elemento junto con su duplicado, de modo que el resultado sea [1, 2, 2, 4, 3, 6]. Aquí map rompe una de sus reglas: normalmente devuelve el mismo número de elementos que recibe, pero tú necesitas más.
Si usas map y devuelves [num, num * 2] en cada iteración, obtienes un array de arrays: [[1,2],[2,4],[3,6]]. Aplicando flat() al final, o directamente flatMap, obtienes la lista plana que esperabas.
¿Cuál es la diferencia entre map y flatMap? map devuelve exactamente un elemento por cada entrada. flatMap permite devolver arrays que luego se aplanan un nivel, generando más o menos elementos que el original.
Ejemplo práctico: extraer tags únicos de un array de posts
Supón que tienes un array de posts, donde cada uno tiene un título y una lista de tags. Quieres obtener todos los tags únicos en un solo array plano.
Con flatMap extraes los tags de cada post y los aplanas en un solo paso: posts.flatMap(post => post.tags). El resultado es un array lineal con todos los tags, incluidos los duplicados como JavaScript o API que aparecen en varios posts [11:20].
Cómo eliminar duplicados con Set y Array.from
Para quitar los repetidos tienes dos caminos. El primero es usar filter con indexOf, comprobando si un elemento ya apareció antes. Funciona, pero requiere algo más de algoritmia.
El segundo camino, más elegante, es usar la estructura de datos Set. Un Set es un conjunto matemático: por definición no admite elementos repetidos. Si le pasas un array al constructor, automáticamente limpia los duplicados.
- Convierte el array en Set:
new Set(tags).
- El Set elimina duplicados por definición matemática.
- Vuelve a convertir a array con
Array.from(set) para poder seguir operándolo.
El detalle es que un Set no es un array, así que no puedes aplicarle métodos como map o filter directamente. Por eso el paso final con Array.from es clave: devuelves los datos limpios en la estructura que necesitas.
¿Cómo elimino duplicados de un array en JavaScript? Envuelve el array en new Set() y conviértelo de vuelta con Array.from(set). Es una línea y aprovecha la teoría de conjuntos.
Encadenar flatMap y Set para transformar datos complejos
La combinación real de poder viene cuando encadenas estos métodos. Para el caso de los tags únicos, el flujo completo es: Array.from(new Set(posts.flatMap(post => post.tags))).
En una sola expresión hiciste tres cosas: extrajiste los tags de cada post, aplanaste el resultado y eliminaste los duplicados. Este tipo de encadenamiento es lo que diferencia código verboso de código expresivo en JavaScript moderno.
Ahora te dejo el reto: tienes un array como ["Hola mundo", "JavaScript es genial", "Aprendo programación"] y necesitas devolver un array plano con cada palabra separada: ["Hola", "mundo", "JavaScript", "es", "genial", "Aprendo", "programación"]. Usa flatMap combinado con split. Deja tu solución en los comentarios y compárala con la de otros estudiantes.
