0Pricing
Frontend Academy · Lección

Métodos de arrays: map filter reduce find

Transforme, filtre y agregue arrays con métodos de orden superior en lugar de bucles manuales. Encadénelos para crear canalizaciones de datos expresivas.

Métodos de arrays: map filter reduce find es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Por qué usar métodos de array?

Los bucles for imperativos funcionan, pero ocultan la intención. Los métodos de orden superior de los arrays declaran qué desea hacer en lugar de cómo iterar. Producen código más limpio, comprobable y componible, que se lee como un texto.

Array.map() — Transformar cada elemento

map() devuelve un nuevo array en el que cada elemento se ha transformado mediante el callback. El array original no se modifica. Úselo siempre que necesite convertir un array en otro.

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — Seleccionar elementos coincidentes

filter() devuelve un nuevo array que contiene únicamente los elementos para los que el callback devuelve un valor truthy. El callback es una función predicado.

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — Acumular un valor

reduce(callback, initialValue) acumula todos los elementos en un único valor. El callback recibe el acumulador y el elemento actual. El valor inicial es el valor con el que comienza el acumulador.

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — Primera coincidencia

find() devuelve el primer elemento que coincide con el predicado, o undefined si no encuentra ninguno. Úselo para buscar un elemento por su ID o por el valor de una propiedad.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex() funciona como find(), pero devuelve el índice del elemento coincidente, o -1 si no lo encuentra. Resulta útil para localizar dónde actualizar un elemento de un array.

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() y Array.every()

some() devuelve true si al menos un elemento supera la prueba. every() devuelve true únicamente si todos los elementos la superan. Ambos métodos detienen la búsqueda en cuanto obtienen un resultado concluyente.

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — Mapear y aplanar

flatMap() mapea cada elemento y después aplana el resultado un nivel. Equivale a .map(...).flat(), pero es más eficiente.

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

Encadenar métodos de array

Los métodos devuelven nuevos arrays, por lo que puede encadenarlos. Lea las cadenas de izquierda a derecha: primero filtrar, después transformar y, por último, agregar.

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() y Array.includes()

at(-1) obtiene el último elemento. includes(value) comprueba si existe un valor. Es mucho más claro que arr[arr.length - 1] y arr.indexOf(v) !== -1.

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

Inmutabilidad: no modifique el array

map, filter y reduce devuelven nuevos arrays. push, pop y splice modifican el original. En el estado de React, cree siempre nuevos arrays (con spread o map) en lugar de modificar el estado directamente.

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

Comprobación rápida

¿Qué método de array devuelve un nuevo array con los elementos para los que el callback devuelve true?

Resumen: métodos de array

map() transforma cada elemento. filter() selecciona los elementos coincidentes. reduce() acumula los elementos en un único valor. find() devuelve la primera coincidencia. some()/every() comprueban la pertenencia. Las cadenas de estos métodos sustituyen los bucles anidados por canalizaciones de datos legibles y declarativas.

Preguntas frecuentes

¿La lección «Métodos de arrays: map filter reduce find» es gratis?

Sí — el texto completo de «Métodos de arrays: map filter reduce find» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Métodos de arrays: map filter reduce find»?

Transforme, filtre y agregue arrays con métodos de orden superior en lugar de bucles manuales. Encadénelos para crear canalizaciones de datos expresivas. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Métodos de arrays: map filter reduce find»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Métodos de arrays: map filter reduce find
  2. Desestructuración y spread de objetos
  3. Template literals y encadenamiento opcional
  4. Módulos: import y export
← Volver a Frontend Academy