Método Filter em JavaScript

Isac
Dipeex
Published in
2 min readAug 18, 2017

--

A função Filter recebe como parâmetro uma função de callback, onde o retorno dado será um novo array com os elementos que passaram na validação realizada. Lembrando que o array original não é alterado, trazendo assim um dos conceitos da programação funcional.

Um exemplo que irei demonstrar, iremos iterar um array de objetos com informações de usuários, onde estes possuem dados como nome, idade e amount do valor das vendas. Iremos efetuar um filtro para buscarmos os usuários que contém idade maior que 50.

Aqui se encontra nosso array de objetos de usuários:

Antes de demonstrarmos como o método funciona, como seria fazer tal filtragem sem a necessidade de utilizar filter? Iremos escrever uma função que irá filtrar os objetos com idade maior que 50. Seria algo mais ou menos assim:

1# Exemplo

Agora iremos utilizar o método filter, e você irá notar que o resultado será o mesmo com muito menos código. Criamos uma variável filterAgeEx1, onde iremos armazenar os usuários filtrados.

2# Exemplo

Utilizando arrow function, uma nova feature do ES6. Temos user como parâmetro, e o retorno em apenas uma linha. Como temos apenas um parâmetro, podemos optar por escrever sem os parênteses (). E como o retorno é somente de uma linha, podemos escrever sem as chaves {}.

3# Exemplo

Acho que podemos melhorar um pouco o código, pensando na usabilidade e em programação funcional.

4# Exemplo

E se quisermos filtrar usuários com outra idade? Neste caso a função acima fica inviável, sendo necessário escrever uma nova função.

5# Exemplo

Para entendermos melhor como a função filter é feita, iremos implementar algo baseado no que ocorre no método filter do array.
A função recebe como parâmetro um array e uma função callback. Declaramos um novo array e iteramos o array com for, efetuando a validação de cada elemento com a função test e adicionando no novo array caso a validação seja verdadeira, posteriormente o retorno é o novo array

--

--

Isac
Dipeex

Software Engineer and Facebook Community Lead. Follow me on Twitter https://www.twitter.com/@isac_sacramento