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! 😄
