Aprende a dominar métodos de orden superior en JavaScript para trabajar con arreglos de objetos de forma clara, declarativa y sin mutar datos. Con ejemplos prácticos de map y filter, verás cómo extraer, transformar y buscar información con arrow functions, includes y toLowerCase.
¿Qué son los métodos de orden superior en JavaScript?
Los métodos de orden superior son funciones que reciben otra función como argumento. Permiten expresar qué quieres hacer con un array en lugar de cómo hacerlo paso a paso. Así, el código es más legible y enfocado al resultado.
¿Por qué trabajar de forma declarativa con arrays?
- Porque no mutan el original cuando usas métodos como map y filter.
- Porque retornan un nuevo array con la transformación o el filtrado aplicado.
- Porque concentras la lógica en una función callback clara y reutilizable.
¿Cómo usar map para transformar arreglos de objetos?
Cuando tienes un array de objetos, map recorre cada elemento y devuelve un nuevo array con lo que definas en su callback. Ideal para extraer campos o crear estructuras derivadas.
// Estructura común: arreglo de objetos
const notas = [
{ id: 1, title: 'Nota uno', content: 'Contenido 1' },
{ id: 2, title: 'Nota dos', content: 'Contenido 2' },
{ id: 3, title: 'Nota tres', content: 'Contenido 3' }
];
// Extraer solo los títulos con map (no muta notas)
const titulos = notas.map(nota => nota.title);
console.log(titulos); // ['Nota uno', 'Nota dos', 'Nota tres']
- Usa una arrow function para expresar el qué:
nota => nota.title.
- Obtienes un nuevo array. notas se mantiene igual.
¿Cómo agregar propiedades con map sin mutar el original?
Puedes crear nuevos objetos basados en los existentes con spread operator y añadir campos como una fecha de creación con Date.now.
const notasConFecha = notas.map(nota => ({
...nota, // spread operator: copia propiedades existentes
fechaCreacion: Date.now() // nueva propiedad
}));
console.log(notasConFecha);
// Cada objeto mantiene sus campos y agrega fechaCreacion.
- ...nota usa spread operator para clonar propiedades.
- Date.now() agrega una marca de tiempo numérica.
¿Cómo filtrar elementos con filter de forma efectiva?
El método filter devuelve un nuevo array con los elementos que cumplan una condición booleana. Perfecto para seleccionar favoritos o realizar búsquedas.
const notas2 = [
{ id: 1, title: 'Nota uno', esFavorita: true },
{ id: 2, title: 'Nota dos', esFavorita: false },
{ id: 3, title: 'Nota tres', esFavorita: true }
];
// Filtrar solo las favoritas
const favoritas = notas2.filter(nota => nota.esFavorita);
console.log(favoritas); // elementos con esFavorita === true
- La condición en el callback define el criterio de filtrado.
- El resultado es un nuevo array con los elementos que cumplen la condición.
¿Cómo hacer búsquedas insensibles a mayúsculas con includes?
Para buscar por texto sin importar mayúsculas o minúsculas, combina toLowerCase con includes en la propiedad deseada.
// Buscar la nota cuyo título contenga 'nota uno' sin importar el caso
const buscadas = notas2.filter(nota =>
nota.title.toLowerCase().includes('nota uno')
);
console.log(buscadas); // retorna la coincidencia exacta por contenido
- Usa toLowerCase() en el texto fuente para normalizar.
- Usa includes para saber si el patrón está contenido en el string.
- Nombra el parámetro del callback con intención:
nota comunica mejor que n.
¿Te quedó alguna duda o tienes un reto propio con map y filter? Comparte tu caso en los comentarios y construyamos soluciones juntos.
