Usando las funciones flat() y flatmap() de Javascript

Las funciones flat y flatMap de Javascript son muy útiles cuando trabajas con arrays multidimensionales, es decir, arrays que contienen arrays, y quieres simplificarlos. Estas funciones te permiten aplanar un array que contiene otros arrays dentro.

Anteriormente han existido muchas librerías de utilidades como lodash, que añaden funciones genéricas como pueden ser flat y flatMap. Con la evolución del lenguaje Javascript, éste ha ido incorporando nueva funcionalidad muy útil que nos permite no depender de este tipo de librerías, que en mi caso intento evitarlas siempre que puedo.

Voy a enseñarte cómo usar las funciones flat y flatmap, y para qué sirven con un par de ejemplos muy simples.

Función flat

El primer ejemplo consiste en transformar un array que contiene otros arrays dentro, en un array con todos los elementos al mismo nivel:

const array = [1, 2, [3,4]];
array.flat();
// [1, 2, 3, 4]

Documentación de la función flat.

Función flatMap

El segundo ejemplo hace uso de la función flatMap. Esta te será útil cuando quieres generar un array nuevo (generalmente usando la función map), para cada iteración del bucle devuelves un array nuevo, y tu quieres como resultado un array plano.

const array = [1, 2, 3];
array.flatMap(i => [i + 'a', i + 'b']);
// ['1a', '1b', '2a', '2b', '3a', '3b']

Documentación de la función flatMap.

Compatibilidad

Las funciones anteriormente explicadas está disponible en los navegadores de forma nativa:

• Chrome: 69+
• Edge: 79+
• Firefox: 12+
• Opera: 56+
• Safari: 12+

Consulta los enlaces de documentación citados anteriormente para ver la compatibilidad con detalle.

Recuerda que la compatibilidad de las funciones es nativa, pero siempre puedes hacer uso de polyfills o transpilar con compatibilidad a versiones anteriores de javascript.