JavaScript

JavaScript filter: situações e exemplos de como utilizar o filter

25 de abril de 2022

JavaScript filter: situações e exemplos de como utilizar o filter

Neste artigo você vai aprender a utilizar o JavaScript filter, quais as melhores situações para utilizar este método de array

JavaScript filter capa

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:

Curso de JS

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!

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x