Bora dar um Filter com Javascript?

Bom, falar de funções em Javascript é basicamente revelar a beleza da programação FrontEnd. O que seria de nós desenvolvedores FrontEnd sem essa linguagem e as suas incríveis habilidades, não é mesmo? Como seria a web sem o Javascript e o que seria do JavaScript sem as funções? Que tal conhecer uma função que vai “filtrar” todas essas emoções e deixar seu dia um pouco mais interessante? Vamos falar da Função Filter do JavaScript!

O que são funções?

Vamos partir do começo, certo? Funções são, de acordo com Mozila, blocos de construção fundamentais em JavaScript. Uma função é um procedimento de JavaScript - um conjunto de instruções que executa uma tarefa ou calcula um valor. Para usar uma função, você deve defini-la em algum lugar no escopo do qual você quiser chamá-la.

Para simplificar são instruções que serão executadas sempre que for necessário, podendo ser programada ou resultado de evento/ação, por exemplo: escovar os dentes todas as manhãs, são um conjunto de instruções que são executadas todos os dias, mas, lavar o carro só é uma função executada quando tem sol, entendeu?

Falar de funções dentro do JavaScript é um assunto muito importante, porém é um universo gigantesco, existem várias opções e funcionalidades que vão de acordo com a sua necessidade, trabalhar com funções e com programação no geral não é apenas escrever códigos, o importante é conhecer bem, e, principalmente, entender bem o que se está fazendo.

O que criar com a função Filter?

Apenas aplicar um trecho de código, ou até mesmo copiar e colar sem entender o que está acontecendo por trás, pode te deixar em maus lençóis. Por isso vamos conhecer a função Filter e desde já filtrar tudo que o JavaScript pode nos oferecer na hora de deixar o nosso projeto mais interessante. Bom, a função filter tem como propósito, como você já deve imaginar, filtrar algo, parece obvio, mas vou te mostrar que é muito interessante.

Segundo a documentação disponibilizada no site do Mozilla, o Filter() cria uma cópia rasa de uma parte de uma determinada matriz, filtrada apenas para os elementos da matriz fornecida que passam no teste implementado pela função fornecida, ou seja, a função Filter irá analisar um Array inicial e filtrar o conteúdo interno dele e gerar um novo Array com as informações resultantes. Eu sei, parece muito simples, e até óbvio demais, mas vou te mostrar na prática como isso é interessante, vamos analisar como funciona na prática a utilização do Filter.

Agora que vimos como a função funciona vamos a alguns exemplos práticos. Primeiro vamos mudar a ordem dos valores do array inicial do exemplo acima:

// Exemplo filtrando números pares
const numeros = [ 5, 6, 3, 2, 1, 4, 7 ];
const parNumeros = numeros.filter (num => num % 2 === 0);
console.log ( parNumeros ); // Será impressos os mesmos valores: [6, 2, 4]

A ordem do conteúdo dentro do array inicial não importa, o filter vai analisar todos os dados e retornar os valores que foram encontrados, porém o resultado será impresso de acordo com a ordem que estava no array inicial. Para ficar mais claro, na imagem de explicação o resultado era [2, 4, 6] porque foi o resultado encontrado pelo array filtrado. Já no código acima, o resultado foi [6, 2, 4] porque foi a posição encontrada pelo filter dentro do array inicial.

Muito legal né? Agora vamos dar uma aprofundada nessa função. Sabemos que ela lida bem com números em um array, mas ela consegue fazer o que mais? Bom, para ser sincero o seu é o limite! Vamos ver como tratar textos dentro do Filter.

// Exemplo filtrando palavras com mais de 6 letras
const frutas = ["Laranja","Maça","Banana","Tangerina","Morango","Melão","Kiwi","Melancia","Uva"];
const letrasFrutas = frutas.filter((frutas) => frutas.length > 6);
console.log(letrasFrutas); // Será impresso: [ "Laranja", "Tangerina", "Morango", "Melancia" ]

Legal, mas consigo lidar com vários tipos de informações dentro do mesmo filtro? Sim, tudo o que podemos inserir em um array, pode ser tratado pela função Filter. Vamos ver um exemplo que recebe alguns alunos e esses alunos são compostos por campos de nome, idade, curso e sexo. Primeiro vamos filtrar quais são os alunos maiores de idades.

const alunos = [
{ nome: "Naiara", idade: 31, curso: "Recursos Humanos", sexo: "Feminino" },
{
  nome: "Ana Luíza",
  idade: 13,
  curso: "Informática Junior",
  sexo: "Feminino",
},
{
  nome: "Igor",
  idade: 28,
  curso: "Desenvolvimento JavaScript",
  sexo: "Masculino",
},
{
  nome: "Alice",
  idade: 25,
  curso: "Sistemas de Informação",
  sexo: "Feminino",
},
{
  nome: "Matheus",
  idade: 29,
  curso: "Desenvolvimento Java",
  sexo: "Masculino",
},
{ nome: "Pedro", idade: 17, curso: "Informáica Avançada", sexo: "Masculino" },
];
const maiorIdade = alunos.filter((alunos) => alunos.idade >= 18);
console.log(maiorIdade);


/* Será impresso: [
{
  nome: 'Naiara',
  idade: 31,
  curso: 'Recursos Humanos',
  sexo: 'Feminino'
},
{
  nome: 'Igor',
  idade: 28,
  curso: 'Desenvolvimento JavaScript',
  sexo: 'Masculino'
},
{
  nome: 'Alice',
  idade: 25,
  curso: 'Sistemas de Informação',
  sexo: 'Feminino'
},
{
  nome: 'Matheus',
  idade: 29,
  curso: 'Desenvolvimento Java',
  sexo: 'Masculino'
}
]
*/

Agora vamos filtrar os alunos que são maiores de idade e que são do sexo feminino.

const alunos = [
{ nome: "Naiara", idade: 31, curso: "Recursos Humanos", sexo: "Feminino" },
{
  nome: "Ana Luíza",
  idade: 13,
  curso: "Informática Junior",
  sexo: "Feminino",
},
{
  nome: "Igor",
  idade: 28,
  curso: "Desenvolvimento JavaScript",
  sexo: "Masculino",
},
{
  nome: "Alice",
  idade: 25,
  curso: "Sistemas de Informação",
  sexo: "Feminino",
},
{
  nome: "Matheus",
  idade: 29,
  curso: "Desenvolvimento Java",
  sexo: "Masculino",
},
{ nome: "Pedro", idade: 17, curso: "Informáica Avançada", sexo: "Masculino" },
];
const maiorIdadeSex = alunos.filter(
(alunos) => alunos.idade >= 18 && alunos.sexo === "Feminino"
);
console.log(maiorIdadeSex);


/* Será impresso:
[
{
  nome: 'Naiara',
  idade: 31,
  curso: 'Recursos Humanos',
  sexo: 'Feminino'
},
{
  nome: 'Alice',
  idade: 25,
  curso: 'Sistemas de Informação',
  sexo: 'Feminino'
}
]
*/

Conclusão

Muito legal né, e essas são apenas algumas das utilidades da função Filter, para se ter uma ideia é possível utilizar essa função em lojas virtuais e filtrar por produtos em promoção por exemplo, ou até mesmo utilizar para autocomplete como a imagem a seguir:

Referências:

Documentação oficial: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Functions

Documentação oficial: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filter