Usando o filter e reduce na prática.

Neste artigos vamos aplicar as funções filter e reduce do javascript para calcular o saldo da conta bancária.

Temos o seguinte array de objetos, que representam a quantidade de ganhos ( income ) e gastos ( outcome ).

const transactions = [
  {
    title: "Salário",
    value: 3000,
    type: "income"
  },
  {
    title: "Freela",
    value: 1000,
    type: "income"
  },
  {
    title: "Boleto",
    value: 2000,
    type: "outcome"
  },
  {
   title: "conta",
   value: 500,
   type: "outcome"
   },
];

Nosso objetivo é escrever uma função que retorne o valor total de "outcome", "income" e a diferença entre eles.

Vamos utilizar a seguinte estratégia. Primeiro vamos usar o filter para separar o tipo de gasto e depois somamos o array de objetos com o reduce.

A função filter, cria uma novo array, com o resultado que passou na nossa implementação.

const filteredIncome = transactions.filter( transaction => transaction.type === 'income' );

Então aplicando o método filter no array "transaction", ele percorre elemento por elemento, testando se a transação é do tipo "income", caso seja verdade, ele será salvo dentro um novo array.

Agora que temos um novo array só do tipo "income", podemos fazer a soma com o reduce.

const sumIncome = filteredIncome.reduce(
(sum, currentValue) => {sum + currenteValue.value});

Agora já temos o valor da soma de todos o itens no para "income".

Entretanto nossa ultima função tem um pequeno problema, para quando tivermos apenas uma unica transação, de um único tipo.

Em vez de retornar a soma, ela apenas irá retornar o objeto.

Para corrigir isso, incluímos um valor inicial, da seguinte forma,

const sumIncome = filteredIncome.reduce(
   (sum, currentValue) => {
     return sum + currenteValue.value
}, 0);

Desta forma, mesmo se tivermos apenas um "income" ou "outcome" o valor da soma estará correto.

Basicamente terminamos, basta fazer a mesma coisa para as transações do tipo "outcome" e então retornar os valores com o saldo.

Entretanto, podemos deixar o código um pouco mais elegante e menor. Ao invés de usar duas variáveis, podemos utilizar somente uma, aplicando filter e reduce, um após o outro.

const income = transactions
  .filter( transaction => transaction.type === 'income')
  .reduce((sum, currentValue) => {
     return sum + currenteValue.value
}, 0);

Agora basta fazer o mesmo para "outcome" e criar uma função que retorna os valores com o saldo calculado.

function getBalance() {
  const income = .....
  const outcome = .....

  return {
   income,
   outcome,
   balance: income - outcome,
  };
}

Código completo: gitHub

Referências

Reduce - acessado em 5/06/2020

Filter - acessado em 5/06/2020