Esse artigo tem como objetivo explicar o funcionamento da função de Array: Filter.

Introdução

Saber trabalhar com Arrays, se tornou algo imprescindível para todo desenvolvedor/desenvolvedora que trabalhar com a linguagem JavaScript. Saber manipulá-los pode ser um diferencial para quem quer se destacar com a linguagem, que utiliza tanto dessa estrutura de dados.

Os arrays utilizam de várias ferramentas, métodos e funções, como mapear, filtrar, valor acumulados, retornar índices, retirar membros do array, adicionar, e etc. Esse artigo pretende abordar, de forma clara, um desses métodos, que é muito utilizado: Filter.

Conceituando

Filter foi implementado na norma do ECMASCRIPT 2015. Array também é considerado como Objeto em Javascript, tendo o seu Prototype. Logo o Filter também está incluso dentro do prototype de Array.

Se executarmos o comando abaixo, acessando o prototype de Array, e exibindo no console, veremos que o Filter está incluso.

console.log(Array.prototype)

Definição

Na prática, o Filter, literalmente, funciona como um “filtro”, onde através de um Array, já criado, ele consegue retornar um novo Array, normalmente com a quantidade de elementos diferente do Array original, sem afetar diretamente o Array original, retornando só aquilo que foi permitido na lógica implementada na função callback.

Sintaxe do Filter

let arr = array.filter(callback(itemAtual, indiceAtual, arrayOriginal){

})

Exemplo 01 - abaixo para filtrar de um Array apenas números divisíveis por 10:

const arr = [10, 15, 20, 25, 30]
arr.filter((itemAtual, indiceAtual, arrayOriginal)=>{
if(itemAtual % 10 === 0)
  console.log(`Item: ${itemAtual} - Índice: ${indiceAtual} - Array original: ${arrayOriginal}\\n`)
})

Isso vai exibir no console:

Geralmente, o que vai interessar mais para nós, nesse caso, são os Itens retornados, e na prática serão eles que vamos utilizar para retornar um Array filtrado. Desse forma, podemos diminuir a complexidade do código, deixando apenas um argumento na função Callback (função argumento) que vai apontar para da item do array original. No exemplo citado acima, apenas foi exibido os valores que o Filter retornou, mas também, podemos pegar esse retorno e atribuir a uma variável que vai se tornar esse novo Array.

Exemplo 02

const arr = [10, 15, 20, 25, 30]
const ehDivisivelPorDez = arr.filter((itemAtual) => {
if (itemAtual % 10 === 0)
  return itemAtual
})

console.log(ehDivisivelPorDez)

O resultado, será o retorno apenas dos “itens” que foram exibidos no exemplo acima:

O filter, ou qualquer função de Array no Javascript, é de fato um facilitador na vida do Desenvolvedor. Porém, é interessante entendermos o funcionamento dessa e outras funções mais afundo. Entendendo por baixo dos panos o que está acontecendo no Filter, vai nos ajudar na tomada de decisão na hora de desenvolver um projeto prático.

Entendendo o funcionamento do Filter

Quando se trata de estudar qualquer função de Array em Javascript, é interessante tentar simular o comportamento de cada função por baixo dos panos. E para nos auxiliar nisso, podemos utilizar o laço-for para simular o comportamento da função.

Quando utilizamos uma função de Array em JS, ela estará iterando por dentro do Array original, onde a cada iteração estará apontando para um elemento de um determinado Array. No caso do Filter, o elemento só será retornado caso esse elemento atenda à lógica implementada na função Callback, conforme mencionado anteriormente.

Dessa forma, iterando com o laço-for, conseguimos “simular” o comportamento do Filter.

Utilizando a mesma lógica do Exemplo 02 com o laço-for:

const arr = [10, 15, 20, 25, 30]
const ehDivisivelPorDez = []

for(let i = 0; i < arr.length; i++){
if(arr[i] % 10 === 0){
  ehDivisivelPorDez.push(arr[i])
  // O método push() é uma função que adiciona um
  // novo elemento ao array
}
}

console.log(ehDivisivelPorDez)

Dessa forma, teremos o mesmo resultado, que tivemos no exemplo 2, no console.

Exemplo prático

Aqui segue um exemplo prático em NodeJS. Um array de objetos que compõe uma lista de alimentos.

const alimentos = [
{
  alimento: "maçã",
  tipo: "fruta",
  classificacao: "B"
},
{
  alimento: "banana",
  tipo: "fruta",
  classificacao: "C"
},
{
  alimento: "feijão",
  tipo: "grãos",
  classificacao: "A"
},
{
  alimento: "cenoura",
  tipo: "legumes",
  classificacao: "C"
},
{
  alimento: "tomate",
  tipo: "fruta",
  classificacao: "B"
},
{
  alimento: "uva",
  tipo: "fruta",
  classificacao: "B"
},
{
  alimento: "arroz",
  tipo: "grãos",
  classificacao: "B"
},
{
  alimento: "café",
  tipo: "grãos",
  classificacao: "A"
},
{
  alimento: "chuchu",
  tipo: "legumes",
  classificacao: "B"
},
]

• Filtrar apenas alimentos que são do tipo fruta

const tipoFrutas = alimentos.filter(alimento => alimento.tipo === "fruta")
console.log("Alimentos do tipo fruta: ")
console.log(tipoFrutas)

o resultado será um array com alimentos de tipo “fruta”

Filtrar alimentos que são do tipo grãos

const tipoGraos = alimentos.filter(alimento => alimento.tipo === "grãos") 
console.log("Alimentos do tipo grãos: ") 
console.log(tipoGraos) 
console.log()

Resultado

Filtrar elementos de classificação A

const classificacaoA = alimentos.filter(alimento => alimento.classificacao === "A") 
console.log("Alimentos de classificação A: ") 
console.log(classificacaoA) 
console.log()

Resultado será:

Também é possível realizar o encadeamento de um filter em outro filter, sendo possível realizar mais de um filtro, deixando os dados ainda mais afunilados.

const tipoGraosClasseA = alimentos.filter(alimento => alimento.tipo === "grãos").filter(alimento => alimento.classificacao === "A") 
console.log("Alimentos de tipo grãos e classificação A: ") 
console.log(tipoGraosClasseA) 
console.log()

Resultado será:

Notem que não foi retornado arroz, pois apesar de ser do tipo grão, porém sua classificação é B, o retorno disso ficou semelhante ao exemplo anterior.

Referências:

https://developer.mozilla.org/pt-BR/docs/Glossary/Callback_function

https://horadecodar.com.br/javascript-filter-situacoes-e-exemplos-de-como-utilizar-o-filter/

https://web.dio.me/articles/dica-para-estudar-metodos-de-array-em-javascript?back=%2Farticles&page=1&order=oldest

Grato à, mais uma vez, DIO pela oportunidade.