JavaScript: Como usar o filter() para criar buscas inteligentes em Arrays

Se você já precisou encontrar apenas alguns itens dentro de um array, provavelmente chegou ao momento de conhecer um dos métodos mais utilizados do JavaScript: o **filter()**.

Ele é extremamente comum em sistemas reais, como:

• pesquisa de produtos;
• busca de usuários;
• filtros de tabelas;
• listagem de pedidos;
• catálogos de filmes;
• dashboards.

Neste artigo vamos entender o que é o filter(), quando utilizá-lo e como combiná-lo com o includes(), uma das formas mais utilizadas em aplicações web.

O que é o filter()?

O filter() é um método dos arrays que percorre todos os elementos e retorna um novo array contendo apenas aqueles que atendem a uma determinada condição.

A sintaxe é bem simples:

array.filter(callback);

Na prática, a função callback deve retornar:

• true → o elemento permanece no novo array;
• false → o elemento é descartado.

Primeiro exemplo

Imagine uma lista de números.

const numbers = [2, 5, 8, 10, 15, 20];

const result = numbers.filter(number => number > 10);

console.log(result);

Resultado:

[15, 20]

O array original continua exatamente igual.

console.log(numbers);
// [2, 5, 8, 10, 15, 20]

Essa é uma das principais características do filter():

Ele não modifica o array original. Sempre retorna um novo array.

Filtrando objetos

Na maioria dos projetos trabalhamos com objetos.

Por exemplo:

const students = [
  {
    id: 1,
    name: "Maria",
    age: 20
  },
  {
    id: 2,
    name: "João",
    age: 16
  },
  {
    id: 3,
    name: "Ana",
    age: 23
  }
];

Agora queremos retornar apenas alunos maiores de idade.

const adults = students.filter(student => student.age >= 18);

console.log(adults);

Resultado:

[
  { id: 1, name: "Maria", age: 20 },
  { id: 3, name: "Ana", age: 23 }
]

Quando usar o filter()?

Sempre que você precisar retornar vários elementos que atendem a uma regra.

Alguns exemplos:

• produtos acima de determinado preço;
• clientes ativos;pedidos pendentes;
• alunos aprovados;
• filmes de uma categoria;
• funcionários de um setor.

Criando uma busca por nome

Agora vamos para um exemplo muito utilizado em APIs REST.

Imagine uma lista de alunos.

const students = [
  { id: 1, name: "Maria Oliveira" },
  { id: 2, name: "João Pedro" },
  { id: 3, name: "Maria Clara" },
  { id: 4, name: "Ana Paula" }
];

Se utilizarmos:

students.filter(student => student.name === "Maria");

O retorno será vazio.

Isso acontece porque nenhum nome é exatamente igual a "Maria".

É aqui que entra o includes()

O método includes() verifica se uma string contém determinado texto.

const text = "Maria Oliveira";

console.log(text.includes("Maria"));

Resultado:

true

Agora podemos combinar os dois métodos.

const result = students.filter(student =>
  student.name.includes("Maria")
);

console.log(result);

Resultado:

[
  { id: 1, name: "Maria Oliveira" },
  { id: 3, name: "Maria Clara" }
]

Perceba que o filter() percorre todos os alunos enquanto o includes() verifica se o nome contém o texto pesquisado.

Essa combinação é uma das mais utilizadas em sistemas de busca.

Ignorando letras maiúsculas e minúsculas

Existe um problema.

Se o usuário pesquisar:

maria

e o nome estiver armazenado como:

Maria

Se compararmos essas duas strings diretamente, a busca poderá falhar, pois o JavaScript diferencia letras maiúsculas de minúsculas.

Para resolver esse problema utilizamos o método **toLowerCase()**, que converte todo o texto para letras minúsculas.

Veja o exemplo:

console.log("Maria".toLowerCase());
// "maria"

console.log("MARIA".toLowerCase());
// "maria"

console.log("mArIa".toLowerCase());
// "maria"

Agora basta aplicar o toLowerCase() tanto no nome armazenado quanto no texto digitado pelo usuário.

const result = students.filter(student =>
  student.name.toLowerCase().includes("maria".toLowerCase())
);

Dessa forma, independentemente de o usuário pesquisar por “Maria”, “maria”, “MARIA” ou até “MaRiA”, a busca funcionará corretamente.

Essa é uma boa prática muito utilizada em APIs e sistemas de pesquisa, pois melhora a experiência do usuário e evita que diferenças de capitalização impeçam a localização das informações.

Exemplo prático em uma API

Esse é um exemplo muito parecido com o que desenvolvemos durante as aulas de Backend.

findByName(req, res) {
    const { name } = req.query;

    const filteredStudents = students.filter(student =>
        student.name
            .toLowerCase()
            .includes(String(name).toLowerCase())
    );
    if (filteredStudents.length === 0) {
        return res.status(404).json({
            message: "Student not found."
        });
    }
    return res.json(filteredStudents);
}

Nesse exemplo:

• recebemos o nome através do req.query;
• percorremos todos os alunos utilizando o filter();
• usamos includes() para permitir buscas parciais;
• utilizamos toLowerCase() para ignorar diferenças entre maiúsculas e minúsculas;
• retornamos apenas os alunos encontrados.

filter() x find()

Uma dúvida muito comum é quando utilizar cada método.

filter()

Retorna todos os elementos encontrados.

const result = students.filter(student =>
    student.name.includes("Maria")
);

Resultado:

[
   { id: 1, name: "Maria Oliveira" },
   { id: 3, name: "Maria Clara" }
]

find()

Retorna apenas o primeiro elemento encontrado.

const result = students.find(student =>
    student.name.includes("Maria")
);

Resultado:

{ id: 1, name: "Maria Oliveira" }

Se você espera vários resultados, utilize filter().

Se precisa apenas do primeiro, utilize find().

Conclusão

O filter() é um dos métodos mais importantes do JavaScript para trabalhar com arrays. Ele permite criar filtros de forma simples, legível e sem alterar os dados originais.

Quando combinado com métodos como includes() e toLowerCase(), torna-se uma solução extremamente poderosa para implementar pesquisas em listas, tabelas e APIs.

Se você está aprendendo JavaScript, dominar o filter() é um passo importante antes de avançar para outros métodos como map() e reduce(), já que eles aparecem diariamente no desenvolvimento de aplicações modernas.

Referências

• https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
• https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/includes
• https://www.dio.me/articles/como-usar-o-filter-no-js