Javascript Filter

Introdução

O filter é uma estrutura de repetição em Javascript que serve para percorrer arrays, seu uso mais comum é para percorrer array de objetos.

O filter é bem parecido com o map, e também pode ser confundido com o forEach, porém seu uso pode ser mais específico, e como o próprio nome diz, para filtrar arrays.

Ele executa uma função de callback que pode receber até três parâmetros, dentro dessa função, pode ser realizado alguma verificação para decidir se o valor será retornado ou não, os valores retornados criam um novo array, mantendo o array original e criando outro com os dados filtrados.

Filtrando um array

Como demonstração, podemos ver um exemplo no qual é necessário ter um array somente com números maiores que 10. para isso, o filter iria resolver:

let numeros = [12, 5, 7, 15, 27, 30, 2, 5];
let numerosFiltrados = numeros.filter((valorAtual) => {
	if(valorAtual > 10){
	    return valorAtual;
        }
});
console.log(numerosFiltrados); //[12, 15, 27, 30];

Com isso, foi possível filtrar os valores acima de 10, e é assim que o filter trabalha, você executa uma função para cada item do array, e para cada item tem uma verificação para decidir se esse valor se encaixa no novo array ou não.

Função de callback separada

Uma opção para o filter, map e forEach, é que não precisa passar diretamente uma função logo na chamada deles, é possível criar uma função separada no código para executar somente depois.

Isso pode ser interessante quando uma mesma lógica de filtro de dados, se repete em vários locais do sistema. por exemplo:

let idades = [12, 18, 19, 15];
function verificarAdulto(idade){
	if(idade >= 18){
            return idade;
        }
}
let somenteAdultos = idades.filter(verificarAdulto);
console.log(somenteAdultos); //[18, 19]

Ao passar a função para o filter, os parâmetros serão passados para a função que foi declarada antes, e ela irá retornar somente as idades que são maiores ou igual a dezoito.

Caso você precise verificar a idade da pessoa em mais locais do sistema, pode usar a mesma função.

Filtrando objetos

Talvez o principal uso do filter seja filtrar arrays de objetos, é muito prático tem um ótimo resultado, tendo em vista que se mantém os dados originais e cria um novo array com os novos dados.

Para o exemplo, vamos supor que precisamos mandar um e-mail para clientes do sistema que não tem telefone cadastrado, e para isso é necessário filtrar somente os clientes sem telefone, uma possível implementação de filtro seria essa.

let pessoas = [
    {nome: ‘Joao’, telefone: null, idade: 20},
    {nome: ‘Maria’, telefone: (55)22334455, idade: 22},
    {nome: ‘Fulano’, telefone: null, idade: 19},
];
let pessoasParaMandarEmail = pessoas.filter((pessoa) => {
	if(!pessoa.telefone){
	    return pessoa;
        }
});
console.log(pessoasParaMandarEmail); //lista com o Joao e Fulano

Para saber mais

Gravei um vídeo completo sobre o filter, vale a pena assistir.

Conclusão

O filter é umas das principais funções de array hoje, eu particularmente utilizo muito, é muito importante conhecer essa função e saber a diferença entre as outras como map e o forEach, porque embora sejam muito parecidas, elas tem suas diferenças e saber aplicar cada um em cada momento é imprescindível para um código limpo e com boas práticas, nesse post vou ficando por aqui, até o próximo 🙂

Artigos sobre forEach e Map

Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.

Referências

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filtro

https://www.w3schools.com/jsref/jsref_filter.asp