Cómo usar el método .reduce() en JavaScript

Actualizado : 2023-10-31

¿Sabes qué es el método .reduce() y para qué sirve? En este artículo te voy a explicar cómo puedes usar este método en JavaScript para realizar operaciones sobre los elementos de un array y obtener un único valor como resultado.

Además, te mostraré 6 ejemplos prácticos y reales de cómo puedes aplicar el método .reduce() en diferentes situaciones.

¿Qué es el método .reduce() y cómo funciona?

El método .reduce() es una función que pertenece al prototipo de los arrays en JavaScript. Esto significa que podemos invocarla sobre cualquier array, pasándole como argumento una función reductora que se ejecutará sobre cada elemento del array.

La función reductora recibe cuatro parámetros:

Acumulador: Es el valor que se va acumulando en cada iteración de la función reductora. Al final, este será el valor que devolverá el método .reduce().
Elemento actual: Es el elemento del array que se está procesando en cada iteración.
Índice actual: Es el índice del elemento actual en el array.
Array original: Es el array sobre el que se invoca el método .reduce().

La función reductora debe devolver un valor que se asignará al acumulador en la siguiente iteración. El valor inicial del acumulador puede ser especificado como segundo argumento del método .reduce().

Si no se especifica, el valor inicial será el primer elemento del array y la función reductora empezará a ejecutarse desde el segundo elemento.

La sintaxis del método .reduce() es la siguiente:

array.reduce((acumulador, elementoActual, indiceActual, arrayOriginal) => {
  // Lógica de la función reductora
  return nuevoValorAcumulador;
}, valorInicialAcumulador);

Ejemplo 1: Suma de elementos de un array con javascript:

Veamos un ejemplo sencillo de cómo usar el método .reduce() para sumar todos los elementos de un array numérico:

// Creamos un array con números
const numeros = [1, 2, 3, 4, 5];

// Usamos el método .reduce() para sumarlos
const suma = numeros.reduce((acumulador, valorActual) => {
  // Devolvemos la suma del acumulador y el valor actual
  return acumulador + valorActual;
});

// Mostramos el resultado por consola
console.log(suma); // 15

En este caso, la función reductora recibe dos parámetros: el acumulador y el valor actual.
Como no hemos especificado un valor inicial, el acumulador toma como valor inicial el primer elemento del array (1) y el valor actual toma como valor inicial el segundo elemento del array (2).
La función devuelve la suma de ambos valores (3) y ese es el nuevo valor del acumulador. Luego, la función se ejecuta de nuevo con el nuevo valor del acumulador (3) y el siguiente elemento del array (3), devolviendo la suma de ambos valores (6) y así sucesivamente hasta recorrer todo el array y obtener la suma final (15).

Ejemplo 2: Unificar arreglos con javascript:

const arrays = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
const unifiedArray = arrays.reduce((acc, cur) => acc.concat(cur), []);
console.log(unifiedArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

En este ejemplo, tenemos un arreglo de arreglos llamado arrays y queremos obtener un solo arreglo que contenga todos los elementos de los arreglos internos.

Para hacerlo, usamos el método .reduce() con una función reductora que recibe dos parámetros: accy cur. El parámetro acc representa el arreglo acumulado hasta el momento, y el parámetro cur representa el arreglo actual del arreglo principal.

La función reductora usa el método .concat() para unir el arregloacccon el arreglocur, y devuelve el nuevo arreglo resultante. El segundo argumento del método .reduce() es[], que se usa como valor inicial deacc. Al final, el método .reduce() devuelve el arreglo final deacc, que tiene todos los elementos de los arreglos internos.

const arrays = [
  ["A", "B", "C"],
  ["D", "E", "F"],
  ["G", "H", "I"],
];
const unifiedArray = arrays.reduce((acc, cur) => acc.concat(cur), []);
console.log(unifiedArray); // ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']

En este otro ejemplo, tenemos un arreglo de arreglos llamado arrays y queremos obtener un solo arreglo que contenga todas las letras de los arreglos internos.

El procedimiento es el mismo que en el ejemplo anterior, solo cambia el nombre del arreglo y la variable que guarda el resultado.

Ejemplo 3: Cálcular el promedio de los valores dentro de un arreglo

const puntosUltimosPartidos = [110,102,95,98,123,145,99]

const promedioPuntosPorPartido = puntosUltimosPartidos.reduce((acc,curr) => acc + curr ) / puntosUltimosPartidos.length;

console.log(promedioPuntosPorPartido) // 110.28571428571429

Para este ejercicio tenemos un arreglo con la cantidad de puntos anotados en los últimos partidos de un equipo de baloncesto y necesitamos obtener el promedio de puntos por pardio del equipo.

Parra hacerlo usamos el método .reduce() para hacer la suma total de los puntos y luego lo dividimos por la longitud del arreglo original, obteniendo en la constante promedioPuntosPorPartido el valor de puntos promediado por el equipo en los últimos partidos.

Ejemplo 4: Cálcular la frecuencia con la que aparece un elemento dentro de un array en js

const words = [
  "gato",
  "perro",
  "ratón",
  "elefante",
  "tigre",
  "león",
  "jirafa",
  "serpiente",
  "águila",
  "ballena",
  "delfín",
  "oso",
  "pingüino",
  "koala",
  "tiburón",
  "cocodrilo",
  "leopardo",
  "pingüino",
  "tigre",
  "gato",
  "serpiente",
  "delfín",
  "león",
  "gato"
];

const frecuency = words.reduce((acc,curr) => {
  acc[curr] = (acc[curr] || 0) + 1
  return acc
},{})

console.log(frecuency) 
/*
{
  gato: 3,
  perro: 1,
  'ratón': 1,
  elefante: 1,
  tigre: 2,
  'león': 2,
  jirafa: 1,
  serpiente: 2,
  'águila': 1,
  ballena: 1,
  'delfín': 2,
  oso: 1,
  'pingüino': 2,
  koala: 1,
  'tiburón': 1,
  cocodrilo: 1,
  leopardo: 1
}
*/

Para este ejemplo necesitamos contar cuantas veces se repiten las palabras dentro de un arreglo.

Tenemos un arreglo de palabras sobre el cuál debemos aplicar el método .reduce()
creamos la constante frecuency y le aplicamos al arreglor words el método reduce con los parámetros acc (acumulador) y curr (valor actual) además establecemos un objeto vacío como valor inicial.
Dentro de la función reductora hacemos esto acc[curr] = (acc[curr] || 0) + 1 recuerda que el acumulador empieza siendo un objeto vacío, asi que en cada iteración estamos creando una propiead acc[curr] que en este caso es una palabra y le asignamos como valor (acc[curr] || 0) + 1 es decir el valor que tenga la propiedad o (0) y despues le sumamos 1.
Luego retornamos el acumulador.

Ejemplo 5: Convertir un array de objetos en un objeto

Para convertir un array de objetos en un objeto, podemos usar el método .reduce() para crear un nuevo objeto que tenga como propiedades los valores de una de las propiedades de los objetos del array. Por ejemplo:

// Array de objetos que representan usuarios
const usuarios = [
  { id: 1, nombre: "Ana", edad: 25 },
  { id: 2, nombre: "Carlos", edad: 32 },
  { id: 3, nombre: "Elena", edad: 28 },
];

// Función reductora que crea un objeto con los usuarios como propiedades
const convertir = (objeto, usuario) => {
  // Usamos el id del usuario como nombre de la propiedad y le asignamos el usuario como valor
  objeto[usuario.id] = usuario;
  // Devolvemos el objeto actualizado
  return objeto;
};

// Invocamos el método .reduce() sobre el array, pasándole la función convertir y un objeto vacío como valor inicial
const objetoUsuarios = usuarios.reduce(convertir, {});

// Mostramos el resultado por consola
console.log(objetoUsuarios); // { '1': { id: 1, nombre: 'Ana', edad: 25 }, '2': { id: 2, nombre: 'Carlos', edad: 32 }, '3': { id: 3, nombre: 'Elena', edad: 28 } }

El método .reduce() es una herramienta poderosa que te puede salvar

En este artículo, hemos visto qué es el método .reduce() en JavaScript y cómo usarlo en diferentes casos prácticos con ejemplos de código.

El método .reduce() nos permite resolver problemas complejos con arrays de forma elegante y concisa. Sin embargo, también debemos tener cuidado de usarlo correctamente y entender bien cómo funciona.

Algunos consejos para usar el método .reduce() son:

Especificar siempre el valor inicial del acumulador si queremos evitar errores o comportamientos inesperados.
Usar nombres descriptivos para los parámetros de la función reductora y evitar modificar el array original o el acumulador directamente.
Usar otros métodos de los arrays como .map(), .filter() o .find() si solo queremos transformar, filtrar o buscar elementos en el array, ya que son más simples y expresivos que .reduce().
Combinar el método .reduce() con otros métodos de los arrays o con funciones auxiliares para crear soluciones más modulares y reutilizables.

Espero que este artículo te haya sido útil y te haya ayudado a entender mejor el método .reduce() en JavaScript.

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi