Aprender a filtrar dados é mais uma habilidade essencial na programação. Afinal, na maioria das vezes, o trabalho de um programador se resume a filtrar informações e exibi-las para o usuário.
Todas as linguagens de programação têm seus métodos e funções para lidar com filtragem. Neste artigo, você aprenderá a fazer isso usando JavaScript.
Muitos métodos de filtragem: quais as diferenças
Os métodos find ( ), findIndex ( ), filter ( ) e some ( ) têm uma coisa em comum: todos eles usam como argumento uma função do tipo predicado.
Predicado é uma função que avalia uma expressão e retorna verdadeiro (true) quando a condição é satisfeita ou falso (false) quando não é.
Então, pode-se dizer que todos esses métodos percorrem a Array e analisam cada elemento para ver qual deles satisfazem uma condição especificada.
E o que eles têm de diferente? A diferença para cada método é o que ele retorna como resultado. Vamos ver mostrar essas diferenças agora, e você poderá escolher qual desses métodos será necessário para o seu código.
Usando find ( )
O método find ( ) retorna o primeiro elemento que satisfaz a uma condição especificada.
Observe o exemplo abaixo. Há uma lista de navegadores de internet com seus anos de lançamento. Como obter o primeiro navegador cujo ano de lançamento é maior que 2000? Vejamos:
const list = [
{ name: "Internet Explorer", year: 1995 },
{ name: "Netscape", year: 1994 },
{ name: "Firefox", year: 2004 },
{ name: "Chrome", year: 2008 },
{ name: "Safari", year: 2003 }
];
const browser00 = list.find((browser) => {
return browser.year > 2000;
});
console.log(browser00); // Retorna: {name: "Firefox", year: 2004}Vou explicar detalhadamente as linhas desse código, pois os outros métodos executam uma operação extremamente semelhante que dispensará a repetição de explicações.
Veja o valor da constante browser00. Note que ela recebe como valor o resultado da busca usando list.find ( ).
O primeiro argumento de find ( ) é uma função anônima com 1 argumento denonimado browser. O argumento browser receberá como valor o primeiro elemento da Array list e depois irá comparar o valor da chave year para ver se ela é maior do que 2000.
Leia também: "O que são Funções Anônimas no JavaScript" (nova aba).
Se a condição for verdadeira (true), então, o método find ( ) encerrará ali mesmo e retornará elemento do loop atual para a constante browser00.
Se a condição for falsa (false), então, o método find ( ) repetirá o processo com o segundo, depois com o terceiro, quarto, quinto elemento até chegar no último. Se, em nenhum elemento, a condição avaliada for verdadeira, então o método find ( ) retornará undefined, e este será o valor da constante browser00.
Copie o código acima e veja se ele funcionará tal qual eu expliquei aqui. Essa é a melhor maneira para você tirar suas dúvidas.
Note que o método find ( ) retornará sempre o primeiro elemento da lista. Isso significa que, mesmo que haja outros elementos depois dele que satisfaçam a condição desejada, find ( ) não os levará em conta.
Agora vamos ver um método semelhante e que não deve ser confundido com find ( ).
Usando findIndex ( )
O método findIndex ( ) retorna o índice do primeiro elemento que satisfaz a uma condição especificada. Diferente de find ( ), visto anteriormente, findIndex ( ) retorna um valor do tipo number que representa o índice do elemento dentro da Array.
Observe o exemplo abaixo. Agora há uma lista de linguagens de programação com seus respectivos anos de lançamento. Como descobrir o índice da primeira linguagem da lista que foi lançada em 1985? Vejamos:
let list =
[
{ "language": "Java", "year": 1995 },
{ "language": "Python", "year": 1991},
{ "language": "JavaScript", "year": 1995 },
{ "language": "C++", "year": 1985 },
{ "language": "C", "year": 1972 }
];
const index = list.findIndex((item) => {
return item.year == 1985;
});
console.log(index); // Retorna 3Nesse caso, ao usar o método findIndex ( ) e realizar uma comparação simples, descobrimos que o índice do elemento que estamos procurando é o 3. É importante lembrar que os índices de uma Array são contados a partir do 0 (zero).
Note que o método findIndex ( ) retornará sempre o índice do primeiro elemento da lista. Isso significa que, mesmo que haja outros elementos depois dele que satisfaçam a condição desejada, findIndex ( ) também não os levará em conta.
Vamos ver agora um método que ajudará você a obter mais de 1 elemento.
Usando filter ( )
O método filter ( ) retorna uma Array com todos os elementos que satisfazem uma condição especificada. Diferente do find ( ) e do findIndex ( ) vistos até agora, o filter ( ) é o verdadeiro filtro de dados desse artigo.
Observe o exemplo abaixo. Há uma lista de empresas fabricantes de celular com seus respectivos anos de fundação. Como obter todas as empresas antes de 1950? Vejamos:
let list = [
{ id: 0, name: "Huawei", year: 1987 },
{ id: 1, name: "Samsung", year: 1938 },
{ id: 2, name: "Apple", year: 1976 },
{ id: 3, name: "Nokia", year: 1865 },
{ id: 4, name: "LG", year: 1947 }
];
const before1950s = list.filter(element => {
return element.year < 1950;
});
console.log(before1950s);Agora sim, foi possível filtrar os dados de fato! Ao comparar a propriedade year com o ano 1950, foram adicionados 2 elementos à constante before1950s. Se checarmos o valor dela, veremos o seguinte:
[
{ id: 1, name: "Samsung", year: 1938 },
{ id: 4, name: "LG", year: 1947 }
]Através desse exemplo, você consegue perceber o poder desse método. É realmente algo que vale a pena aprender, não concorda?
Diferente dos métodos anteriores, filter ( ) não é encerrado quando um elemento não satisfaz a condição. Ele continua até o final da Array e segue salvando cada elemento na variável utilizada.
Esse método não altera a Array original. Se você checar o valor da variável list, verá que ela manteve os valores originais e não foi alterada.
Bom, por último, vamos aprender a usar o método some ( ) e saber o que ele faz.
Usando some ( )
O método some ( ) retorna se algum elemento satisfaz a uma condição especificada. Diferente dos outros, some ( ) retorna um valor do tipo booleano: true ou false.
Observe o exemplo abaixo. Há uma lista de redes sociais com seus respectivos anos de lançamento. Como saber se existe alguma rede social antes de 2005? Vejamos:
let social = [
{name: "Facebook", year: 2004},
{name: "Twitter", year: 2006},
{name: "Instagram", year: 2010},
{name: "Snapchat", year: 2011},
{name: "TikTok", year: 2016}
];
const less05 = social.some(site => {
return site.year < 2005;
});
console.log(less05); // Retorna: trueBasta usar o método some ( ) e comparar o ano com 2005. Nesse caso, visto que existe pelo menos 1 elemento que satisfaz à condição, o método retornará true. Se houvessem outros elementos que satisfizesse à condição, ele retornaria true igualmente.
Conclusão
Talvez você perceba que algumas desses métodos são mais úteis para o seu projeto do que outros. Será que é possível filtrar dados sem usar esses métodos? Sim, mas você terá o trabalho de fazer um loop dentro da Array todas as vezes, o que vai resultar num código não tão otimizado quanto poderia ser.
Entender esses métodos pode ser um degrau difícil para subir, mas depois que você consegue, com certeza perceberá que valeu a pena. O importante é continuar aprendendo e trabalhando com os conhecimentos que você têm em mãos para ampliar cada vez seu potencial e suas habilidades na programação! d:
