JavaScript
Compara map, filter y flatMap para transformar, seleccionar o producir varios elementos, incluyendo referencias compartidas y callbacks asíncronos.
map, filter y flatMap crean arrays nuevos a partir de una colección existente.
Cada uno responde una pregunta diferente:
map → ¿Cómo transformo cada elemento?
filter → ¿Cuáles elementos conservo?
flatMap → ¿Cómo transformo y produzco cero, uno o varios elementos?map llama un callback por cada posición existente y utiliza su retorno como elemento del nuevo array.
const prices = [10, 20, 30];
const pricesWithTax = prices.map(
(price) => price * 1.19,
);prices; // [10, 20, 30]
pricesWithTax; // [11.9, 23.8, 35.7]No modifica el array original, pero los valores retornados pueden seguir compartiendo referencias.
const result = values.map(
(value, index, array) => {
return transform(value);
},
);El callback recibe:
No necesitas declarar parámetros que no utilices.
const names = users.map((user) => user.name);const values = [1, 2, 3];
const doubled = values.map(
(value) => value * 2,
);
// [2, 4, 6]Si el callback retorna undefined, esa posición existe con valor undefined.
const result = values.map((value) => {
if (value > 1) {
return value;
}
});
// [undefined, 2, 3]Para descartar elementos utiliza filter.
Menos claro:
products.map((product) => {
console.log(product.name);
});El array retornado se ignora. Un for...of o forEach comunica mejor un efecto.
for (const product of products) {
console.log(product.name);
}["10", "10", "10"].map(parseInt);Puede producir:
[10, NaN, 2]map pasa valor e índice; parseInt interpreta el segundo argumento como radix.
parseInt("10", 0); // 10
parseInt("10", 1); // NaN
parseInt("10", 2); // 2Usa un callback que exprese el contrato.
["10", "10", "10"].map(
(value) => Number.parseInt(value, 10),
);O Number cuando quieres convertir el string completo.
["10", "20"].map(Number);const cards = products.map((product) => ({
id: product.id,
title: product.name,
priceLabel: formatCurrency(product.price),
}));Cada retorno es un objeto nuevo. Las propiedades anidadas copiadas continúan compartiendo referencias salvo que también se transformen.
const result = products.map((product) => {
product.isVisible = true;
return product;
});El array exterior es nuevo, pero los objetos originales fueron modificados.
Una transformación sin esa mutación:
const result = products.map((product) => ({
...product,
isVisible: true,
}));La copia sigue siendo superficial.
filter conserva los elementos cuyo callback retorna un valor truthy.
const activeProducts = products.filter(
(product) => product.isActive,
);El resultado puede contener desde cero hasta todos los elementos.
[1, 2, 3, 4].filter(
(number) => number % 2 === 0,
);
// [2, 4]const products = [
{ name: "Keyboard", active: true },
];
const active = products.filter(
(product) => product.active,
);
active[0] === products[0]; // truefilter selecciona; no clona elementos.
const values = [0, 1, "", "Hello", null];
const compact = values.filter(Boolean);
// [1, "Hello"]Es una forma breve de retirar valores falsy, pero también elimina valores legítimos como 0, false y "".
Cuando la regla sea específica, escríbela.
const withoutNullish = values.filter(
(value) => value != null,
);flat aplana arrays anidados hasta una profundidad.
const values = [[1, 2], [3, 4]];
values.flat(); // [1, 2, 3, 4]const values = [1, [2, [3]]];
values.flat(); // [1, 2, [3]]
values.flat(2); // [1, 2, 3]Infinity aplana todas las capas encontradas, pero puede ocultar una estructura incorrecta y tener un costo alto.
flatMap equivale conceptualmente a mapear y después aplanar una capa.
const result = values.flatMap(mapper);Puede producir un elemento:
const names = users.flatMap(
(user) => user.name,
);Puede producir varios:
const words = sentences.flatMap(
(sentence) => sentence.split(" "),
);Puede producir ninguno:
const activeIds = products.flatMap(
(product) =>
product.isActive ? [product.id] : [],
);Eso permite transformar y filtrar en un solo recorrido.
[1, 2].flatMap(
(value) => [[value]],
);
// [[1], [2]]El callback retornó dos capas y solo se retiró una.
const values = [1, 2].map(
(value) => [value, value * 10],
);
// [[1, 10], [2, 20]]Con flatMap:
const values = [1, 2].flatMap(
(value) => [value, value * 10],
);
// [1, 10, 2, 20]const visibleCards = products
.filter((product) => product.isActive)
.map((product) => ({
id: product.id,
title: product.name,
}));El orden importa.
Filtrar antes evita transformar elementos que serán descartados.
products
.map(expensiveTransformation)
.filter(isVisible);Puede hacer trabajo innecesario si la condición estaba disponible desde el inicio.
Cada map o filter crea un array. En datos normales esto suele favorecer claridad.
En colecciones enormes o rutas críticas:
Código claro con dos pasos nombrados puede ser mejor que una cadena difícil de leer.
const results = products.map(async (product) => {
return saveProduct(product);
});results es un array de promesas, no de valores resueltos.
const savedProducts = await Promise.all(results);filter no espera predicados asíncronos.
products.filter(async () => false);Cada promesa es truthy, así que probablemente conservará todos los elementos.
Para condiciones asíncronas, primero resuelve resultados y después filtra, o usa un recorrido explícito.
map, filter y flatMap omiten holes.
const sparse = new Array(3);
const mapped = sparse.map(() => 1);
Object.hasOwn(mapped, 0); // falsemap conserva la estructura dispersa; filter crea un array denso con los valores visitados.
Este comportamiento se profundiza en Arrays dispersos y casos límite.
const options = products
.filter(
(product) =>
product.isActive && product.stock > 0,
)
.map((product) => ({
value: product.id,
label: `${product.name} · ${product.stock}`,
}));La colección original no cambia y el resultado contiene únicamente la forma que necesita la interfaz.
map cuando el retorno no se utiliza.undefined desde map.filter clona objetos.filter(Boolean) cuando 0 o false son válidos.parseInt directamente a map.flatMap aplana cualquier profundidad.map produce un valor por posición visitada.filter conserva referencias cuyo predicado es truthy.flatMap transforma y aplana una sola capa.map no es la herramienta para efectos ignorando su retorno.¿Qué problema tiene este código?
const visible = products.filter(async (product) => {
return canViewProduct(product);
});filter no espera el resultado asíncrono. Cada callback retorna una promesa, que es truthy, por lo que puede conservar todos los productos. Debe resolverse la condición antes de filtrar o utilizarse un recorrido asíncrono explícito.
find, includes, some y every estudia búsqueda, pertenencia y validaciones que pueden detenerse antes de recorrer toda la colección.