O objetivo deste artigo é abordar de uma forma simples como utilizar esses métodos que temos a disposição no JavaScript. Então vamos logo aprender!
Find()
O método (função) tem como objetivo retornar apenas o primeiro valor que corresponder verdadeiro para a busca de um elemento que está dentro de um array ou objeto. Como o próprio nome nos sugere ele encontra esse elemento dentro do array e nos retorna o valor dele. Então para que tudo fique claro vamos para o primeiro exemplo:
const encontrar = ['Carro', 'Barco', 'Avião'].find(a => a === 'Avião');
console.log(encontrar);
Temos o array e dentro dele 3 elementos que são strings. O que o find() fará é percorrer esse array, verificando se cada elemento é igual a string que passamos como regra dentro do método. Então ele vai percorrer a primeira posição do array e vai verificar se é verdadeira ou falsa, se for falsa ele parte para a próxima e se for verdadeiro ele retorna o valor para nós e finaliza a busca. Neste caso teremos o seguinte resultado:
Se ele chegasse no fim do array e não encontrasse nada que correspondesse ao resultado que passamos dentro do método find(), o retorno seria undefined. Uma coisa importante a se destacar é que se tivéssemos mais elementos dentro do array e que correspondesse a palavra Avião, ele não exibiria pois ele termina a verificação no primeiro elemento do array que retornar true. Mais um exemplo para provar isso:
const encontrar = ['Boeing', 'Barco', 'Avião', 'Avião1'].find(a => a.startsWith('A'));
console.log(encontrar);
O resultado pode ser visto na imagem abaixo:
Ele percorreu o array, encontrou o elemento que corresponde como verdadeiro para a verificação e parou ali e nos retornou o valor. É bom que isso fique claro. Agora vamos para um exemplo onde vamos trabalhar com arrays de objetos:
const devs = [
{ id: 1, Dev: 'Diego Fernandes', site: 'Rocketseat' },
{ id: 2, Dev: 'Eduardo Pires', site: 'Desenvolvedor.io' },
{ id: 3, Dev: 'Leonardo Leitão', site: 'COD3R' },
{ id: 4, Dev: 'André Baltieri', site: 'Balta.io' },
{ id: 5, Dev: 'Mayk Brito', site: 'Rocketseat' },
]
const procurarId = devs.find(desenvolvedor => desenvolvedor.id === 1)
console.log(procurarId);
O que estamos fazendo é a mesma feita anteriormente, a diferença é que temos objetos. Então se você buscar pelo id que corresponde a 1, vai ter o retorno do primeiro objeto:
Além disso podemos buscar também por outros atributos como Dev e site.
Algo que vai notar é que ele retorna o objeto inteiro, independente do atributo que passar dentro do find() para realizar a busca. Mas uma coisa que vamos destacar novamente é que após a primeira condição da busca retornar o resultado true a verificação se encerra. Diferente do método filter() que busca no array todos os elementos que são verdadeiros para a condição estabelecida e gera um novo array, conforme podemos ver no exemplo:
const mercado = [
{ id: 6, alimento: 'Pão' },
{ id: 3, alimento: 'Pão' },
{ id: 2, alimento: 'Açúcar' },
{ id: 1, alimento: 'Pão Integral' },
]
const filtrar = item => item.alimento === 'Pão'
const resultadoDaRegra = mercado.filter(filtrar)
console.log(resultadoDaRegra);
Conforme vemos, estamos buscando o atributo alimento que contenha a string pão, o filter() percorre o array e vai nos retornar todos os objetos que são verdadeiros para a regra. O resultado é que temos um novo array gerado, com dois elementos dentro dele:
Então agora fica claro objetivo do find() e as suas diferenças com outros métodos.
FindIndex()
O nome mais uma vez nos ajuda a entender, procure o índice ou encontre o índice. Esse método tem o objetivo de retornar o número da posição do elemento que está dentro do array, ou seja em qual índice esse elemento se encontra, 0, 1, 2 e assim por diante. É uma tarefa bem diferente do find() que retorna o valor do elemento. Vamos para o último exemplo:
const devs = [
{ id: 1, Dev: 'Diego Fernandes', site: 'Rocketseat' },
{ id: 2, Dev: 'Eduardo Pires', site: 'Desenvolvedor.io' },
{ id: 3, Dev: 'Leonardo Leitão', site: 'COD3R' },
{ id: 4, Dev: 'André Baltieri', site: 'Balta.io' },
{ id: 5, Dev: 'Mayk Brito', site: 'Rocketseat' },
]
const procurarId = devs.findIndex(desenvolvedor => desenvolvedor.id === 1)
console.log(procurarId);
O código acima é o mesmo que utilizamos com o find(), mas veja o resultado:
Sim o resultado é 0 pois é o primeiro índice do array. Então se colocar id === 2, terá o resultado 1, que é segunda posição do array. Espero que a explicação tenha deixado claro, mas não se esqueça que treinar é essencial para fixar e entender o que está estudando!
Conclusão
Saber utilizar cada método dentro do JavaScript é muito importante. Por isso sempre se preocupe em entender e saber como usar cada método a seu favor! Isso te ajuda a ser mais produtivo e facilita a forma como está escrevendo seu código!
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. 😉🚀