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

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?

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.

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: