Chegamos a mais um post da minha saga de estudos em JavaScript.

No último post eu falei sobre o método filter

No post de hoje irei falar um pouco sobre o método de array reduce.

Método Reduce

Reduce recebe uma função como argumento e executa esta função para cada item do array.

Este método é utilizado quando baseado no array original, nós precisaremos reduzir o array a um tipo de dado.

Podemos reduzir um array em um objeto literal, uma string, um número ou até mesmo um novo array.

Então, é importante entender que o reduce tem poder e versatilidade para gerar um output que não seja necessariamente um array.

Vamos começar com o exemplo mais simples para entender o reduce.

O reduce pode receber dois argumentos:

• 1: A função que será executada
• 2: O valor inicial do acumulador (accumulator)

A função recebida, recebe 4 parâmetros, sendo 2 obrigatórios e 2 opcionais.

Obrigatórios:

• 1: Accumulator, que é o acumulador, que receberá os dados.
• 2: Item, que é o item que está sendo iterado.

Opcionais:

• 1: Index, que é o índice do item que está sendo iterado
• 2: Array, que é o próprio array original.

Temos um array de números e queremos obter a soma de todos esses números, fazendo com que esse array seja reduzido a um único número.

const numbers = [1, 2, 3]
const sumResult = numbers.reduce((accumulator, item) => accumulator + item, 0)

console.log(sumResult) // 6

Agora vamos imaginar uma situação mais real, imagina que temos um array com várias pontuações de jogadores e queremos obter a soma de todos os pontos de um determinado jogador.

const scores = [
  { name: 'Vinicius Costa', score: 337 },
  { name: 'Roger Melo', score: 43 },
  { name: 'Alfredo Braga', score: 234 },
  { name: 'Pedro H. Silva', score: 261 },
  { name: 'Ana Paula Rocha', score: 491 },
  { name: 'Vinicius Costa', score: 167 },
  { name: 'Roger Melo', score: 137 },
  { name: 'Alfredo Braga', score: 135 },
  { name: 'Ana Paula Rocha', score: 359 },
  { name: 'Pedro H. Silva', score: 133 }
]

const alfredoScore = scores.reduce((accumulator, score) => {
  if (scores.name === 'Alfredo Braga') {
    accumulator += scores.score
  }
  return accumulator
}, 0)

console.log(alfredoScore) // 369

Agora vamos obter um output diferente, vamos obter uma string.

const cart = [
  { name: 'Dark Souls III', price: 95.03 },
  { name: 'Shadow of the Tomb Raider', price: 101.19 },
  { name: 'Sekiro: Shadows Die Twice', price: 179.99 },
  { name: 'Resident Evil 2', price: 119.90 },
  { name: 'Death Stranding', price: 149.99 }
]

const games = cart.reduce((accumulator, game) => {
  accumulator += `- ${game.name}\n`
  return accumulator
}, '')

console.log(games)

/*
- Dark Souls III
- Shadow of the Tomb Raider
- Sekiro: Shadows Die Twice
- Resident Evil 2
- Death Stranding
*/

Ficamos por aqui com mais um conteúdo dos meus estudos, vou deixar o link da documentação do site da MDN sobre o método reduce.

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub