Manipulando arrays com map(), filter() e reduce() em JavaScript

Entenda como usar os métodos map(), filter() e reduce() para manipular arrays em JavaScript, permitindo transformações, filtragens e agregações de dados.

Como usar map(), filter() e reduce() para manipular arrays?

JavaScript oferece métodos poderosos para manipular arrays de maneira funcional, sem a necessidade de usar loops tradicionais. Entre os métodos mais utilizados estão map(), filter() e reduce(). Esses métodos permitem transformar, filtrar e agregar dados de maneira concisa e legível. Abaixo, exploraremos como usar cada um desses métodos.

Método map()

O método map() é usado para transformar os elementos de um array, aplicando uma função a cada elemento e retornando um novo array com os resultados. É ideal quando você precisa modificar os dados de um array sem alterar o array original.

Exemplo de código com map():

let numeros = [1, 2, 3, 4, 5];
let quadrados = numeros.map(function(numero) {
  return numero * numero;
});
console.log(quadrados);  // Exibe [1, 4, 9, 16, 25]

Neste exemplo, o método map() aplica a função que calcula o quadrado de cada número, criando um novo array com os valores transformados.

O map() é particularmente útil quando você deseja realizar transformações em dados de forma simples e eficaz, sem a necessidade de manipular o array original.

Método filter()

O método filter() permite criar um novo array contendo apenas os elementos que atendem a uma condição específica. Ao contrário do map(), o filter() não altera os elementos, mas seleciona aqueles que atendem ao critério definido.

Exemplo de código com filter():

let numeros = [1, 2, 3, 4, 5];
let pares = numeros.filter(function(numero) {
  return numero % 2 === 0;
});
console.log(pares);  // Exibe [2, 4]

Aqui, o método filter() cria um novo array contendo apenas os números pares do array original. Esse método é útil quando você precisa extrair subconjuntos de dados conforme um critério de filtragem.

Método reduce()

O método reduce() é usado para reduzir um array a um único valor, aplicando uma função acumuladora sobre cada elemento. Este método é ideal quando você precisa realizar operações como somar, multiplicar ou combinar os valores de um array em um único resultado.

Exemplo de código com reduce():

let numeros = [1, 2, 3, 4, 5];
let soma = numeros.reduce(function(acumulador, numero) {
  return acumulador + numero;
}, 0);
console.log(soma);  // Exibe 15

Neste exemplo, o método reduce() soma todos os valores do array, começando com o valor inicial de 0. A função acumuladora adiciona cada número ao acumulador durante as iterações. reduce() é um dos métodos mais poderosos para agregação de dados em JavaScript.

Comparando map(), filter() e reduce()

  • map(): Transforma cada elemento de um array e retorna um novo array com os resultados. Não modifica o array original.
  • filter(): Filtra os elementos de um array com base em uma condição e retorna um novo array com os elementos que atendem ao critério. Não modifica o array original.
  • reduce(): Reduz todos os elementos de um array a um único valor, aplicando uma função acumuladora. Retorna um valor final, como a soma de todos os números de um array.

Esses métodos são poderosos porque são funcionais e tornam o código mais legível e conciso. Em vez de escrever loops complexos, você pode usar esses métodos para realizar as operações desejadas de forma direta.

Conclusão

Usar map(), filter() e reduce() para manipular arrays em JavaScript é uma prática recomendada para quem quer escrever código funcional, conciso e legível. Ao aprender a usar esses métodos corretamente, você poderá manipular dados de forma muito mais eficiente e com menos erros, além de escrever código mais claro e direto. Esses métodos são fundamentais para trabalhar com arrays em JavaScript e podem ser aplicados em diversos cenários de desenvolvimento.

A manipulação de arrays em JavaScript é uma das tarefas mais comuns e essenciais ao programar. Métodos como map(), filter() e reduce() permitem que você trabalhe com arrays de forma funcional e eficiente. Eles são poderosos porque não só tornam seu código mais legível, como também permitem realizar operações complexas sem a necessidade de loops explícitos. Ao dominar esses métodos, você poderá realizar desde simples transformações de dados até agregações e filtragens avançadas, simplificando muito o seu trabalho e tornando seu código mais robusto.

Algumas aplicações:

  • Transformar arrays com map() para aplicar modificações nos dados sem alterar o array original.
  • Filtrar dados com filter() para criar subconjuntos de dados conforme critérios definidos.
  • Realizar agregações, como somar ou multiplicar elementos, com reduce() para reduzir arrays a um único valor.
  • Aplicar esses métodos em operações de manipulação de dados, como em sistemas de buscas, relatórios ou dashboards interativos.

Dicas para quem está começando

  • Use map() quando quiser criar um novo array com os dados transformados sem alterar o original.
  • Experimente filter() para extrair dados específicos de um array com base em condições que você definir.
  • Use reduce() para calcular totais ou fazer operações agregadas, como somar valores em um array.
  • Entenda que esses métodos são imutáveis, ou seja, eles não alteram o array original, mas retornam um novo array ou valor.

Contribuições de Andressa Maria

Compartilhe este tutorial: Como usar map(), filter() e reduce() para manipular arrays?

Compartilhe este tutorial

Continue aprendendo:

Como percorrer um array em JavaScript?

Compreenda como percorrer um array em JavaScript utilizando os métodos mais comuns, como `for`, `forEach()`, `map()`, entre outros.

Tutorial anterior

Qual a diferença entre forEach e map?

Entenda as diferenças entre os métodos `forEach()` e `map()` em JavaScript e saiba quando usar cada um para manipular arrays de forma eficaz.

Próximo tutorial