flat y flatMap para arrays anidados en JS

Curso de Manipulación Avanzada de Datos con JavaScript

Contenido del curso

No sé dónde empezar

Grabacion

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0014:41

flat y flatMap para arrays anidados en JS

Curso de Manipulación Avanzada de Datos con JavaScript

Clase 15 de 24

Clase 15 / 24

Recursos

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.

Resumen

Qué son los arrays anidados y por qué aparecen en JavaScript

¿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].

array.flat(1): aplana un nivel.
array.flat(2): aplana dos niveles.
array.flat(Infinity): aplana todos los niveles sin importar la profundidad.

Cuándo usar flat con un número específico o con Infinity

Qué es flatMap y cómo combina map con flat

¿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.

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.

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.

¿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))).

Grabacion

Transformar, filtrar y agrupar arrays en JavaScript

Clona y ejecuta FreeHabits localmente

Map avanzado: item, index y array completo

Exportar CSV desde el navegador con map

Mutabilidad vs inmutabilidad en arrays de JavaScript

Cómo filter elimina elementos sin mutar arrays

Filtros dinámicos con FormData en JavaScript

Observer Pattern para filtros reactivos en JS

Filtros reactivos con Observer Pattern en JS

Persistencia con local storage y repository pattern

Cómo calcular promedios con reduce en JavaScript

Cómo crear un histograma con reduce

Object.groupBy vs reduce en JavaScript

Cómo crear un mini dashboard con reduce en JavaScript

flat y flatMap para arrays anidados en JS

flatMap y reduce para agrupar hábitos por día

Gráfica de barras con Chart.js en Vanilla JS

some, every e includes para validar arrays

Cómo convertir arrays y strings con join y split

Fusionar arrays sin mutar datos con spread

Inmutabilidad en arrays con spread y slice

Map vs Array: cuándo usar cada uno

Map + array de IDs para acelerar búsquedas

Cierre del curso de arrays avanzados en JS

flat y flatMap para arrays anidados en JS

Progreso del curso

Grabacion

Recursos

Recursos