Método find() em JavaScript: Achando o Primeiro Item

POV: Você usou find() e achou o primeiro da fila 😎🔍

Com find(), percorremos a lista de notas testando, item por item, se o resto da divisão por 2 é igual a zero (ou seja, se a nota é par). Assim que o método encontra a primeira nota que atende essa condição, ele para de procurar e devolve só esse valor — não uma lista, um valor único. É essa diferença que separa o find() do filter(): enquanto o filter() sempre devolve um array (mesmo que vazio), o find() devolve o próprio item encontrado, ou undefined se nada bater com a condição.

"Agora, utilizando o find, ele vai me trazer o primeiro resultado. Ele vai pegar essas notas, vai percorrer de um a um, ele vai verificar se essa nota dividido por 2 tem o resto zero. E ele vai me trazer então o primeiro resultado dessa nota."

🔍 O que é o método find() em JavaScript?

O método find() é uma das funções de alta ordem mais úteis do JavaScript . Ele retorna o primeiro elemento de um array que satisfaz uma condição definida em uma função de teste . Diferente do filter(), que retorna todos os elementos que passam no teste, o find() para na primeira ocorrência e retorna um valor único .

// array.find(função_callback)
const item = arrayOriginal.find(elemento => {
    // Retorna true para o item desejado
    return elemento.id === 1;
});
        

📊 Exemplo prático: find() com notas pares

Vamos aplicar o find() em um array de notas para encontrar a primeira nota par .

// Array original
const notas = [1, 2, 3, 4, 5];

// Usando find() para encontrar o primeiro número par
const resultado = notas.find(n => {
    return n % 2 === 0;
});

console.log(resultado);
// Saída: 2 (apenas o primeiro número par)
        

⚖️ find() vs filter() — Qual usar?

const pares = numeros.filter(n => n % 2 === 0);
// [2, 4, 6, 8] (array com todos os pares)
            

const primeiroPar = numeros.find(n => n % 2 === 0);
// 2 (apenas o primeiro, valor único)
            

📚 Exemplos práticos de find()

1. Buscando um usuário por ID

const usuarios = [
    { id: 1, nome: "João" },
    { id: 2, nome: "Maria" },
    { id: 3, nome: "Pedro" },
];

const usuario = usuarios.find(u => u.id === 2);
console.log(usuario); // { id: 2, nome: "Maria" }
        

2. Encontrando o primeiro produto com preço menor que 100

const produtos = [
    { nome: "Notebook", preco: 3000 },
    { nome: "Mouse", preco: 50 },
    { nome: "Teclado", preco: 200 },
];

const produtoBarato = produtos.find(p => p.preco < 100);
console.log(produtoBarato); // { nome: "Mouse", preco: 50 }
        

🔍 find() vs findIndex() — A diferença

Enquanto o find() retorna o primeiro elemento que atende à condição, o findIndex() retorna o índice desse elemento . Ambos são úteis em situações diferentes.

const numeros = [1, 2, 3, 4, 5];

// find() retorna o valor
const valor = numeros.find(n => n > 2);
console.log(valor); // 3

// findIndex() retorna a posição
const indice = numeros.findIndex(n => n > 2);
console.log(indice); // 2 (terceira posição)
        

📋 Boas práticas com find()

⏱️ Capítulos do vídeo

• 00:00 — Introdução: O objetivo do método find() (trazer o primeiro resultado)
• 00:05 — Prática: Criando a matriz resultado3
• 00:13 — Lógica: Percorrendo as notas e verificando a condição de resto zero
• 00:23 — Resultado: Verificando no console o primeiro item que satisfaz a condição
• 00:28 — Encerramento e convite para inscrição no canal

🎯 Conclusão

O método find() é uma ferramenta essencial para qualquer programador JavaScript que precisa localizar um item específico em um array . Ele é mais eficiente e direto que o filter() quando você só precisa do primeiro resultado .

Neste artigo, você aprendeu:

• ✅ O que o método find() faz em um array
• ✅ Como o find() retorna apenas o primeiro item que atende à condição
• ✅ Como usar o resto da divisão (mod) dentro do find()
• ✅ O que o find() retorna quando nenhum item atende à condição
• ✅ A diferença entre find() e filter() na prática
• ✅ Quando faz mais sentido usar find() em vez de filter()

🤔 O que você achou?

💬 Quer aprender JavaScript do ZERO? Comece agora a escrever seu primeiro código e seus fundamentos!

❓ FAQ: Perguntas Frequentes sobre o Método Find() em JavaScript

🎬 Assista ao Vídeos completo sobre Refatoração

O vídeo foi feito em Javascript mais o conceito pode ser utilizado em qualquer outra linguagem de programação..

🔗 Conecte-se Comigo