Transformar y aplanar de una vez con flatMap()

En esta lección usarás el método .flatMap() de los arrays para aprender a combinar la transformación y el aplanado en un solo paso. Está dirigida a quien busca «uso de flatMap en JavaScript».

.flatMap() es un método que combina en un único paso el proceso de «transforma con .map() y aplana un nivel con .flat()». Resulta cómodo cuando «quieres convertir un elemento en varios». Es más corto que escribir .map().flat() y además comunica mejor la intención.

El código de ejemplo convierte un array con varias frases en una única lista de palabras con .flatMap((s) => s.split(" ")), y convierte un array numérico en uno nuevo que contiene «el valor original y su doble» con .flatMap((n) => [n, n * 2]). La idea de producir varios elementos a partir de uno es lo que lo distingue de un map normal.

Un tropiezo habitual al empezar es elegir entre .flatMap() y .map(). Si solo conviertes un elemento en un valor, con map basta; pero si quieres producir varios elementos (un array) a partir de un solo elemento, necesitas flatMap. Mira bien qué intentas hacer y elige el método correcto.

Puede limpiar mucho el código en situaciones en las que quieres transformar y expandir a la vez, como trocear frases en palabras y reunirlas en una sola lista. Es uno de los métodos que permiten acortar cada vez más el código de manejo de arrays: realmente útil en proyectos reales.