Como e quando usar o Reduce em JavaScript?

#JavaScript

A função Reduce é uma das HOF’s (funções de ordem superior) mais poderosas e versáteis da linguagem Javascript. Ela permite que você execute uma função de redução, como o nome sugere, em cada elemento de um determinado array, passando o valor retornado da operação anterior como um acumulador. O resultado final ao executar a função de redução em todos os elementos é um valor único.

Sua seguinte é a sintaxe:

array.reduce(callback(accumulator, currentValue, index, array), initialValue)

O primeiro argumento é uma função de callback que recebe quatro parâmetros:

array: o array sobre o qual o reduce está sendo chamada.
accumulator: o valor acumulado da redução anterior, ou o valor inicial - se fornecido.
currentValue: o valor do elemento atual do array.
index: o índice do elemento atual do array no momento da iteração.

A função reduce aceita, ainda, um segundo parâmetro:

initialValue: valor inicial e não obrigatório que poderá ser usado como o primeiro valor do acumulador na primeira chamada da função de callback.

O Reduce pode ser usado para vários propósitos, como, por exemplo, somar todos os números de um array, encontrar o maior ou menor elemento, filtrar elementos que satisfaçam determinada condição, transformar um array em outro tipo de estrutura de dados, e muito mais. As possibilidade são inúmeras e é muito importante saber quando utilizá-la para facilitar as nossas vidas como pessoa desenvolvedora de software.

Aproveitando a deixa, vamos ver alguns exemplos práticos de como usar essa HOF no nosso amado JavaScript.

💡 Antes, alguns combinados relacionados às siglas usadas na função de callback. Elas deverão ser entendidas como:

acc = acumulador;

curr = valor atual;

Agora, mão na massa! 🚀

Somar todos os números Você tem um array de números e quer obter a soma de todos eles. Para isso, uma boa alternativa seria usar o reduce passando uma função de callback que adiciona o acumulador ao valor atual e retorna o resultado. Você também pode fornecer um valor inicial de zero para o acumulador - mas lembrando que, caso não seja definido explicitamente, o valor inicial será SEMPRE 0.

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

Encontrar o maior elemento Imagine o cenário em que você tenha um array de números e queira encontrar o maior deles. Para isso você pode usar o reduce passando uma função de callback que compara o acumulador com o valor atual e retorna o maior entre eles. Você também pode usar o primeiro elemento do array como valor inicial para o acumulador.

  const numbers = [1, 2, 3, 4, 5];
  const max = numbers.reduce((acc, curr) => acc > curr ? acc : curr, numbers[0]);
  console.log(max); // 5

Filtrar elementos de um array que satisfaçam uma condição Neste cenário, você tem um array de objetos que representam pessoas e quer filtrar apenas as que têm mais de 18 anos. Utilize o reduce passando uma função de callback que verifica se a idade da pessoa atual é maior ou igual a 18 e, em caso afirmativo, adiciona a pessoa a um novo array.

  const people = [
  { name: 'John Doe', age: 16 },
  { name: 'Thomas Calls', age: 19 },
  { name: 'Liam Smith', age: 20 },
  { name: 'Jessy Pinkman', age: 18 },
  ];
  
  const adults = people.reduce((acc, curr) => {
      if (curr.age >= 18) {
          acc.push(curr);
      }
      return acc;
  }, []);
  
  console.log(adults); /* 
  [{ name: 'Thomas Calls', age: 19 },
  { name: 'Liam Smith', age: 20 },
  { name: 'Jessy Pinkman', age: 18 }]
  */

Agora um exemplo mais elaborado: transformar um array em outro tipo de estrutura de dados Suponha que você tenha um array de strings que representam cores e queira transformá-lo em um objeto que mapeia cada cor para o seu código hexadecimal. Você pode usar o reduce passando uma função de callback que atribui uma propriedade ao objeto acumulador com o nome da cor e o valor do código hexadecimal e um objeto vazio como valor inicial para o acumulador.

  const colors = ['red', 'green', 'blue'];
  const hexCodes = colors.reduce((acc, curr) => {
  switch (curr) {
          case 'red':
          acc[curr] = '#FF0000';
          break;
          case 'green':
          acc[curr] = '#00FF00';
          break;
          case 'blue':
          acc[curr] = '#0000FF';
          break;
      }
  return acc;
  }, {});
  
  console.log(hexCodes); // { red: '#FF0000', green: '#00FF00', blue: '#0000FF' }

Conclusão

O reduce é uma ferramenta muito útil para manipular arrays em Javascript. Ela permite criar códigos mais concisos e elegantes, evitando o uso de loops explícitos e variáveis auxiliares. Além disso, ela pode ser combinada com outras HOFs para criar soluções ainda mais poderosas.

Se quiser saber ainda mais sobre o reduce, você pode consultar os seguintes artigos:

Gostou do artigo? Seu upvote vai me deixar mais feliz, além de fazer com que esse conteúdo chegue até outras pessoas ✨