Conhecendo o JavaScript: Método Find() e FindIndex()
Hi, I'm Rafael, but you can call me Rafa! 😄 I'm a software engineer passionate about everything that involves technology, with more than 5 years of experience in the market. Throughout my career, I worked in banking institutions, developing innovative solutions and contributing to the digital transformation of the financial sector.
With a strong interest in software architecture and testing, I am constantly looking to specialize and improve my skills in this area.
Here, you will find tips, tutorials and discussions on the most varied topics related to architecture, good practices and software testing, always with the aim of sharing knowledge and learning from other developers. I value the exchange of experiences and I am always willing to listen and learn from my professional colleagues.
Feel free to get in contact, leave your comments and share your own experiences and knowledge. Together, we can build a stronger, more collaborative community in the software development world.
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. 😉🚀
