Cuando trabajas con datos reales en JavaScript, casi siempre vas a encontrar arreglos que contienen objetos. Y para manipular esa combinación de forma limpia, los métodos de orden superior como map y filter se vuelven tus mejores aliados: te permiten transformar y seleccionar información sin escribir bucles complicados.
¿Qué son los métodos de orden superior en JavaScript?
Son funciones que reciben otra función como argumento. La idea es que puedas trabajar con arreglos de forma declarativa, expresando qué quieres hacer en lugar de cómo hacerlo paso a paso.
¿Qué hace un método de orden superior? Recibe una función como parámetro y la aplica a cada elemento de un arreglo, devolviendo un resultado sin modificar el original.
Esto suena abstracto al principio, pero cuando lo ves en código todo encaja. La estructura más común que vas a manipular es un array con varios objetos dentro, donde cada objeto representa un ítem con propiedades como id, title o content.
¿Cómo usar map para transformar un arreglo?
El método map recorre cada elemento del arreglo, aplica la transformación que tú definas y te entrega un arreglo nuevo. Nunca toca el original.
Imagina que tienes un arreglo notas con varios objetos y solo quieres extraer los títulos:
javascript
const titulos = notas.map((nota) => nota.title);
console.log(titulos);
Aquí le pasas a map una arrow function que recibe cada nota y devuelve únicamente su propiedad title. El resultado es un arreglo limpio con nota uno, nota dos, nota tres.
¿Cómo agregar una nueva propiedad con map?
Si además quieres añadir información a cada objeto, puedes combinar map con el spread operator y devolver un objeto nuevo:
javascript
const notasConFecha = notas.map((nota) => ({
...nota,
fechaCreacion: Date.now()
}));
console.log(notasConFecha);
El ...nota copia todas las propiedades originales y luego sumas fechaCreacion con el timestamp generado por Date.now(). Obtienes un arreglo nuevo, enriquecido, sin alterar notas.
¿Cómo usar filter para seleccionar elementos por condición?
Mientras map transforma, filter selecciona. Te devuelve un arreglo nuevo solo con los elementos que cumplan la condición que definas dentro de la función.
Si a tus objetos les agregas la propiedad esFavorita con valores true o false, puedes extraer solo las favoritas así:
javascript
const favoritas = notas2.filter((nota) => nota.esFavorita);
console.log(favoritas);
La función dentro de filter debe retornar un valor booleano. Si es true, ese elemento entra al nuevo arreglo. Si es false, se descarta.
¿Cuál es la diferencia entre map y filter? map transforma cada elemento y devuelve un arreglo del mismo tamaño. filter evalúa una condición y devuelve solo los elementos que la cumplen.
¿Cómo combinar filter con métodos de strings?
Aquí es donde se conecta todo lo que ya sabes: variables, funciones, manipulación de strings. Supón que quieres buscar una nota por su título sin que las mayúsculas o minúsculas afecten el resultado:
javascript
const titulo = notas2.filter((nota) =>
nota.title.toLowerCase().includes("nota uno")
);
console.log(titulo);
Lo que sucede paso a paso:
- Accedes a
nota.title dentro de cada objeto.
- Aplicas
toLowerCase() para normalizar el texto a minúsculas.
- Usas
includes("nota uno") para verificar si el título contiene esa cadena.
filter devuelve solo los elementos que cumplen esa condición.
Esta es una buena práctica al construir buscadores: normalizar el texto antes de comparar evita resultados inconsistentes por capitalización.
¿Por qué nombrar bien el parámetro de la función importa?
Dentro de map o filter puedes nombrar al parámetro como quieras: n, item, elemento. Pero si tu arreglo se llama notas, llamar nota a cada elemento hace tu código autoexplicativo.
¿Qué nombre debo darle al parámetro en map o filter? Usa el singular del arreglo que estás recorriendo. Si tienes productos, usa producto. Esto facilita la lectura y el mantenimiento del código.
La lógica se vuelve clara: "por cada nota dentro de notas, haz esto". El código se lee casi como una frase.
¿Qué ganas al pensar de forma declarativa?
Cuando dominas map y filter, dejas de escribir bucles for con variables auxiliares y empiezas a expresar intenciones. En lugar de explicar cómo recorrer el arreglo, declaras qué resultado quieres.
Esto te da tres ventajas concretas:
- Código más corto y legible.
- Menos errores por mutación accidental, porque ambos métodos devuelven arreglos nuevos.
- Composición fácil: puedes encadenar
filter().map() para filtrar y luego transformar en una sola línea.
Ahora te toca a ti. Practica creando tus propios arreglos de objetos, aplica map para transformar propiedades y filter para seleccionar por condiciones. Comparte tus soluciones en los comentarios y muestra cómo resolviste los retos.
