Explicando a Função Reduce() do JavaScript

Como usar a função reduce() do JavaScript ?

YouTube Vídeo

Intro

O JavaScript tem diversas funções nativas para manipular arrays. Essas funções permitem que você crie coisas mais complexas sem precisar de uma biblioteca, de um framework ou de “inventar a roda novamente”. A função nativa chamada reduce() que pode ser usada para reduzir um array. Vamos ver como ela funciona.

Explicando

Vamos usar o meu array clássico de 5 números para entender como funciona a função reduce().:

const numbers = [1, 2, 3, 4, 5]

Usaremos, para chamar,

numbers.reduce()

A função reduce() espera receber dentro dela, como parâmetro, outra função.
Exemplo de uma função para aplicar:

function somaValores(acumulador, valorAtual) {
  return acumulador + valorAtual
}

Essa função soma os valores usando o acumulador para armazenar temporariamente o resultado da soma entre os elementos do array representado pelo parâmetro chamado valorAtual.

Aplicando na prática

Inserindo essa nossa função criada como parâmetro na função reduce() aplicada em nosso array, teremos:

const numbers = [1, 2, 3, 4, 5]

function somaValores(acumulador, valorAtual) {
  return acumulador + valorAtual
}

var total = numbers.reduce(somaValores)

console.log(total) // 15

Executando esse script, no console, retorna:

15

Aprofundando

A função reduce() também aceita um segundo parâmetro, que é uma função ou um valor que será aplicado ao acumulador. Lembrando que acumulador é o primeiro parâmetro passado na função usada para aplicar o reduce() a um array.
Exemplo:

const numbers = [1, 2, 3, 4, 5]

function somaValores(acumulador, valorAtual) {
  return acumulador + valorAtual
}

var total = numbers.reduce(somaValores, 10)

console.log(total) // 25

Executando esse script, no console, retorna:

25

Na prática, não é comum criar uma função separada para usar o reduce() e sim já criar uma arrow function dentro dos parâmetros,
Exemplo:

const numbers = [1, 2, 3, 4, 5]

var total = numbers.reduce((acumulador, valorAtual) => {
  return acumulador + valorAtual
}, 10)

console.log(total) // 25

Executando esse script, no console, retorna:

25

A função usada para trabalhar com o reduce() é chamada de “callback”. Ela pode receber até 4 parâmetros. Um Acumulador, um valor e dois parâmetros opcionais.
Exemplo:

const numbers = [1, 2, 3, 4, 5]

numbers.reduce(function (acumulador, valorAtual, index, array) {
  return acumulador + valorAtual
})
// 10

Executando esse script, no console, retorna:

10

A função “callback” será invocada 5 vezes, com os argumentos e valores em cada chamada sendo (passando 0 para valor inicial de acumulador como segundo parâmetro):

	Acumulador	valorAtual	index	array	valor de retorno
Primeira Chamada	0	1	0	[1, 2, 3, 4, 5]	1
Segunda Chamada	1	2	1	[1, 2, 3, 4, 5]	3
Terceira Chamada	2	3	2	[1, 2, 3, 4, 5]	6
Quarta Chamada	3	4	3	[1, 2, 3, 4, 5]	10
Quinta Chamada	4	5	4	[1, 2, 3, 4, 5]	15

valor retornado pelo reduce será o da última chamada à callback !

O reduce() pode ser uma ferramenta usada para fazer coisas mais complexas,
como:

Contando Valores iguais em um array e adiciona-los em um Objeto

const nomes = [
  'João',
  'Maria',
  'José',
  'Joana',
  'José',
  'João',
  'Maria',
  'José',
  'Joana',
  'José'
]

const quantidade = nomes.reduce((acumuladorDeNomes, nome) => {
  if (nome in acumuladorDeNomes) {
    acumuladorDeNomes[nome]++
  } else {
    acumuladorDeNomes[nome] = 1
  }
  return acumuladorDeNomes
}, {})

console.log(quantidade)

Executando esse script, no console, retorna:

{
  "João": 2,
  "Maria": 2,
  "José": 4,
  "Joana": 2,
}

Recebendo o valor total de dentro de um objeto

const store = [
  {
    product: 'Laptop',
    value: 3500,
    currency: 'BRL',
    count: 3
  },
  {
    product: 'Iphone 12',
    value: 15000,
    currency: 'BRL',
    count: 1
  },
  {
    product: 'Teclado Mecânico',
    value: 500,
    currency: 'BRL',
    count: 12
  }
]

const prevProfits = store.reduce((acc, item) => {
  return acc + item.value * item.count
}, 0)

console.log(prevProfits)

Executando esse script, no console, retorna:

31500

Referências

MDN - Mozilla

Dúvidas?

Para qualquer dúvida, sugestões e comentários, lembre-se que esse blog é openSource e seu código é aberto e está disponível no meu github.

Além disso, você pode usar também a seção comentários aqui em baixo!

Saudações, Israel Cena.