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

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.

Como utilizar os métodos map(), filter() e reduce() para manipulação eficiente de arrays

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

Desenvolvedora sênior com forte atuação em PHP, JavaScript e tecnologias de backend.

Mais sobre o autor

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