Javascript filter(): Como Usar e Exemplos Práticos

O método filter() é uma função nativa de arrays em Javascript que permite criar um novo array contendo apenas os elementos que atendem a uma determinada condição. É uma função imutável, ou seja, não modifica o array original.

Então de maneira simples, como o próprio nome do método diz, o filter() é usado para filtrar um Array, deixando apenas os elementos que atendam a condição de filtragem.

Sintaxe do `filter()`

JavaScript

const novoArray = arrayOriginal.filter((elemento, indice, array) => {
    return condicao;
});

JavaScript

elemento – O elemento atual do array.
indice (opcional) – O índice do elemento atual.
array (opcional) – O próprio array original.
condicao – Uma expressão que retorna true para os elementos que devem ser incluídos no novo array.

Exemplos de uso do `filter()`

1. Filtrando números maiores que um valor

JavaScript

const numeros = [10, 5, 8, 1, 20, 15];
const maioresQueDez = numeros.filter(num => num > 10);
console.log(maioresQueDez); // [20, 15]

JavaScript

2. Filtrando objetos dentro de um array

Imagine um array de objetos representando usuários e queremos encontrar apenas os que são maiores de idade.

JavaScript

const usuarios = [
    { nome: "Ana", idade: 25 },
    { nome: "Carlos", idade: 17 },
    { nome: "Beatriz", idade: 30 },
    { nome: "Pedro", idade: 15 }
];

const maioresDeIdade = usuarios.filter(usuario => usuario.idade >= 18);
console.log(maioresDeIdade);

JavaScript

Saída

JSON

[
    { nome: "Ana", idade: 25 },
    { nome: "Beatriz", idade: 30 }
]

JSON

3. Removendo valores falsy de um array

Em JavaScript, valores como 0, "", null, undefined e false são considerados “falsy”. Podemos remover esses valores de um array usando filter():

JavaScript

const valores = [0, "", 5, "JavaScript", null, undefined, 10, false];
const valoresValidos = valores.filter(Boolean);
console.log(valoresValidos); // [5, "JavaScript", 10]

JavaScript

4. Filtrando elementos em um array de strings

Podemos usar filter() para buscar palavras que contêm uma determinada letra:

JavaScript

const palavras = ["banana", "maçã", "laranja", "uva"];
const comLetraA = palavras.filter(palavra => palavra.includes("a"));
console.log(comLetraA); // ["banana", "maçã", "laranja"]

JavaScript

Diferença Entre `filter()`, `map()` e `reduce()`

filter(): Retorna um novo array com elementos que atendem a uma condição.
map(): Retorna um novo array modificando os elementos originais.
reduce(): Reduz o array a um único valor, combinando seus elementos.

Exemplo comparativo:

JavaScript

const numeros = [1, 2, 3, 4, 5];

const pares = numeros.filter(num => num % 2 === 0); // [2, 4]
const dobrados = numeros.map(num => num * 2); // [2, 4, 6, 8, 10]
const soma = numeros.reduce((acc, num) => acc + num, 0); // 15

JavaScript

O `filter()` é sempre necessário?

Qual a vantagem de usar o filter se eu posso apenas iterar no array e criar um novo? A principal razão principal é facilitar a legibilidade, e manter um padrão funcional no seu código.

Analise os códigos abaixo:

JavaScript

// Exemplo 1
const novoArray = [];
const arrayOriginal = [1,2,3,4,5,6,7,8,9,10];

for (let i = 0; i < arrayOriginal.length; i++) {
  if (arrayOriginal[i]%2 === 0) {
    novoArray.push(arrayOriginal[i]);
  }
}

// Exemplo 2
const arrayOriginal = [1,2,3,4,5,6,7,8,9,10];
const novoArray = arrayOriginal.filter((elem) => elem%2 === 0);

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

const isEven = (n) => n%2 === 0;
const novoArray = arrayOriginal.filter(isEven);

JavaScript

No exemplo 1, temos um código usando apenas um for normal para iterar no array e inserir os elementos no novo. No segundo, temos um código bem mais enxuto, e fácil de entender. No cenário do exemplo 3, onde temos uma função externa para fazer a validação do elemento, a sintaxe do filter fica ainda mais simples.

Então em linhas gerais, o uso de uma função utilitária como o Array.filter é recomendada para simplificar o código-fonte, mas devemos ter cuidado para não usar de maneira exagerada.

Quando usar `filter()`?

Quando você precisa extrair elementos específicos de um array.
Quando você deseja manter a imutabilidade dos dados.
Quando você quer remover valores indesejados de um array sem alterar o original.

Conclusão

O filter() é uma das funções mais poderosas para manipulação de arrays em JavaScript. Seu uso permite escrever código mais limpo, legível e eficiente. Agora que você aprendeu como ele funciona, experimente aplicá-lo em seus projetos!