Entendendo a Função Filter()

Se você programa em JavaScript sabe da importância dessa função, mas se está iniciando talvez tenha algumas dúvidas do propósito dela e como utilizar em seu código. Vamos entender isso com uma breve explicação e treinando muito!

Objetivo da função

Como o próprio nome diz o objetivo é realizar filtros, ele percorre o array e cada elemento que retornar true, conforme a condição passada dentro da função filter(), será inclusa dentro do novo array. Mas como podemos fazer isso? A melhor maneira de começar a entender é com um exemplo simples:

[1, 2, 5, 7, 8, 10]

Vamos realizar um filtro. A lógica aplicada na função (que será representada por fn) é ter apenas os valores maiores que cinco dentro do novo array que será gerado. Então se utilizarmos o filter(fn) ele vai retornar com:

[7, 8, 10]

Note que apenas os valores maiores que cinco foram inclusos dentro do novo array, isso acontece porque esses elementos são verdadeiros (true) enquanto os outros que não estão inclusos dentro do novo array são falsos (false). Então a verificação que o filter() realiza é um boolean.

Você deve estar se perguntando se é possível o filter() retornar um novo array com o mesmo numero de posições do original, igual o map() faz. Sim isso é possível, mas vai depender muito da lógica implementada para realizar o filtro, na maioria dos casos dificilmente vamos ver o mesmo número de posições que o array original.

Vamos aplicar agora um exemplo mão na massa para você mesmo treinar, vamos fazer esse exemplo utilizando de um array de objetos, lembrando que a notação (sintaxe) para objetos é {}:

const estudante = [
 { nota: 1 },
 { nota: 2 },
 { nota: 5,},
 { nota: 7 },
 { nota: 8 },
 { nota: 10 },  
]

Agora temos que implementar a lógica. Para isso vamos determinar que queremos dentro do novo array filtrado apenas notas maiores que 5:

const regra = item => item.nota > 5

Agora vamos juntar tudo e adicionar o filter() que será responsável em percorrer o array e verificar se cada elemento do array de objetos é verdadeiro ou falso, mas para isso temos que adicionar dentro do filter a nossa regra, a lógica, que é a nossa constante regra:

const estudante = [
    { nota: 1 },
    { nota: 2 },
    { nota: 5 },
    { nota: 7 },
    { nota: 8 },
    { nota: 10 },  
   ]
   const regra = item => item.nota > 5
   const resultadoDaRegra = estudante.filter(regra)
   console.log(resultadoDaRegra)

O resultado é o que já esperamos, um novo array apenas com notas maiores que cinco:

Lembre sempre que foram adicionados dentro do novo array apenas os valores que corresponderam como verdadeiro (true), os falsos (false) não estão dentro do array. Então o filter() percorreu o array conforme a lógica da função que passamos dentro dele filter(regra), e verificou se 1 é maior que 5? Falso, 1 não é maior que 5, então não irá incluir dentro do novo array. O número 5 é maior que ele mesmo? Não, isso é falso então ele não fará parte do novo array de objetos, mas o número 7 é maior que 5, isso é verdade, então ele será adicionado e assim por diante.

Vamos agora fazer um outro exemplo, com string. Neste exemplo, apenas vamos filtrar resultados que correspondem com a string 'São Paulo', para isso vamos também criar uma const que recebe um array de objetos:

const cidades = [
    { city: "Campinas" },
    { city: "Rio de Janeiro" },
    { city: "São Paulo" },
    { city: "São Bernardo do Campo" },
    { city: "London"},
    { city: "New York" },
]

Agora temos que determinar qual cidade queremos filtrar:

const selecionaCidade = item => item.city === 'São Paulo'

Bom agora falta apenas fazer o filter():

const cidades = [
    { city: "Campinas" },
    { city: "Rio de Janeiro" },
    { city: "São Paulo" },
    { city: "São Bernardo do Campo" },
    { city: "London"},
    { city: "New York" },
]
const selecionaCidade = item => item.city === 'São Paulo'
const filtroDaCidade = cidades
    .filter(selecionaCidade)
console.log(filtroDaCidade)

O que estamos fazendo é outro filtro, onde será percorrido o array de objetos e queremos que apenas seja adicionado o valor que corresponder a São Paulo. Qualquer outra string será desconsiderada e não estará dentro do array filtrado, pois a verificação que estamos fazendo vai retornar que apenas São Paulo é verdadeiro, outros resultados serão falsos:

Temos muitos exemplos a serem explorados, mas esses que foram abordados são simples e facilitam compreender o que o filter realmente faz, resumindo ele vai retirar ou manter os elementos conforme a lógica da função passada dentro dele e isso significa que dependendo da lógica aplicada, o novo array pode estar vazio, conforme a imagem abaixo:

Note que a lógica era que só deveria ser incluso dentro do novo array o resultado que fosse estritamente igual === a Florianópolis, mas não existe essa cidade dentro do nosso array de objetos, que é nossa const cidades . Por isso o novo array não contem elementos dentro dele e está vazio [], pois quando ele percorreu não encontrou nada que correspondesse ao valor que foi determinado.

Conclusão

Espero que tenha ficado claro o que a função filter() faz e como utilizar ela. É uma função muito usada e que você sempre terá que aplicar em projetos tanto pessoais ou dentro da empresa na qual atua. É importante que você pratique em casa, estude e pratique mais ainda até fixar bem. Faça testes e tente fazer outras lógicas. Divirta-se estudando!

A extensão usada para geral os resultados no terminal do VSCode foi a Code Runner.

Fico por aqui neste post, agradeço por ler. Se tiver alguma dúvida deixe nos comentários ou pode entrar em contato pelo meu LinkedIn . Muito obrigado e até o próximo post. 😉🚀