Utilizando Filter para fazer Buscas em JavaScript

Muitas vezes você já deve ter se deparado com uma certa situação: a de ter que desenvolver uma funcionalidade de busca, muito comum em projetos / aplicativos de lojas virtuais. Muitas vezes nesse caso você tem disponível um array de elementos, mas não sabe o que fazer com ele.

É para isso que serve o método tema desse artigo:

Array.filter()

O método Array.filter() permite "testar elementos de dado array" sob uma certa condição e recuperar esses elementos os quais passaram na condição. Espera, ficou confuso? Calma que vou explicar...

Imagine que você possui o seguinte array de livros no projeto:

const livros = ["Como fazer amigos e influenciar pessoas", "O poder do hábito", "A sutil arte de ligar o f*da-se", "Framed Ink", "Desenhando com o lado direito do cérebro"];

Agora imagine que um usuário de seu aplicativo pesquisou "amigos". Qual o retorno esperado? Espera-se com essa busca que apenas o elemento "Como fazer amigos e influenciar pessoas" seja recuperado. O retorno esperado é o seguinte:

["Como fazer amigos e influenciar pessoas"]

Agora, como vamos utilizar o método Array.filter() de forma que seja possível inserirmos uma String e recuperar elementos com base nessa String? O primeiro passo é criar uma função callback.

Função Callback

Uma função callback é uma função que é passada como argumento para outra função e é executada quando a função principal atinge determinado ponto. No caso do Array.filter(), iremos passar uma função callback com uma condição que será usada para testar os elementos do nosso Array de livros com base em uma String (texto).

A função callback vai ser a seguinte:

function pesquisar(livro) {
return livro.toUpperCase().includes("amigos".toUpperCase());
}

Agora, para pesquisar no array de livros, basta apenas fazer a chamada do método Array.filter() passando a função pesquisar como argumento (função callback):

livros.filter(pesquisar);

O resultado:

['Como fazer amigos e influenciar pessoas']

Pronto, basta substituir "amigos" por uma variável que vai receber o valor da busca digitado pelo usuário. Neste artigo foi utilizada a comparação de Strings, mas é apenas um exemplo, você pode utilizar também números e booleanos:

function pesquisar2(numero) {
return numero > 10;
}

const numeros = [1, 2, 3, 4, 10, 12];

numeros.filter(pesquisar2) // deve retornar [12]

function pesquisar3(booleano) {
return booleano === true;
}

const booleanos = [true, true, false];

booleanos.filter(pesquisar3) // deve retornar [true, true]

Então é isso, espero que o artigo tenha ajudado vocês que estão desbravando o incrível mundo dos arrays e que precisam utilizar Filter para fazer Buscas em JavaScript

Boa sorte nos seus estudos! 👋

Para informações mais detalhadas, visitar o site Array.prototype.filter() - JavaScript | MDN (mozilla.org)

Sobre funções callback: Entendendo funções callback em JavaScript | Blog do Rah (ramongomes.com.br)

#JAVASCRIPT