Filtrado y reducción con filter() y reduce()

Clase 55 de 80Curso de JavaScript Desde Cero

Contenido del curso

Primeros Pasos

Funciones y This

Resumen

¿Qué son los métodos filter y reduce en JavaScript?

En programación, es esencial manipular y operar con Arrays de manera eficiente. JavaScript ofrece métodos poderosos como filter y reduce que no modifican el Array original, sino que crean un nuevo resultado basado en ciertas condiciones o cálculos. En esta guía, exploraremos cómo utilizar estos métodos para optimizar tu código y procesar datos de manera efectiva.

¿Cómo funciona el método filter?

filter es un método que recorre cada elemento de un Array y selecciona aquellos que cumplen con una condición específica. De este modo, se genera un nuevo Array con los elementos que pasaron el filtro.

Ejemplo práctico con números:

Imaginemos que tenemos un Array de números, y queremos extraer solo los números pares. Aquí te mostramos cómo hacerlo:

// Comentario: Inicializar el Array original const numbers = [2, 3, 4, 5, 6, 7, 8, 9, 10]; // Crear un nuevo array con solo números pares const evenNumbers = numbers.filter(number => number % 2 === 0); // Mostrar resultados console.log(numbers); // Array original: [2, 3, 4, 5, 6, 7, 8, 9, 10] console.log(evenNumbers); // Números pares: [2, 4, 6, 8, 10]

Con este código, filter verifica cada número del Array original para ver si es divisible por 2 sin un residuo, lo que identifica a los números pares.

¿Qué hace el método reduce?

El método reduce toma un Array y lo reduce a un solo valor usando una función acumulativa. Esta función recibe dos parámetros principales: un acumulador y el valor actual del Array.

Ejemplo de suma de números:

Para sumar todos los elementos de un Array, podemos utilizar el siguiente ejemplo:

// Inicializar un array de números const numbersReduce = [1, 2, 3, 4, 5]; // Reducir el array a un solo valor que es la suma de sus elementos const suma = numbersReduce.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // Mostrar resultados console.log(numbersReduce); // Array original: [1, 2, 3, 4, 5] console.log(suma); // Suma de elementos: 15

En este código, la función de reduce itera sobre cada valor del Array, sumándolo al acumulador. El initialValue es 0, que representa el punto de partida de la suma.

Aplicación de reduce para contar palabras:

Otra aplicación práctica de reduce es encontrar la frecuencia de palabras en un Array de strings.

// Inicializar un array de palabras const words = ['apple', 'banana', 'hello', 'bye', 'banana', 'bye', 'bye']; // Reducir para contar la frecuencia de cada palabra const wordFrequency = words.reduce((accumulator, currentValue) => { if (accumulator[currentValue]) { accumulator[currentValue] += 1; } else { accumulator[currentValue] = 1; } return accumulator; }, {}); // Mostrar resultados console.log(wordFrequency); // Frecuencia: { apple: 1, banana: 2, hello: 1, bye: 3 }

En este ejemplo, reduce crea un objeto que cuenta cuántas veces aparece cada palabra en el Array, proporcionando una manera eficaz de medir la frecuencia de cada término.

Estos métodos no solo facilitan una programación más limpia y eficiente, sino que también son fundamentales al trabajar con grandes conjuntos de datos. Continúa practicando y explorando distintos usos para estos métodos en tus propios proyectos. ¡El aprendizaje no se detiene aquí!