Introdução

A programação moderna é frequentemente uma questão de manipular dados de forma eficiente e elegante. Em linguagens como JavaScript, uma das ferramentas mais poderosas para isso é a função filter(). Essa função permite que você selecione elementos de um array com base em critérios específicos, tornando a filtragem e extração de dados uma tarefa rápida e direta. Neste artigo, exploraremos os motivos para utilizar a função filter(), fornecerei exemplos de código para ilustrar seu funcionamento e poderemos visualizar cenários em que ela é uma escolha ideal.

Por que usar a função filter() ?

Imagine um cenário em que você tem um grande conjunto de dados e deseja extrair apenas os elementos que atendem a determinadas condições. Pode ser um conjunto de números onde você quer pegar apenas os números pares, ou uma lista de produtos em que você deseja filtrar apenas os produtos com preço acima de um certo valor. Nesses casos, a função filter() se destaca.

Exemplos de Uso

Exemplo 1: Filtrando Números Pares

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const numerosPares = numeros.filter(numeros => numeros % 2 === 0);

console.log(numerosPares); 

Saída: [2, 4, 6, 8, 10]

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];		

Na primeira linha de código estamos criando um array chamado números que contém uma sequência de números inteiros de 1 a 10.

const numerosPares = numeros.filter(numeros => numeros % 2 === 0);

Na segunda linha de código estamos utilizando a função filter() no array numeros. A função filter() recebe como argumento uma função de retorno de chamada (também conhecida como função de callback). Essa função é aplicada a cada elemento do array. No nosso caso, a função de callback é numeros => numeros % 2 === 0, que verifica se um número é par ( o resto da divisão por 2 é igual a 0 ). A função retornará um novo array chamado numerosPares.

console.log(numerosPares);

Na terceira linha de código estamos imprimindo o array resultante numerosPares, que contém os números pares do array original.

Exemplo 2: Filtrando Produtos por Preço

const produtos = [
  { nome: 'Notebook', preco: 2300 },
  { nome: 'Celular', preco: 1600 },
  { nome: 'Headphone', preco: 160 },
  { nome: 'Tablet', preco: 900 },
];

const produtosCaros = produtos.filter(produto => produto.preco < 200);

console.log(produtosCaros);

Saída: [ { nome: 'Headphone', preco: 160 } ]

const produtos = [
  { nome: 'Notebook', preco: 2300 },
  { nome: 'Celular', preco: 1600 },
  { nome: 'Headphone', preco: 160 },
  { nome: 'Tablet', preco: 900 },
];

Neste exemplo, temos um array chamado produtos, que contém objetos representando produtos com seus nomes e preços.

const produtosCaros = produtos.filter(produto => produto.preco < 200);

Aqui, estamos utilizando a função filter() no array produtos. A função de callback produto => produto.preco < 200 verifica se o preço de um produto é inferior a $200. A função filter() cria um novo array chamado produtosCaros contendo apenas os produtos que atendem esse critério.

console.log(produtosCaros);

Por fim imprimimos com o console.log(produtosCaros), o array resultante que contém os produtos cujos preços são menores que $200.

Cenários para Utilização

1. Filtragem de Dados: Como mencionado anteriormente, a função filter() é perfeita para filtrar dados em um array com base em critérios específicos, como faixas de preços, datas, valores booleanos etc.

2. Remoção de Elementos: Às vezes, você pode querer remover elementos indesejados de um array, como elementos vazios ou nulos. A função filter() torna esse processo direto.

3. Filtragem de Listas de Usuários: Ao construir interfaces de usuário, muitas vezes você precisa mostrar listas de usuários com base em critérios como ativos/inativos, administradores, etc. A função filter() facilita essa tarefa.

Documentação do JavaScript

Para obter mais detalhes sobre a função filter() e outras funcionalidades do JavaScript, consulte a [documentação oficial da MDN Web Docs]. A documentação fornece explicações detalhadas, exemplos e notas sobre compatibilidade entre navegadores.

Conclusão

A função filter() é uma ferramenta valiosa em seu arsenal de programação JavaScript. Ela oferece uma maneira elegante e eficiente de filtrar e manipular dados em arrays, melhorando a legibilidade e a manutenção do seu código. Ao utilizá-la, você pode economizar tempo, reduzir erros e tornar seu código mais expressivo. Portanto, da próxima vez que você se deparar com a necessidade de filtrar elementos em um array, lembre-se da função filter() e aproveite seus benefícios.