Includes e indexOf em JavaScript: Existe ou Não?

POV: Você perguntou se o item existe e descobriu onde ele está 😎🔍

Partindo de um array de nomes (Pedro, Maria e João), usamos includes() para perguntar se "Maria" está na lista — a resposta é um simples true ou false. Já o indexOf() vai além: ele retorna exatamente a posição onde o item está, nesse caso, a posição 1 (lembrando que os arrays em JavaScript começam a contar do zero, então Pedro é 0, Maria é 1 e João é 2). Quando testamos um nome que não existe no array, "José", o indexOf() retorna -1, um valor combinado especificamente para indicar "não encontrado" — já que 0 não serviria, pois é justamente a posição do primeiro item da lista.

"O includes vai verificar se o registro existe. E o indexOf vai verificar se o registro existe, ele vai me trazer a posição. Se não existe, ele vai me trazer o -1. Significa que esse registro não existe."

🔍 O que são includes() e indexOf() em JavaScript?

includes() e indexOf() são métodos de array em JavaScript que verificam a presença de um elemento, mas respondem a perguntas diferentes . O includes() pergunta "existe?" e retorna um booleano . O indexOf() pergunta "em que posição?" e retorna o índice ou -1 se não for encontrado .

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

// includes() - pergunta se existe
const existeMaria = nomes.includes("Maria");
console.log(existeMaria); // true

// indexOf() - pergunta onde está
const posicaoMaria = nomes.indexOf("Maria");
console.log(posicaoMaria); // 1 (Maria está na posição 1)

// Quando não existe
const existeJose = nomes.includes("José");
console.log(existeJose); // false

const posicaoJose = nomes.indexOf("José");
console.log(posicaoJose); // -1 (não encontrado)
        

📍 O método indexOf() — encontrando a posição

O método indexOf() é útil quando você precisa saber exatamente onde um elemento está no array . Ele retorna o índice da primeira ocorrência do elemento, ou -1 se o elemento não for encontrado .

const frutas = ["maçã", "banana", "laranja", "banana"];

// Primeira ocorrência de "banana"
const primeiraBanana = frutas.indexOf("banana");
console.log(primeiraBanana); // 1

// Elemento que não existe
const posicaoUva = frutas.indexOf("uva");
console.log(posicaoUva); // -1

// Buscando a partir de uma posição específica
const segundaBanana = frutas.indexOf("banana", 2);
console.log(segundaBanana); // 3
        

✅ O método includes() — existe ou não?

O método includes() é a forma mais direta de perguntar se um array contém um determinado valor . Ele retorna true ou false , tornando o código mais legível .

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

// Verificando existência
const temTres = numeros.includes(3);
console.log(temTres); // true

const temDez = numeros.includes(10);
console.log(temDez); // false

// Com strings
const nomes = ["Ana", "Carlos", "Beatriz"];
const temAna = nomes.includes("Ana");
console.log(temAna); // true
        

⚖️ includes() vs indexOf() — Qual usar?

const existe = lista.includes(item);
// Resposta: true ou false
            

const posicao = lista.indexOf(item);
// Resposta: índice ou -1
            

📚 Exemplos práticos

1. Validando permissões com includes()

const usuariosPermitidos = ["admin", "editor", "moderador"];
const usuario = "editor";

if (usuariosPermitidos.includes(usuario)) {
    console.log("Usuário autorizado!");
} else {
    console.log("Usuário não autorizado!");
}
        

2. Encontrando posição com indexOf()

const tarefas = ["estudar", "trabalhar", "descansar"];
const tarefa = "trabalhar";

const indice = tarefas.indexOf(tarefa);

if (indice !== -1) {
    console.log(`"${tarefa}" está na posição ${indice}`);
    // Removendo a tarefa
    tarefas.splice(indice, 1);
} else {
    console.log(`"${tarefa}" não encontrada`);
}
        

⏱️ Capítulos do vídeo

• 00:00 — Includes e indexOf em JavaScript: qual a diferença
• 00:16 — Criando o array de nomes para os testes
• 00:23 — Includes() em JavaScript: verificando se um item existe
• 00:33 — IndexOf() em JavaScript: descobrindo a posição de um item
• 00:41 — O caso do -1: quando o indexOf() não encontra o item
• 00:51 — Comparando o true do includes com a posição do indexOf
• 01:04 — Revisando o array e as posições 0, 1 e 2
• 01:21 — Encerramento e convite para se inscrever

🎯 Conclusão

includes() e indexOf() são dois métodos complementares para verificar a presença de elementos em arrays . Saber quando usar cada um é essencial para escrever código claro e eficiente .

Neste artigo, você aprendeu:

• ✅ A diferença entre includes() e indexOf() em JavaScript
• ✅ Como usar includes() para verificar se um item existe no array
• ✅ Como usar indexOf() para descobrir a posição de um item
• ✅ Por que indexOf() retorna -1 quando o item não é encontrado
• ✅ Como os índices de um array começam a contar do zero
• ✅ Quando usar includes() em vez de indexOf(), e vice-versa

🤔 O que você achou?

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

❓ FAQ: Perguntas Frequentes sobre Includes e IndexOf 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