Neste artigo você vai aprender a utilizar o JavaScript filter, quais as melhores situações para utilizar este método de array
Fala programador(a), beleza? Bora aprender mais sobre métodos de array!
Em JavaScript temos diversas funções próprias para matrizes, como: map, filter e reduce
Como funciona o JavaScript filter
O filter é uma função que é utilizada em arrays, e o resultado final dela é um novo array
Este é gerado por meio da aplicação de uma função, que faz o filtro de alguns elementos
A função é um argumento do método filter
Vamos ver uma utilização básica do mesmo:
const arr = [1, 2, 3, 4, 5] const greaterThanTwo = arr.filter((n) => { return n > 2 }) console.log(greaterThanTwo) // [3, 4, 5]
No início temos a criação de um array na variável arr
Depois é iniciada uma nova variável que cria um array apenas com elementos maiores que 2
A função anônima inserida em filter compara o número atual, verificando se ele é maior que dois
Ou seja, o filtro é a função anônima
Note que após a impressão temos o resultado de [3, 4, 5]
Sintaxe do método filter
Apesar de ter sido exibida a sintaxe no exemplo anterior, é bom entender passo a passo como o método é executado
Veja este exemplo:
const newArray = oldArray.filter((x) => x != y)
Da esquerda para direita: temos a criação da nova variável, aqui chamada de newArray, baseada no retorno de filter
O retorno é baseado na execução da função, mas primeiro temos que passar um array base, que aqui é chamado de oldArray
A notação de ponto junto da função filter, indica que um método foi executado no array
Isso é possível pois todos os dados em JavaScript são considerados objetos, ou seja, tem métodos e propriedades
Nos argumentos de filter temos a função, que aqui representamos por uma arrow function
Nela há um argumento x, que é um dos itens do array, o filter nada mais faz que uma repetição em cada um dos itens
Por isso o x muda de valor automaticamente!
Depois temos uma comparação sendo realizada, com base nisso o valor é retornado para formar o novo array
Os argumentos do método JavaScript filter
Filter pode acessar o item atuação da iteração do array, isso já vimos
Mas há também outras possibilidades, podemos também acessar: o índice do elemento e o array original
Veja o exemplo abaixo:
const arr = [1, 2, 3, 4, 5] const evenArray = arr.filter((n, i, arr) => { console.log(n) console.log(i) console.log(arr) if(n % 2 === 0) { return n; } }) console.log(evenArray) // [2, 4]
No caso acima temos um filter que retorna um array de números de pares
Porém o grande detalhe são os novos argumentos que colocamos dentro da função anônima de filter
Veja que temos i e arr, antes era apenas o primeiro, que representa o item atual
Eles signficam:
- n: item atual da iteração;
- i: índice do item atual;
- arr: array original;
Note também que podemos chamar estes argumentos de qualquer número, apenas devemos respeitar a ordem dos mesmos
E gostaria de frisar que o método filter sempre retorna um novo array, com o resultado dos items que retornam da função
Outra informação importante é que qualquer tipo de array serve, apesar de neste exemplo estarmos utilizando apenas numéricos para facilitar a compreensão do método filter
Um outro exemplo com filter
Vamos agora trabalhar com uma situação diferente: temos um array de nomes, e queremos apenas os nomes maiores
Estes nomes são categorizados por terem mais de 5 caracteres
Precisamos então validar a propriedade length da string, e checar se ela é maior que cinco
Veja na prática:
const names = ["João", "Matheus", "Rodrigo"] const bigNames = names.filter((name) => { return name.length > 5 }) console.log(bigNames) // ["Matheus", "Rodrigo"]
Aqui estamos trabalhando com um array de strings
Veja que o processo é o mesmo, apesar do tipo de dado ser diferente
Como a instrução é simples, não precisamos nem da cláusula if
O retorno é atribuído através da comparação do dado na instrução return
Filter e os navegadores
O filter foi adicionado na versão ES5 de JavaScript, ou seja, não é tão antigo assim
Por este motivo pode não estar presente nos navegadores
Uma vez que a linguagem JS precisa estar no computador da pessoa, mais especificamente nos navegadores
Cada empresa que desenvolve um navegador, tem que adaptar as novas versões de JS para ele
Isso pode acabar demorando, pois nem sempre é a prioridade destas empresas
Então o que recomendo é verificar no site Can I Use se o navegador que você precisa entregar o projeto pode utilizar o método
O link diretamente para o método filter é este aqui
Ebook sobre JavaScript Avançado
Se você deseja se especializar em JS, eu escrevi um ebook que pode te ajudar!
Ele é totalmente gratuito e a minha intenção foi abordar recursos do JS que são super importantes, e muitas vezes passam despercebido
Você pode fazer o download clicando aqui
JavaScript é uma linguagem que considero fácil de aprender, mas seu escopo é bem amplo
Pois temos a possibilidade de trabalhar tanto no front-end como no back-end
Então esta gama de recursos pode afastar um pouco os iniciantes, mas o ebook tem como objetivo suaviar a sua curva de aprendizado em JavaScript
Outros exemplos com filter
No nosso blog temos alguns exemplos mais complexos utilizando o filter
É importante você ler para entender melhor outros casos de uso
O primeiro indico é: Filtrar objetos baseado nos atributos
E o segundo é: Encontrar valores não únicos em um array
Nestes dois artigos ensino você a como resolver problemas do dia a dia de um programador com método filter
Estas soluções podem até te dar futuros insights em problemas que você terá pela frente 🙂
Curso de JavaScript gratuito
Também produzi um curso de JS gratuito no meu canal de YouTube, você pode conferir em:
Este curso possui quase duas horas, e é bom para quem deseja aprender desde os fundamentos da linguagem até recursos mais avançados
Então ele serve para quem é totalmente iniciante, e quer conhecer JavaScript
E também para quem já conhece um pouco de JS, e quer polir algumas arestas, reforçando conhecimentos já aprendidos e adquirindo novos
Não se esqueça de deixar aquele like e também se inscrever no canal, isso me ajuda muito!
Outros métodos de array de JavaScript
Diversos métodos foram adicionados aos arrays ao longo da evolução de JavaScript
Temos alguns que são muito famosos, e cabe citar aqui neste artigo
- forEach: executa uma iteração a cada elemento do array;
- map: executa uma iteração em cada elemento do array, e retorna os mesmos para a criação de um novo array, com as modificações;
- reduce: reduz todos os elementos do array a um só;
Estes métodos de array são de grande importância para trabalhar com frameworks de JS
Ferramentas como: Vue.js, React.js e Angular, utilizam muito as novas funcionalidades de JavaScript
Por isso é bom sempre estar se atualizando e aprendendo o que de mais moderno a linguagem tem a oferecer
Soluções e alternativas para o filter
Caso haja alguma razão ou motivo para não utilizar o filter você pode ter outras abordagens
A mais comum seria reproduzir a funcionalidade da função em uma estrutura de loop comum, como for ou while
E a mais avançada seria o polyfill
O polyfill é uma alternativa semelhante a função, feita com recursos padronizados de JS em todos os navegadores
Que geralmente chamado de JavaScript vanilla
Ou seja, pessoas experientes na linguagem se unem para criar polyfills e resolver o problema em todos os navegadores, para não haver problema de compatibilidade
Porém vale ressaltar que as funções feitas pelos criadores da linguagem acabam sendo mais performática
Então sempre que você puder optar por uma função nativa, use-a
Pois você estará escolhendo a melhor alternativa para quem vai consumir o software que você desenvolve
Os polyfills devem ser utilizados em casos mais extremos, por exemplo: garantir que a aplicação funcione plenamente em Internet Explorer antigo
Outra possível abordagem é desabilitar a aplicação para estes navegadores, o que hoje em dia está acontecendo muito
Pois a quantidade de pessoas que utilizam ferramentas defasadas diminui a cada dia, e talvez elas não sejam os clientes ideais para o seu projeto
O grande segredo é definir na concepção do projeto onde ele será utilizado e também qual público que vai consumir
Não esquecendo também das versões que precisaremos garantir compatibilidade
Conclusão
Neste artigo você aprendeu sobre JavaScritp filter, que é um método de array adicionado na versão ES5
Ele recebe como argumento uma função anônima, que será executada em cada um dos itens da lista
Nesta função podemos acessar os itens individualmente, e o retorno dela será um novo array
Este novo array é criado baseado na lógica que a função anônima executa sobre os itens, os retornados são incluídos no novo array
O método filter não modifica o array original, em que o método é executa
Uma sugestão interessante que posso te dar é: busque por outros métodos de array, pois eles podem facilitar muito a sua vida na hora de programar
JavaScript possui diversos, citei alguns ao longo do artigo, porém há outros importantes também
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!