find JavaScript: Como Encontrar 1 Item Específico no Array

JavaScript

find JavaScript: Como Encontrar 1 Item Específico no Array

Gabriel Nascimento
Escrito por Gabriel Nascimento em 9 de setembro de 2020

Você já tentou achar uma agulha no palheiro? E encontrar um item no Array?

Por acaso você sabe o que essas 2 tarefas tem em comum? 

Ambas podem ser igualmente difíceis se você escolher o método errado de execução.

Pensando nisso, o JavaScript fornece o método find para ajudar você a encontrar seus dados com maior facilidade no meio de Arrays gigantescos.

Por isso vou mostrar como tirar o máximo proveito desse recurso incrível, nesse artigo feito para você.

O que é e como funciona o método find JavaScript?

lupa em uma agulha

O find é um método muito útil quando precisamos encontrar um item específico dentro de um Array.

Por exemplo, considere uma lista de alunos onde queremos somente o registro com o nome “joão”. Ao utilizar o clássico loop for, temos algo assim:

let alunos = [ 
  {nome: 'josé', idade: 18}, 
  {nome: 'joão', idade: 16}, 
  {nome: 'maria', idade: 21} 
];
let aluno;

for(var i = 0; i < alunos.length; i++) {
  if(alunos[i].nome === 'joão'){
    aluno = alunos[i];
    break; // encerra o loop quando encontra o item
  }
}

console.log(aluno);
// Resultado: { nome: 'joão', idade: 16 }

Dessa forma usamos uma condição if (alunos[i].nome === 'joão') para verificar se o nome do aluno é igual ao que estamos buscando…

E caso os valores sejam idênticos, então:

  • Atribuímos o elemento a variável aluno;
  • E depois, encerramos o loop com break.

Funciona? Sim, mas podemos melhorar o código e ter o mesmo efeito…

Para isso, invocamos a função find() do próprio Array, e passamos uma função de retorno:

let alunos = [ 
  {nome: 'josé', idade: 18}, 
  {nome: 'joão', idade: 16}, 
  {nome: 'maria', idade: 21} 
];

let aluno = alunos.find(function(aluno) {
  return aluno.nome === 'joão';
});

console.log(aluno);
// Resultado: { nome: 'joão', idade: 16 }

Dentro do find(), passamos uma função anônima function(aluno){...}, também chamada de função callback.

Essa função será executada para cada elemento dentro da lista. E a cada iteração, recebe como parâmetro o valor do elemento, e o atribui a variável aluno.

esquema de iteração com find JavaScript

No corpo da função, usamos uma condição de avaliação para retornar um valor boolean. Sendo que:

  • Se for false, o item é simplesmente ignorado e, então, testamos o próximo;
  • Se for true, o item é retornado para nós e encerramos a execução da função.

Note que pegamos apenas o primeiro item que satisfaz o critério de busca. Então, caso existissem 2 alunos com o nome “joão”, somente o primeiro seria retornado:

let alunos = [ 
  {nome: 'joão', idade: 32},
  {nome: 'josé', idade: 18}, 
  {nome: 'joão', idade: 16}, 
  {nome: 'maria', idade: 21}
];

let aluno = alunos.find(function(aluno) {
  return aluno.nome === 'joão';
});

console.log(aluno);
// Resultado: { nome: 'joão', idade: 32 }

Para resolver esse problema, você pode usar uma condição de busca mais complexa:

let aluno = alunos.find(function(aluno) {
  return aluno.nome === 'joão' && aluno.idade === 18;
});

Pegar um elemento específico de um Array não poderia ser mais fácil!

E caso você precise retornar vários itens, experimente usar o método filter().

Parâmetros opcionais do método find JavaScript

Vimos a função find() apenas em sua forma mais básica… Aliás, sua sintaxe completa possui vários argumentos opcionais que podem ser muito úteis para você:

const returnValue = array.find((value, index, arr) => {...}, thisArg);

Já conhecemos a função de callback, mas ela na realidade pode receber até 3 parâmetros:

  • value (obrigatório): O valor do item atual;
  • index (opcional): O número de índice do item atual;
  • arr (opcional): O próprio Array sendo percorrido.

E o segundo argumento thisArg permite que o contexto this seja alterado, mas é raramento usado.

Por fim, o returnValue recebe o elemento do Array que atende a condição de busca.

Agora veja um exemplo de uso do find JavaScript com seus parâmetros opcionais:

let alunos = [ 
  {nome: 'josé', idade: 18}, 
  {nome: 'joão', idade: 16}, 
  {nome: 'maria', idade: 21} 
];

let aluno = alunos.find(function(value, index, arr) {
  return arr[index].nome === 'joão'; // === value.nome
});

console.log(aluno);
// Resultado: { nome: 'joão', idade: 16 }

O método find() existe em todos os Arrays, afinal todos eles herdam os vários métodos do Array.prototype.

Conclusão

Basta você dar uma olhada no find, para ver que ele deixa o seu código mais limpo e legível

Mas lembre-se: o find retorna apenas o primeiro valor que atende ao critério de busca.

Pense nele como: “Quero encontrar um elemento específico no meu Array.”

E caso você precise de vários itens do Array (e não apenas 1), recomendo que use o método filter().

Espero que você tenha gostado do artigo! Se tiver alguma dúvida ou opinião, seu comentário é sempre muito bem vindo:

Hey,

o que você achou deste conteúdo? Conte nos comentários.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

5 Replies to “find JavaScript: Como Encontrar 1 Item Específico no Array”

Larissa

Muito boa sua explicação! Obrigada.
Me gerou uma dúvida apenas: Para procurar uma letra especifica em uma frase, usaria o mesmo código mas declarando a letra ao invés do nome?? 🙂

Gabriel Nascimento

Que bom que você curtiu! 😉

Para encontrar uma letra específica, você pode usar os métodos indexOf ou search presente em Strings.

Que retornam -1 caso não encontrem o que foi buscado…

Então teríamos algo parecido com isso:

let aluno = alunos.find(function(aluno) {
return aluno.nome.indexOf(“m”) != -1;
});

OBS: Nesse exemplo, o método find retornaria a aluna “maria”. Pois ela é a única que possui “m” no nome.

Henrique

Shooow. Boa explicação e layout bem limpo do site 🙂

Gabriel Nascimento

Obrigado, Henrique! Que bom que você gostou. 🙂

Gabriel Nascimento