find() e findIndex() em JavaScript: como usar (com exemplos)

O JavaScript na sua versão ES6 trouxe dois métodos para facilitar a vida de quem precisa procurar elementos num array, são eles: find() e findIndex()

Utilizando o find()

O método find irá retornar o primeiro valor que corresponder a o que estamos procurando, ou seja, o que for passado como parâmetro ao método

Este parâmetro deve ser uma função que será iterada elemento por elemento do array alvo

Caso não seja encontrado nada, find irá retornar undefined

Importante citar também que o find não altera o valor ou ordem do array em que for utilizado, ele se mantem o mesmo

Vejamos agora como utilizar find() na prática:

const nomes = ['Maria', 'Pedro', 'João', 'Alberto'];

console.log(nomes.find((nome) => nome == 'Pedro')); // 'Pedro'

function numeroPar(num) {
    if(num % 2 === 0) {
        return num;
    }
}

const numeros = [1,3,5,6,9,12];

console.log(numeros.find(numeroPar)); // 6

const numeros2 = [1,3,5,7,9];

console.log(numeros2.find(numeroPar)); // undefined

Perceba que no primeiro exemplo utilizamos uma arrow function, que também funciona com os dois métodos

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Utilizando o findIndex()

No caso do findIndex() em vez de retornar o elemento, ele nos retornará o índice do primeiro elemento que satisfizer a condição que estabelecemos no argumento passado

Caso nenhum elemento coincida com o que procuramos o método retornará -1

Da mesma forma que find(), findIndex() não modifica ordem ou valor dos elementos do array

Vamos ver agora como aplicar findIndex():

const itens = ['Pera', 'Maçã', 'Banana', 'Melão'];

console.log(itens.findIndex((item) => item == 'Banana')); // 2

const idades = [12,15,13,14,22];

function maiorDeIdade(idade) {
    if(idade >= 18) {
        return idade;
    }
}

console.log(idades.findIndex(maiorDeIdade)); // 4

const idades2 = [12,15,13,14,10];

console.log(idades2.findIndex(maiorDeIdade)); // -1

Repositório

Você pode encontrar todo o código utilizado aqui!

Outros posts sobre ES6

• Utilizando arrow functions;
• As diferenças entre var, let e const;
• Rest e Spread Operator;
• Utilizando Destructuring;

Conclusão

Vimos que find() vai nos retornar o elemento que satisfaz a condição da função que impomos ao método, e findIndex() nos retorna o índice do elemento ao invés do valor dele

Nenhum dos dois métodos modifica ordem ou valor dos elementos do array

E são uma grande funcionalidade para nos ajudar a buscar algo em arrays, podemos passar como argumento condições e funções para deixar nossa busca ainda mais específica

Confira também o nosso canal do Youtube com muito conteúdo sobre programação, clicando aqui.

Por hoje é isso, obrigado a todos por lerem e se possível se inscrevam para receber mais conteúdos sobre programação 🙂

findIndex() ou indexOf(): qual a diferença?

Muita gente mistura os dois, mas a ideia por trás é diferente

O indexOf() procura por um valor exato, tipo itens.indexOf(‘Banana’), ele compara direto e te devolve a posição

Já o findIndex() procura por uma condição, você passa uma função e ele acha o primeiro elemento que satisfaz

Regra de bolso: se você só quer achar um valor específico, indexOf() já resolve

Se a busca tem uma regra por trás (maior de idade, número par, e por aí vai), aí o findIndex() é o cara

find() ou filter(): quando usar cada um

Essa é outra dúvida clássica de quem tá começando com busca em array

O find() para na primeira ocorrência que bate na condição e te devolve só ela

O filter() varre o array inteiro e te devolve um array novo com TODOS os elementos que bateram na condição

Regra de bolso: quer só um? find()

Quer todos que satisfazem? filter()

Perguntas frequentes sobre find() e findIndex()

Qual a diferença entre find() e findIndex()?

Simples: o find() te devolve o elemento em si, e o findIndex() te devolve a posição (o índice) desse elemento no array

Os dois usam a mesma lógica de busca, muda só o que volta pra você

O que o find() retorna quando não acha nada?

Ele retorna undefined

Já o findIndex(), nesse mesmo caso, retorna -1, então dá pra testar o resultado antes de sair usando

find() e findIndex() alteram o array original?

Não, pode ficar tranquilo

Nenhum dos dois mexe na ordem ou no valor dos elementos, o array segue igualzinho ao que era antes