Lucas Silva
Lucas Silva16/08/2023 23:33
Compartilhe

Funções no JavaScript: Array.filter()

  • #JavaScript

Introdução

Listas são estruturas de dados que estão presentes no dia a dia de programadores. Cada linguagem de programação possui suas especificidades na implementação dessas estruturas, oferecendo diferentes métodos para se trabalhar com os dados nela armazenados.

O JavaScript oferece algumas funções especiais para manipular listas/arrays: as HOF's (High Order Functions). Estas, basicamente, são funções que podem receber como parâmetro outras funções e também podem retornar uma função como resultado do seu processamento 🤯. Aprenda sobre HOF's aqui.

Hoje vamos aprender sobre uma HOF que é muito útil para quem precisa filtrar dados em uma lista no JavaScript: filter().

Problematização

Vamos considerar o seguinte cenário: nos foi dada uma lista de clientes cadastrados em um site. Esta lista, inclui clientes com cadastros ativos e inativos, e precisamos filtrar a partir dela somente os cliente com cadastro ativo.

Segue abaixo nossa lista:

const clientes = [{
'nome': 'Lucas',
'ativo': true
 },
 {
'nome': 'Maria',
'ativo': false
 },
 {
'nome': 'Mateus',
'ativo': true
 },
 {
'nome': 'Renan',
'ativo': false
 },
 {
'nome': 'Julya',
'ativo': false
 },
 {
'nome': 'Jéssica',
'ativo': true
 }
];

Para filtrarmos esta lista, a solução mais intuitiva talvez seja estruturar um laço de repetição for:

const clientesAtivos = [];

for (let i = 0; i <= clientes.length - 1; i++) {
 if (clientes[i]['ativo']) {
clientesAtivos.push(clientes[i])
 }
};

console.log(clientesAtivos);
/* Saída:
[
 { nome: 'Lucas', ativo: true },
 { nome: 'Mateus', ativo: true },
 { nome: 'Jéssica', ativo: true }
]
*/

Criamos uma laço de repetição for cuja variável de controle i começa em zero, porque vamos utilizá-la para acessar as posições do array, que como sabemos, começa em 0. Essa variável será incrementada em +1 até que ela atinja a quantidade de elementos do array - 1, ou seja, a última posição do array, que é o seu número de elementos - 1.

Acessamos a chave ativo do objeto usando bracket notation(notação de colchetes). Como ela guarda um valor booleano, no bloco if, se for o valor for true o objeto será adiciona ao array clientesAtivos.

 

A solução acima funciona perfeitamente. Obteremos o resultado desejado. Porém, como programadores precisamos sempre pensar na melhor solução para um problema. Em muitos casos, haverão várias alternativas para solucionar o mesmo problema. E nestes casos, nosso trabalho é escolher a melhor alternativa para aquele problema, naquele contexto específico.

É possível resolver esse problema da filtragem da lista com código menor e maior legibilidade, diminuindo nossa chance erro e facilitando a vida de quem eventualmente venha a trabalhar no nosso código posteriormente.

filter()

filter() é uma HOF do JavaScript, cujo objetivo é filtrar dados de um array e armazenar o resultado em um novo array. Note que o filter() não faz alterações no array em que ele é usado, ele cria um novo array e armazena nele os valores que atendem ao critério do filtro aplicado.

A sintaxe do filter é a seguinte:

array.filter(function callback(valorAtual, indice, 
arrayOriginal) {});
  • callback: função que é aplicada em todos os elementos do array;
  • valorAtual: parâmetro obrigatório e é referente ao elemento que está sendo acessado no momento;
  • indice: parâmetro opcional. Representa a posição do valorAtual no array;
  • arrayOriginal: parâmetro opcional. Array original em que o valorAtual está armazenado;

Podemos observar que o filter recebe obrigatoriamente uma função como parâmetro. Essa função é uma callback (aprenda sobre callbacks aqui), que aplica um teste em cada elemento do array. Os valores que passam no teste são adicionados no novo array que é retornado pelo filter.

Vamos aplicar o filter para solucionar nosso problema de filtrar clientes ativos:

const clientesAtivosFilter = clientes.filter(cliente => 
cliente['ativo']);

console.log(clientesAtivosFilter);

/**
Saída:
[
 { nome: 'Lucas', ativo: true },
 { nome: 'Mateus', ativo: true },
 { nome: 'Jéssica', ativo: true }
]
*/

Sim, resolvemos o mesmo problema com uma única linha de código. Esse é o poder do JavaScript!

Vamos entender como tudo isso está funcionando:

  • chamamos o filter e passamos para ele uma callback usando uma sintaxe mais curta, conhecida como arrow function;
  • no parâmetro da callback, acessamos o elemento do array, que no caso é um objeto com as chaves nome e ativo;
  • acessamos a chave ativo, e sendo ela true o objeto será adicionado ao array criado e retornado pelo filter;

Vamos para um exemplo um pouco mais complexo. Considere a seguinte lista:

const produtos = [
 {id: 1, descricao: "Smartphone", categoria: "Eletrônico", preco: 1000},
 {id: 2, descricao: "Notebook", categoria: "Eletrônico", preco: 3000},
 {id: 3, descricao: "Geladeira", categoria: "Eletrodoméstico", preco: 1800},
 {id: 4, descricao: "Liquidificador", categoria: "Eletrodoméstico", preco: 150},
 {id: 5, descricao: "Fogão", categoria: "Eletrodoméstico", preco: 500},
 {id: 6, descricao: "AirFryer", categoria: "Eletrodoméstico", preco: 600},
 {id: 7, descricao: "PS5", categoria: "Eletrônico", preco: 4500},
 {id: 8, descricao: "Smart TV 50 4k", categoria: "Eletrônico", preco: 3200},
 {id: 9, descricao: "Monitor Gamer", categoria: "Eletrônico", preco: 1800},
 {id: 10, descricao: "Máquina de Lavar", categoria: "Eletrodoméstico", preco: 1600}
];

O desafio agora é filtrar esses produtos pela categoria(Eletrônico) e preço(a partir de 2000R$). A solução com filter ficaria assim:

 

const eletronicosCaros = produtos.filter(produto => produto.categoria === 'Eletrônico' && produto.preco >= 2000)

console.log(eletronicosCaros)

/**
Saída:
[
 {
id: 2,
descricao: 'Notebook',
categoria: 'Eletrônico',
preco: 3000
 },
 { id: 7, descricao: 'PS5', categoria: 'Eletrônico', preco: 4500 },
 {
id: 8,
descricao: 'Smart TV 50 4k',
categoria: 'Eletrônico',
preco: 3200
 }
]
*/

Conclusão

filter é um recurso poderoso que dispomos no JavaScript para trabalharmos com listas. Existem várias outras HOF's no JavaScript e você pode conferir algumas aqui.

Disponibilizei esses códigos que usei como exemplo em um repositório no meu GitHub. Fique à vontade para clonar, criar fork's e praticar.

Sugestões e feedbacks são sempre bem-vindos. Você pode me contactar no LinkedIn.

Espero que este conteúdo tenha sido útil de alguma forma.

Até mais! 😄

Compartilhe
Comentários (0)