Método .reduce() ejemplos prácticos con javascript

El método .reduce() en JavaScript es una de las funciones más poderosas y versátiles con las que contamos para procesar y manipular los datos en arreglos.

En este artículo, exploraremos 7 ejemplos prácticos de cómo se puede utilizar el método .reduce() para resolver problemas reales. Desde la suma de elementos en un arreglo hasta la creación de un objeto agrupado por propiedades

Gracias a estos ejemplos aprenderás toda versatilidad y la eficacia de este método y como puede ayudarte a mejorar tus abilidades como desarrollador javascript.

1. Suma de elementos de un array con javascript:

Gracias al método .reduce() puede ser utilizado para sumar todos los valores dentro de un arreglo y retornar el total en un único valor.

Copiarjs
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

Copiarjs
const expenses = [250, 75, 120, 300, 95];
const totalExpenses = expenses.reduce((acc, cur) => acc + cur, 0);
console.log(totalExpenses); // 840

2. Creación de un objeto a partir de un arreglo en javascript

En JS con la ayuda del método .reduce() puedes crear un objeto a partir de un arreglo, agregando o contando elementos a partir de ciertas condiciones.

Copiarjs
const words = [
  "the",
  "quick",
  "brown",
  "fox",
  "jumps",
  "over",
  "the",
  "lazy",
  "dog",
];
const wordCount = words.reduce((acc, cur) => {
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {});
console.log(wordCount); // { the: 2, quick: 1, brown: 1, fox: 1, jumps: 1, over: 1, lazy: 1, dog: 1 }

Copiarjs
const votes = ["yes", "yes", "no", "yes", "no", "no", "yes"];
const voteCount = votes.reduce((acc, cur) => {
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {});
console.log(voteCount); // { yes: 4, no: 3 }

3. Unificar arreglos con javascript:

El método .reduce() puede ser utilizado para mezclar varios arrays en uno único.

Copiarjs
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]

Copiarjs
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']

4. Cálcular promedio de valores dentro de un arreglo con Js

Otro uso práctico qu puedes darle al método .reduce() es cálcular el promedio de los valores en un arreglo como en los siguientes ejemplos:

Copiarjs
const grades = [92, 95, 87, 60, 72];
const average = grades.reduce((acc, cur) => acc + cur, 0) / grades.length;
console.log(average); // 80

Copiarjs
const marks = [83, 80, 85, 95, 90];
const average = marks.reduce((acc, cur) => acc + cur, 0) / marks.length;
console.log(average); // 87

5. Buscar valores máximos y mínimos dentro de un arreglo en javascript:

Este ejemplo seguramente te lo encontrás en tu día a día como desarrollador y gracias a .reduce() puedes resolverlo de forma sencilla.

Copiarjs
const numbers = [1, 5, 10, 15, 20];
const max = numbers.reduce((acc, cur) => (acc > cur ? acc : cur), 0);
console.log(max); // 20

Copiarjs
const numbers = [30, 25, 35, 45, 40];
const min = numbers.reduce((acc, cur) => (acc < cur ? acc : cur), Infinity);
console.log(min); // 25

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

Copiarjs
const elements = [1, 2, 3, 4, 1, 2, 1];
const frequency = elements.reduce((acc, cur) => {
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {});
console.log(frequency); // { 1: 3, 2: 2, 3: 1, 4: 1 }

Copiarjs
const words = ["the", "quick", "brown", "fox", "the", "quick"];
const frequency = words.reduce((acc, cur) => {
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {});
console.log(frequency); // { the: 2, quick: 2, brown: 1, fox: 1 }

7. Ordenamiento de elementos en un arreglo en javascript

Con la ayuda del método .reduce() puedes ordenar los valores de un array:

Copiarjs
const elements = [3, 1, 4, 2, 5];
const sorted = elements.reduce((acc, cur) => {
  acc.push(cur);
  acc.sort((a, b) => a - b);
  return acc;
}, []);
console.log(sorted); // [1, 2, 3, 4, 5]

Copiarjs
const words = ["quick", "brown", "the", "fox"];
const sorted = words.reduce((acc, cur) => {
  acc.push(cur);
  acc.sort();
  return acc;
}, []);
console.log(sorted); // ['brown', 'fox', 'quick', 'the']