É  bem comum que nos projetos de front-end a gente tenha que fazer páginas com  relatórios, listas de produtos, listas de preços, lista de mensagens, listas disto, daquilo e daquilo outro. E não são raras as vezes que temos que fazer operações matemáticas com valores dentro de arrays. Pensando nisso, hoje vamos falar um pouco sobre alguns métodos que são disponibilizados pela classe Array do JavaScript  e mostraremos também alguns cenários onde o uso deles pode facilitar a vida do desenvolvedor com soluções simples e elegantes.  


Nesse cenário de exemplo, na página de um determinado relatório, temos que calcular o valor total das refeições de um colaborador da empresa XYZ. E nesses momentos quando vamos manipular ou ler os dados de um array acabamos utilizando laços de repetição pra fazer isso:

// Pegar valor total das refeições do colaborador X
let valoresRefeicoes = [10.50, 20, 10, 20];
let valorTotal = 0;

for (var i = 0; i < valoresRefeicoes.length; i++) {
    valorTotal += valoresRefeicoes[i]; //somando
}

console.log('Valor total: ' + valorTotal ); //Valor total: 60.5

Veja esse mesmo exemplo, mas agora de outra maneira, utilizando o método reduce que vem de brinde cada vez que criamos um array no JavaScript:

let valoresRefeicoes = [10.50, 20, 10, 20];
let valorTotal = valoresRefeicoes.reduce((acumulador, valor) => {
    return acumulador + valor;
});

console.log('Valor total: ' + valorTotal ); //Valor total: 60.5

O método reduce recebeu um parâmetro que é uma função. Essa função é um callback que vai ser chamado por baixo dos panos cada vez que o reduce iterar sobre o elemento dessa lista. Dessa maneira, conseguimos focar mais na regra do negócio, ao invés de ficar fazendo e verificando operações matemáticas tanto pra varrer o array quanto pra fazer as contas do negócio em si.

Num outro cenário, vou usar um exemplo real de uma prova que fiz para um processo seletivo de desenvolvedores front-end.  A  prova pedia que fizéssemos a interface de um “sistema bancário”  onde o usuário poderia realizar saques e depósitos. E esse projeto teria um extrato mostrando os valores de retiradas e depósitos. Para isso vamos mostrar um outro método chamado map, que nos auxilia a alterar o conteúdo de uma lista sem ter que se preocupar com laços.

Veja como ficaria a formatação dos valores que compõe uma lista de transações:

let transacoesBancarias = [20, -30, 50, 100, -85.50 ];

const formataValores = (valor) => {
    return valor.toLocaleString('pt-BR', {style: 'currency', currency: 'BRL'})
};

let transacoesBancariasFormatadas  = transacoesBancarias.map(formataValores);

console.log(transacoesBancariasFormatadas);
// ["R$20,00", "-R$30,00", "R$50,00", "R$100,00", "-R$85,50"]

Dessa vez mapeamos a lista original para uma outra lista formatada conforme o padrão da moeda BRL(Brazilian Reais).
Existe um terceiro método bastante utilizado na manipulação de arrays que é o filter. Assim como o map, o filter retorna uma outra lista alterada e nenhum deles altera o array original.

Agora queremos filtrar os valores e retornar apenas os depósitos, para isso vamos utilizar o filter que por parâmetro vai receber uma função que retorna true apenas quando o valor da transação for maior que 0.

let transacoesBancarias = [20, -30, 50, 100, -85.50 ];
let depositos = transacoesBancarias.filter((valor) => {
    return valor > 0;
});

console.log(depositos);
//[20, 50, 100]

Como o map e o filter retornam uma outra lista alterada, podemos encadear os métodos invocando-os em sequência:

let transacoesBancarias = [20, -30, " ", 50, 100, "NaN", -85.50 ];

let depositosFormatados = transacoesBancarias
    .filter((valor) => {
        return (!isNaN(valor) && valor > 0)
    })
    .map((valor) => {
        return valor.toLocaleString('pt-BR', {style: 'currency', currency: 'BRL'})
    });

console.log(depositosFormatados);
//["R$20,00", "R$50,00", "R$100,00"]

Nesse último exemplo nós filtramos o array deixando apenas os depósitos e depois formatamos os valores para serem exibidos na view.

Por hoje é isso amigo desenvolvedor. Até a próxima!

Comentários