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

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:34

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

Curso de Fundamentos de JavaScript

Clase 31 de 55

Clase 31 / 55

Recursos

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.

Alejandro Guadalupe Sanchez Sanchez

Hace 2 años

Tanto **filter()** como **reduce()** son métodos poderosos en JavaScript que permiten manipular arrays de manera efectiva, pero tienen propósitos muy distintos.

### **1. filter()**

El método **filter()** se utiliza para **filtrar los elementos de un array** que cumplen con una condición específica. Devuelve un **nuevo array** con los elementos que pasen el filtro (es decir, aquellos para los que la función de filtro devuelva true).

**Ejemplo:**


let numbers = \[1, 2, 3, 4, 5, 6];



// Filtrar los números pares

let evenNumbers = numbers.filter(function(number) {

&#x20; return number % 2 === 0;

});



console.log(evenNumbers);

**Salida:**


\[2, 4, 6]

**Características de filter()**:

- Devuelve un **nuevo array** con los elementos que cumplen la condición.

- No modifica el array original.

- Si ningún elemento cumple la condición, devuelve un array vacío.

### **2. reduce()**

El método **reduce()** se utiliza para **reducir** un array a un solo valor, como la suma de sus elementos, un producto, o incluso un objeto o array. Funciona aplicando una función acumulativa a los elementos del array, lo que permite obtener un resultado único basado en todos los elementos.

**Ejemplo:**


let numbers = \[1, 2, 3, 4, 5];



// Sumar todos los números del array

let sum = numbers.reduce(function(accumulator, currentValue) {

&#x20; return accumulator + currentValue;

}, 0);



console.log(sum);

**Salida:**

**Características de reduce()**:

- Devuelve un **único valor** (puede ser un número, string, objeto, array, etc.).

- Tiene un **acumulador** que almacena el resultado de cada iteración.

- Requiere un **valor inicial** (en este caso 0), que es el valor inicial del acumulador.

- Puede ser más complejo, pero es extremadamente útil para realizar operaciones como sumar, concatenar, combinar elementos, o incluso construir objetos a partir de un array.

### **Diferencias clave entre filter() y reduce()**:

- **Propósito**:

- filter() se utiliza para **filtrar** elementos de un array y devolver un nuevo array que solo contiene los elementos que cumplen la condición.

- reduce() se utiliza para **reducir** el array a un único valor acumulado (como una suma, producto o cualquier otra operación agregada).

- **Resultado**:

- filter() devuelve un **nuevo array** con los elementos que cumplen la condición.

- reduce() devuelve **un solo valor** que es el resultado de aplicar la función de acumulación.

### Ejemplo comparativo:

**filter() para filtrar números mayores a 2:**


let numbers = \[1, 2, 3, 4, 5];



let filteredNumbers = numbers.filter(function(number) {

&#x20; return number > 2;

});



console.log(filteredNumbers);  // \[3, 4, 5]

**reduce() para sumar todos los números:**


let numbers = \[1, 2, 3, 4, 5];



let sum = numbers.reduce(function(accumulator, number) {

&#x20; return accumulator + number;

}, 0);



console.log(sum);  // 15

### **Usos típicos:**

- **filter()**:

- Para extraer elementos que cumplen ciertas condiciones.

- Ejemplo: Filtrar productos con un precio mayor a cierto valor, o filtrar estudiantes con notas superiores a un umbral.

- **reduce()**:

- Para obtener un solo valor a partir de un array.

- Ejemplo: Sumar todos los valores de un array, calcular el total de ventas, o construir un objeto a partir de un array de datos.

### Ejemplo más avanzado de reduce():

**Convertir un array de objetos en un objeto con reduce():**


let people = \[

&#x20; { name: 'Alice', age: 25 },

&#x20; { name: 'Bob', age: 30 },

&#x20; { name: 'Charlie', age: 35 }

];



// Crear un objeto donde los nombres son claves y las edades son valores

let peopleObject = people.reduce(function(acc, person) {

&#x20; acc\[person.name] = person.age;

&#x20; return acc;

}, {});



console.log(peopleObject);

**Salida:**


{ Alice: 25, Bob: 30, Charlie: 35 }

### Conclusión:

- Usa **filter()** cuando necesites **extraer** elementos específicos de un array.

- Usa **reduce()** cuando necesites **agregar o combinar** todos los elementos del array en un solo valor o resultado.

Comentarios (42)42 comentarios

Elver David Matacea Lopez

Mauricio Cervera Vázquez

Hace un año

Yeinybeth Carrasquel

Agustina Corvo

Tino Ponce

Alex Gallardo

Christopher Andrés Guano Valencia

Faryd Alejandro Peñuela Gonzàlez

Brayan Steven Rivera Páez

Hace 10 meses

Austry Castillo

Carlos Gabriel Tovar Pena

Miguel Jonathan Madrigal González

Alfonso Neil Jiménez Casallas

Andrés Soret Chacin

Pablo Garcia Mochales

Hace 9 meses

José Loaiza

INVESTMENTS AMERICA

Ivan Oliver Morales González

Nicolas Vargas Montagut

Pablo Luna Guzmán

Julio Cardenas

Pedro Quiñones Paternina

Hace 6 meses

Leonardo Buezo

Hace 7 meses

Carlos Guilermo España Diaz

Hace 8 meses

Antonio José Alvarez Delgado

Juan Miguel Jimenez

David Rangel

Julio Manuel Nieto

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

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

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

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