Métodos avanzados de arrays (filter y reduce)

En esta lección dominarás .filter() y .reduce() de los arrays para extraer los datos que cumplen una condición y agregarlos con un código breve y legible. Está dirigida a quien busca «uso de filter y reduce en JavaScript» o «agregación de arrays en JavaScript».

.filter(condición) construye un array nuevo solo con los elementos que cumplen la condición. .reduce((acumulador, elemento) => { ... }, valorInicial) es un método algo más avanzado pero utilísimo para condensar todo un array en un único valor (como una suma). Comparado con escribir el proceso elemento a elemento en un for, estos métodos hacen que «lo que intentas conseguir» aparezca directamente en el código, manteniéndolo legible.

El código de ejemplo extrae solo las notas de 70 o más de un array de notas con .filter((s) => s >= 70), y calcula el total de todas con .reduce((sum, s) => sum + s, 0). El segundo argumento de reduce (aquí, 0) es el valor de partida de la acumulación: usarías 0 para una suma, 1 para un producto, según lo que estés calculando.

Un tropiezo habitual al empezar es el orden y el papel de los argumentos de la función de .reduce(). Es fácil mezclar «el valor acumulado hasta ahora» (primer argumento) con «el elemento que se procesa» (segundo); al principio conviene ir mostrando cada paso por consola para ver cómo se comporta. Recuerda también: si olvidas el valor inicial, el primer elemento del array pasa a hacer de valor inicial.

En el desarrollo real, combinar filter y reduce es un patrón clásico de agregación de datos: extraer del historial solo los pedidos que cumplen ciertos criterios, o calcular el precio total del carrito. Es una combinación que merece la pena recordar, porque aparece constantemente en lógica real de análisis de datos y cierres de ventas.

.filter() y .reduce() también se pueden encadenar, así que puedes escribir el filtrado y la agregación en una sola línea, como scores.filter((s) => s >= 70).reduce((sum, s) => sum + s, 0).

Este tipo de agregación se combina a menudo con .map(), y en el trabajo real es muy común escribir toda una tubería de procesamiento como un único flujo: «extrae los datos que cumplen la condición, transfórmalos en justo la información que necesitas y al final súmalo todo».