El método flatMap() de JavaScript

3 minuto(s)

En esta página:

Cuando trabajas con JavaScript, necesitamos métodos, utilidades o herramientas que nos ayuden a realizar una tarea determinada, a veces desconocemos que existen métodos en JavaScript que nos pueden simplificar las cosas, uno de estos métodos es el método flatMap y en este Post veremos como funciona, vamos con ello.

Antes de continuar con este Post, te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”:

Spotify:

Sound Cloud:

Bien ahora continuemos con el Post: El método flatMap() de JavaScript.

Como funciona el método flatMap()

Supongamos que tenemos el siguiente array y lo mapeo con el método map():


const postres = ['Gelatina de Fresa', 'Torta de Chocolate' ];

const arrayAnidado = postres.map((nombre, index) => [nombre, index]);

// Obtengo
[['Gelatina de Fresa', 1], ['Torta de Chocolate', 2]]

const postres = ['Gelatina de Fresa', 'Torta de Chocolate' ];

const arrayAnidado = postres.map((nombre, index) => [nombre, index]);

// Obtengo

[['Gelatina de Fresa', 1], ['Torta de Chocolate', 2]]

Bien con el código anterior obtengo un array anidado y ahora le puedo pasar el método flat() para aplanarlo o limpiarlo:


const arrayAnidado =  [ ['Gelatina de Fresa', 1], ['Torta de Chocolate', 2 ] ]

arrayAnidado.flat();

// Obtengo
['Gelatina de Fresa', 1, 'Torta de Chocolate', 2]

const arrayAnidado = [ ['Gelatina de Fresa', 1], ['Torta de Chocolate', 2 ] ]

arrayAnidado.flat();

// Obtengo

['Gelatina de Fresa', 1, 'Torta de Chocolate', 2]

Pero para evitar este excesivo trabajo podemos simplificarlo haciendo uso del método flatMap():


const postres = ['Gelatina de Fresa', 'Torta de Chocolate']; 

const resultado = postres.flatMap((nombre, index) => [nombre, index]);

// Obtengo 
['Gelatina de Fresa', 1, 'Torta de Chocolate', 2]

const postres = ['Gelatina de Fresa', 'Torta de Chocolate'];

const resultado = postres.flatMap((nombre, index) => [nombre, index]);

// Obtengo

['Gelatina de Fresa', 1, 'Torta de Chocolate', 2]

Y obtengo el mismo resultado, pero esta vez utilizando un solo método, el método flatMap(). Con esto puedes darte cuenta como funciona este método en JavaScript.

Nivel de profundidad de flatMap()

El método flat() acepta un parámetro donde se especifica que tan profundo se debe de aplanar un array anidado.


const niveldeprofundidad1 = [ [1], [2] ];
niveldeprofundidad1.flat(); // Es igual que hacer niveldeprofundidad1.flat(1) 
// Obtengo 
[1, 2]


const niveldeprofundidad2 = [ [[1, 2]] ];
niveldeprofundidad2.flat(2);
// Obtengo  
[1, 2]

const niveldeprofundidad1 = [ [1], [2] ];

niveldeprofundidad1.flat(); // Es igual que hacer niveldeprofundidad1.flat(1)

// Obtengo

[1, 2]

const niveldeprofundidad2 = [ [[1, 2]] ];

niveldeprofundidad2.flat(2);

// Obtengo

[1, 2]

Ahora el método flatMap() solo puede ir al nivel 1 de profundidad.


const postres = ['Gelatina de Fresa'];
postres.flatMap((nombre, index) => [ [nombre, index] ]);

// Obtengo 
[['Gelatina de Fresa', 1]]

const postres = ['Gelatina de Fresa'];

postres.flatMap((nombre, index) => [ [nombre, index] ]);

// Obtengo

[['Gelatina de Fresa', 1]]

Voy a dividir el código anterior en 2 pasos para que puedas ver que es lo que paso:


const postres = ['Gelatina de Fresa'];
// Paso 1: Creo un array con profundidad de 2 niveles 
const niveldeprofundidad2 = postres.map((name, index) => [ [postres, index] ]);
// Obtengo 
[[['Gelatina de Fresa', 1]]] 

// Paso 2: Aplano el array usando profundidad de 1 nivel con el método flat() 
niveldeprofundidad2.flat();
//Obtengo   
[['Gelatina de Fresa', 1]]

const postres = ['Gelatina de Fresa'];

// Paso 1: Creo un array con profundidad de 2 niveles

const niveldeprofundidad2 = postres.map((name, index) => [ [postres, index] ]);

// Obtengo

[[['Gelatina de Fresa', 1]]]

// Paso 2: Aplano el array usando profundidad de 1 nivel con el método flat()

niveldeprofundidad2.flat();

//Obtengo

[['Gelatina de Fresa', 1]]

Pero si lo hago por separado puedo pasarle un parámetro de profundidad y aplanar el array por completo:


niveldeprofundidad2.flat(2);
// ['Gelatina de Fresa', 0, 'Torta de Chocolate', 1]

niveldeprofundidad2.flat(2);

// ['Gelatina de Fresa', 0, 'Torta de Chocolate', 1]

Entonces, si deseas aplanar un array más allá del nivel 1 de profundidad, es mejor no usar el método flatMap() y simplemente llamar a los métodos flat() y map() por separado.

Eliminar elementos con flatMap()

El método flatMap(), nos permite eliminar de un array, por ejemplo en el siguiente código elimino todos los número negativos:


const numeros = [3, 4, -5, -6, 7];

numeros.flatMap(numero => {
  return numero < 0 ? [] : [numero]
})

// Obtengo 
[ 3, 4, 7]

const numeros = [3, 4, -5, -6, 7];

numeros.flatMap(numero => {

return numero < 0 ? [] : [numero]

})

// Obtengo

[ 3, 4, 7]

Esto es genial, es como usar el método filter(), pero como funciona esto realmente ?, el secreto es el array vacío. Veamos a que me refiero en el siguiente código:


const arrayVacioAnidado = [[], 3];
arrayVacioAnidado.flat();

// Obtengo 
[3]

const arrayVacioAnidado = [[], 3];

arrayVacioAnidado.flat();

// Obtengo

[3]

Cuando intento aplanar un elemento que es un array vacío, simplemente elimina ese elemento, por ende el método flatMap() considera los valores menor a 0 como array vacíos y los elimina.

Conclusión

El método flatMap() puede servirnos para realizar determinadas tareas, como las que menciono en este Post, en ciertas ocasiones requeriremos de el, así que ya sabemos como funciona y en el momento adecuado lo sabremos usar.