Aprenda a usar o método reduce no JavaScript. Este é um método que permite extrair informações únicas de um array.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Hoje, vou te mostrar como utilizar o método reduce no JavaScript para extrair informações únicas de um array.
Com esse método, você pode extrair, a partir de um array, valores únicos como o maior valor, menor, soma de valores, média e assim por diante.
Este é um método muito importante que pode te ajudar muito em seus próximos projetos. Então, faça o download do material disponível e vem comigo que eu vou te mostrar 4 exemplos para que você entenda como ele funciona na prática.
O reduce é mais um dos métodos disponíveis no JavaScript para trabalharmos com arrays. Esse método extrai informações únicas de uma lista e pode ser utilizado para extrair o maior ou menor valor, a média, soma, e assim por diante.
Esse método pode ser utilizado em diversos cenários. Por exemplo, imagine que você trabalhe com uma empresa de vendas e tenha um banco de dados ou planilha com o registro de vendas dos produtos. Com esse método, você consegue descobrir o maior valor de vendas, o menor valor, o faturamento total, entre outras informações relevantes.
Para visualizarmos esse método na prática, vamos usar como exemplo uma lista de vendas realizadas pelos funcionários da empresa ao longo de um dia. A partir disso, vamos definir o valor da maior e menor venda daquele dia, o faturamento total e a média de cada vendedor.
Podemos começar definindo o nosso array:
const vendas = [650, 550, 1020, 1060, 200, 150, 495, 875];Nesse array, cada elemento corresponde ao valor vendido por um funcionário ao longo do dia.
Vamos começar extraindo o maior valor dentro do nosso array. Para isso, utilizaremos o método reduce. Este método recebe como argumentos uma função de retorno de chamada (callback), que será uma arrow function, e o valor inicial, que foi definido como 0.
A função definida será aplicada a cada elemento do array para buscar a informação única desejada, neste caso, o maior valor.
Para isso, ela compara o valor atual que está sendo percorrido com o maior valor guardado. Caso o elemento atual seja maior que o valor guardado, esse valor é substituído e atualizado.
Como definimos o valor inicial como 0, a função iniciará comparando o primeiro valor do array com 0.
Vamos armazenar o resultado dessa função dentro da variável maiorValor.
const vendas = [650, 550, 1020, 1060, 200, 150, 495, 875];
const maiorValor = vendas.reduce((maiorValor, elementoAtual) => {
return maiorValor > elementoAtual ? maiorValor : elementoAtual;
}, 0);Nossa arrow function recebe dois parâmetros: maiorValor, que inicia como sendo 0, e elementoAtual, o valor do array que está sendo percorrido no momento.
A partir disso, comparamos se o maiorValor é maior do que o elementoAtual. Se isso for verdadeiro, ela retornará o maiorValor, caso contrário, retornará o elementoAtual.
Então, após a primeira iteração da função, o valor da variável maiorValor passará a ser 650, porque 650 é maior do que 0. Na segunda iteração, ela continuará sendo 650, isso porque 550 é menor do que 650. Já na terceira iteração, ela será atualizada para 1020. E assim por diante.
Para visualizarmos o resultado final desse método, podemos exibir o valor final armazenado na variável usando a função console.log().
const vendas = [650, 550, 1020, 1060, 200, 150, 495, 875];
const maiorValor = vendas.reduce((maiorValor, elementoAtual) => {
return maiorValor > elementoAtual ? maiorValor : elementoAtual;
}, 0);
console.log(maiorValor);
Por ser um exemplo de um array pequeno, conseguimos visualizar que o método funcionou corretamente e retornou o maior valor dentro do array.
O método reduce também pode ser utilizado para somar elementos dentro de um array, retornando apenas a soma final. Nesse caso, podemos utilizá-lo para retornar o faturamento da empresa nesse dia.
const vendas = [650, 550, 1020, 1060, 200, 150, 495, 875];
const faturamentoDiario = vendas.reduce((valorAcumulado, elementoAtual) => {
return valorAcumulado + elementoAtual;
}, 0);
console.log(faturamentoDiario);Repare que a lógica é bem semelhante à do maior valor. Definimos dois parâmetros para a nossa função, que serão o valorAcumulado e o elementoAtual, e o valor inicial do método reduce como 0.
Na primeira iteração, o valorAcumulado será 0 e será somado a ele o elementoAtual, que é 650. Assim, o valorAcumulado passa a ser 650 na segunda iteração, onde é somado 550 do elementoAtual. Fazendo isso para cada um dos valores no array.
Executando esse código, teremos o somatório final, ou seja, o faturamento diário dessa empresa.
Para extrair o menor valor dentro do nosso array é muito semelhante ao que fizemos para o maior valor, porém, precisamos fazer uma mudança importante ou então teremos um problema com o nosso resultado.
const vendas = [650, 550, 1020, 1060, 200, 150, 495, 875];
const menorValor = vendas.reduce((menorValor, elementoAtual) => {
return menorValor < elementoAtual ? menorValor : elementoAtual;
});
console.log(menorValor);Executando esse código, teremos o resultado de 150.
A lógica é praticamente a mesma do maior valor, mas ao invés de comparar se o maiorValor é maior do que o elementoAtual, verificamos se o menorValor é menor do que o elementoAtual.
Além disso, repare que para esse caso nós não definimos o valor inicial como 0. Caso fizéssemos isso, o resultado retornado seria 0, pois não existe um valor dentro do array que seja menor do que 0.
O valor inicial não precisa ser definido para que o método reduce funcione; ele é um argumento opcional. Quando não definimos um valor inicial, o método considera o primeiro valor do array como sendo o valor inicial.
Por fim, podemos calcular o valor da média de vendas por vendedor ao longo desse dia. A média é obtida calculando a soma total das vendas dividia pelo número de funcionários.
Como cada valor dentro do array representa as vendas de um funcionário, temos que o número de funcionários da empresa será igual à propriedade length do array. Essa propriedade retorna o número de elementos em um array.
Então, para calcularmos a média de valores, basta aplicarmos o método reduce para obter o faturamento diário, como já fizemos anteriormente, e dividir o valor retornado (soma das vendas) pela propriedade length.
const vendas = [650, 550, 1020, 1060, 200, 150, 495, 875];
const mediaVendedores =
vendas.reduce((valorAcumulado, elementoAtual) => {
return valorAcumulado + elementoAtual;
}, 0) / vendas.length;
console.log(mediaVendedores);
Com isso, temos que a média vendida por cada vendedor foi de 625.
Na aula de hoje, você aprendeu como utilizar o método reduce no JavaScript para extrair informações únicas de um array.
Você viu como aplicar diferentes lógicas dentro desse método para chegar ao resultado desejado, como o maior valor, menor valor, soma dos valores e média.
Assim como obtivemos esses valores únicos, você poderia aplicar outras lógicas para obter diferentes resultados. Este é um método muito importante no JavaScript quando trabalhamos com arrays e desejamos obter valores únicos!
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador