find e findIndex do JS ES6

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

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 🙂