Dominar los métodos filter y reduce es fundamental para trabajar con arrays en JavaScript de forma limpia y funcional. Ambos comparten una característica esencial: no modifican el array original, sino que generan un nuevo valor a partir de él. Entender cómo funcionan abre la puerta a manipulaciones de datos elegantes y eficientes.
¿Cómo funciona filter para obtener solo los elementos que necesitas?
El método filter recorre cada elemento de un array y evalúa una condición. Solo los elementos que cumplan esa condición formarán parte de un nuevo array [0:10]. Es como un filtro real: lo que pasa la prueba se queda, lo que no, se descarta.
Por ejemplo, dado un array de números del uno al diez, se puede obtener únicamente los números pares con esta estructura:
javascript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]
¿Qué es el operador módulo y por qué se usa aquí?
El operador módulo (%) devuelve el residuo de una división [1:32]. Cuando divides un número entre dos y el residuo es cero, ese número es par. Por eso number % 2 === 0 es la condición perfecta para filtrar pares.
4 % 2 devuelve 0, entonces cuatro es par.5 % 2 devuelve 1, entonces cinco no es par.
La función dentro de filter recibe cada elemento como parámetro (en singular, por convención) y utiliza un arrow function para definir la condición de retorno [1:10].
¿Qué hace reduce y cómo transforma un array en un solo valor?
Mientras filter devuelve un array, reduce hace algo distinto: comprime todo el array en un único valor [2:22]. Su caso más clásico es sumar todos los elementos.
javascript
const numbersReduce = [1, 2, 3, 4, 5];
const suma = numbersReduce.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(suma); // 15
La función que recibe reduce trabaja con dos parámetros principales:
- accumulator: actúa como una variable que va almacenando el resultado parcial en cada iteración [3:08].
- currentValue: representa el elemento actual del array que se está procesando.
Además, reduce acepta un segundo argumento después de la función: el initialValue. En el ejemplo anterior es 0, lo que significa que el acumulador comienza desde cero [3:42].
¿Cómo usar reduce para contar la frecuencia de palabras?
Reduce no se limita a sumar números. Un uso poderoso es contar cuántas veces se repite cada palabra en un array [4:30]. En este caso, el valor inicial no es un número, sino un objeto vacío {}.
javascript
const words = ['apple', 'banana', 'hello', 'bye', 'banana', 'bye', 'bye'];
const wordFrequency = words.reduce((accumulator, currentValue) => {
if (accumulator[currentValue]) {
accumulator[currentValue] += 1;
} else {
accumulator[currentValue] = 1;
}
return accumulator;
}, {});
console.log(wordFrequency);
// { apple: 1, banana: 2, hello: 1, bye: 3 }
El flujo funciona así:
- La primera vez que aparece una palabra, no existe en el acumulador, por lo que se le asigna el valor
1 [5:40].
- Cuando la misma palabra aparece de nuevo, el condicional detecta que ya existe y le suma uno al conteo [6:18].
- Al finalizar, el acumulador contiene un objeto con cada palabra como clave y su frecuencia como valor.
Este patrón es especialmente útil para análisis de datos, conteo de ocurrencias y agrupaciones sin necesidad de bucles explícitos.
¿Cuándo elegir filter y cuándo reduce?
La diferencia clave está en lo que necesitas obtener. Usa filter cuando quieras un subconjunto del array original que cumpla cierta condición. Usa reduce cuando necesites transformar todo el array en un resultado único, ya sea un número, un string o incluso un objeto complejo.
- filter siempre devuelve un array.
- reduce devuelve cualquier tipo de dato según el initialValue y la lógica definida.
Ambos métodos respetan la inmutabilidad del array original, lo que los convierte en herramientas esenciales dentro del paradigma de programación funcional en JavaScript. Practica combinándolos y comparte qué otros usos creativos les encuentras.
