Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Clase 31 de 55Curso de Fundamentos de JavaScript

Resumen

¿Cuáles son los métodos Filter y Reduce y cómo funcionan?

¡Bienvenidos apasionados de la programación! Hoy exploraremos dos métodos fundamentales de los arrays en JavaScript: Filter y Reduce. Ambos son herramientas poderosas que no alteran el array original, permitiendo filtrar y reducir datos de manera eficiente. Él enriquece el manejo de listas al proporcionar flexibilidad para tratar con datos complejos, haciéndolos indispensables en el arsenal de cualquier desarrollador.

¿Cómo utilizar el método Filter?

El método Filter crea un nuevo array con todos los elementos que pasan la condición implementada en la función de prueba proporcionada. Imagínate tener un array de números y desear únicamente aquellos que cumplan una cierta condición, como ser mayores a un número específico.

Ejemplo básico de Filter

Veamos un ejemplo práctico y sencillo:

let numbers = [2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4, 6, 8, 10]

En este bloque de código, filter recibe una función flecha que evalúa si cada número del array es par (i.e., el módulo de 2 es cero), retornando un nuevo array con estos números pares.

¿En qué consiste el método Reduce?

A diferencia de Filter, el método Reduce toma una array y lo reduce a un único valor aplicando una función que se ejecuta en cada valor del array, de izquierda a derecha. Un uso clásico de reduce es la suma de todos los elementos de un array.

Ejemplo básico de Reduce

Observemos cómo funciona reduce al sumar números:

const numbersReduce = [1, 2, 3, 4, 5];
const sum = numbersReduce.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 15

Aquí, reduce acumula cada valor del array en el accumulator comenzando desde cero (initialValue) hasta que se logra la suma total del array.

¿Qué otras aplicaciones tiene Reduce?

Reduce es versátil y puede utilizarse para casos más complejos, como contar la frecuencia de apariciones de palabras en un array. Esto transforma un problema potencialmente complejo en una solución elegante y concisa.

Contando elementos con Reduce

Veamos cómo contar cuántas veces se repite cada palabra en un array:

const words = ['apple', 'banana', 'hello', 'bye', 'banana', 'bye', 'bye'];
const wordFrequency = words.reduce((accumulator, currentValue) => {
    accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
    return accumulator;
}, {});

console.log(wordFrequency); // Output: { apple: 1, banana: 2, hello: 1, bye: 3 }

En este ejemplo, usamos un objeto como acumulador donde cada vez que encontramos una palabra, incrementamos su conteo en el objeto, obteniendo así la frecuencia de cada palabra.

Adentrarse en el mundo de Filter y Reduce te dará habilidades valiosas para manipular arrays eficientemente, haciendo de tus líneas de código procesos más estilizados y poderosos. ¡Anímate a seguir explorando y experimentando con estos métodos!