Método flatMap

El método flatMap devuelve un nuevo array, creado después de que a cada elemento del array original se le aplicara una función de retorno (callback), especificada en el parámetro del método. A primera vista, el método flatMap se parece al método map, pero su principal diferencia es que siempre devuelve un array unidimensional.

Sintaxis

javascriptlet newArray = array.flatMap(función);

Ejemplo

Obtengamos un nuevo array, usando el método flatMap:

javascriptlet arr = ['a', 'b', 'c'];

let res = arr.flatMap(function(elem) {
  return elem + '!';
});

console.log(res);

Resultado de la ejecución del código:

javascript['a!', 'b!', 'c!']

Ejemplo

Obtengamos un nuevo array a partir de uno original, compuesto por números:

javascriptlet arr = [1, 2, 3, 4, 5];

let res = arr.flatMap(function(elem) {
  return elem + 2;
});

console.log(res);

Resultado de la ejecución del código:

javascript[3, 4, 5, 6, 7]

Ejemplo

Intentemos aplicar el método flatMap a un array con un primer nivel de anidamiento:

javascriptlet arr = [1, 2, 3, [4, 5]];

let res = arr.flatMap(function getElem(elem){
  return elem + 2;
});

console.log(res);

Después de ejecutar el código veremos que las condiciones de la función se aplicaron al subarray, considerándolo como un solo elemento. Por lo tanto, la llamada a este método en arrays anidados no tiene sentido:

javascript[3, 4, 5, '4,52']

Ejemplo

Si no queremos complicarnos con el nivel de anidamiento, y deseamos unir todo el array, usamos el parámetro Infinity:

javascriptlet arr = ['a', 'b', ['c', 'd', ['e', 'f', ['g', 'h', ['i']]]]];

let res = arr.flatMap(Infinity);

console.log(res);

Resultado de la ejecución del código:

javascript[
  'a', 'b', 'c',
  'd', 'e', 'f',
  'g', 'h', 'i'
]

Ejemplo

Apliquemos dos métodos al array: flatMap y map, donde en el parámetro de ambos métodos se especificará una función que convierte el array en bidimensional:

javascriptlet arr = [1, 2, 3, 4, 5, 6];
let res1 = arr.map(elem => [elem * 3]);
let res2 = arr.flatMap(elem => [elem * 3]);

console.log('método map', res1);
console.log('método flatMap', res2);

Resultado de la ejecución del código:

javascript'método map' [[3], [6], [9], [12], [15], [18]]
'método flatMap' [3, 6, 9, 12, 15, 18]

Véase también