Condicionais em JavaScript: if, else e switch (Guia Completo para Iniciantes)

          Bem-vindo(a) ao post no blog.

Condicionais-em-JavaScript-if-else-e-switch


Neste post, você vai aprender como o JavaScript toma decisões usando estruturas condicionais. Vamos explorar o if, else, else if, o operador ternário e o switch, entendendo quando e como usar cada um com exemplos práticos e reais.

Caso queira se aprofundar mais, temos outros conteúdos que vão te ajudar a evoluir ainda mais:

🤔 O que são Condicionais?

Pense no seu dia a dia:

☀️ SE estiver chovendo → pego o guarda-chuva
🌂 SENÃO → saio sem ele

🔑 SE a senha estiver correta → acesso liberado
🚫 SENÃO → acesso negado

No JavaScript, a lógica funciona exatamente assim. As condicionais permitem que o programa tome decisões com base em determinadas situações.

💬 Condicional = uma pergunta que o código faz para si mesmo.
Dependendo da resposta (verdadeiro ou falso), ele executa um bloco de código diferente.

⚙️ Antes de Começar — Entendendo Verdadeiro e Falso

O JavaScript trabalha com dois valores fundamentais para tomar decisões:

javascript
true  // verdadeiro
false // falso

Mas além de true e false, alguns valores são considerados falsy (tratados como falso):

javascript
false
0
""        // string vazia
null
undefined
NaN

E tudo o mais é considerado truthy (tratado como verdadeiro):

javascript
true
1
"qualquer texto"
[]        // array vazio
{}        // objeto vazio

🧠 Lembre-se: Isso é muito importante para entender por que certas condicionais funcionam do jeito que funcionam!

📌 1. O if — A Base de Tudo

A estrutura if é a mais simples e fundamental. Ela executa um bloco de código somente se a condição for verdadeira.

📜 Estrutura básica:

javascript
if (condição) {
  // código executado se a condição for TRUE
}

💡 Exemplo prático:

javascript
let idade = 18;

if (idade >= 18) {
  console.log("Você é maior de idade!");
}

🔎 Resultado: Você é maior de idade!
Porque 18 >= 18 é verdadeiro (true).

📌 E se a condição for falsa?

javascript
let idade = 15;

if (idade >= 18) {
  console.log("Você é maior de idade!");
}

// Nenhuma mensagem aparece — o bloco foi ignorado

⚠️ Atenção: Se a condição for false, o bloco do if é simplesmente pulado.

📌 2. O else — O Plano B

O else define o que acontece quando a condição do if for falsa. Ele é o "caso contrário".

📜 Estrutura básica:

javascript
if (condição) {
  // executa se for TRUE
} else {
  // executa se for FALSE
}

💡 Exemplo prático:

javascript
let idade = 15;

if (idade >= 18) {
  console.log("Acesso liberado!");
} else {
  console.log("Acesso negado. Você precisa ter 18 anos ou mais.");
}

🔎 Resultado: Acesso negado. Você precisa ter 18 anos ou mais.

📌 3. O else if — Múltiplas Condições

Quando você tem mais de duas possibilidades, use o else if para criar novos cenários.

📜 Estrutura básica:

javascript
if (condição1) {
  // executa se condição1 for TRUE
} else if (condição2) {
  // executa se condição2 for TRUE
} else if (condição3) {
  // executa se condição3 for TRUE
} else {
  // executa se NENHUMA condição for TRUE
}

💡 Exemplo prático — Sistema de notas:

javascript
let nota = 75;

if (nota >= 90) {
  console.log("✅ Aprovado com Excelência!");
} else if (nota >= 70) {
  console.log("✅ Aprovado!");
} else if (nota >= 50) {
  console.log("⚠️ Em Recuperação.");
} else {
  console.log("❌ Reprovado.");
}

🔎 Resultado: ✅ Aprovado!
Porque 75 >= 70 é verdadeiro.

🧠 Lembre-se: O JavaScript testa as condições de cima para baixo e para no primeiro true que encontrar.

🔎 Operadores de Comparação

Para construir condicionais, você vai usar muito esses operadores:

javascript
==    // igual em valor (sem verificar tipo)
===   // igual em valor E tipo (mais seguro ✅)
!=    // diferente em valor
!==   // diferente em valor OU tipo (mais seguro ✅)
>     // maior que
<     // menor que
>=    // maior ou igual
<=    // menor ou igual

⚠️ Diferença importante — == vs ===

javascript
console.log(5 == "5");   // true  → compara só o valor
console.log(5 === "5");  // false → compara valor E tipo

console.log(0 == false);  // true
console.log(0 === false); // false

💡 Dica: Sempre prefira === e !== — evitam bugs difíceis de encontrar!

🔗 Operadores Lógicos — Combinando Condições

Às vezes uma decisão depende de mais de uma condição ao mesmo tempo.

javascript
&&   // E (AND) → as DUAS condições precisam ser true
||   // OU (OR) → PELO MENOS UMA condição precisa ser true
!    // NÃO (NOT) → inverte o resultado

💡 Exemplo com && (E):

javascript
let idade = 20;
let temCNH = true;

if (idade >= 18 && temCNH === true) {
  console.log("Pode dirigir!");
} else {
  console.log("Não pode dirigir.");
}

🔎 Resultado: Pode dirigir!
Porque as duas condições são verdadeiras.

💡 Exemplo com || (OU):

javascript
let ehAdmin = false;
let ehModerador = true;

if (ehAdmin === true || ehModerador === true) {
  console.log("Acesso ao painel liberado!");
} else {
  console.log("Sem permissão.");
}

🔎 Resultado: Acesso ao painel liberado!
Porque pelo menos uma condição é verdadeira.

💡 Exemplo com ! (NÃO):

javascript
let logado = false;

if (!logado) {
  console.log("Por favor, faça login para continuar.");
}

🔎 Resultado: Por favor, faça login para continuar.
Porque !false é true.

⚡ 4. Operador Ternário — if/else em Uma Linha

O operador ternário é uma forma compacta de escrever um if/else simples em apenas uma linha.

📜 Estrutura básica:

javascript
condição ? "valor se true" : "valor se false"

💡 Comparação:

javascript
// Forma tradicional com if/else
let idade = 20;
let mensagem;

if (idade >= 18) {
  mensagem = "Maior de idade";
} else {
  mensagem = "Menor de idade";
}

console.log(mensagem);
javascript
// Forma compacta com ternário ✅
let idade = 20;
let mensagem = idade >= 18 ? "Maior de idade" : "Menor de idade";

console.log(mensagem); // "Maior de idade"

💡 Use o ternário quando a decisão for simples e caber em uma linha.
Para lógicas mais complexas, o if/else tradicional é mais legível.

💡 Exemplo prático com DOM:

javascript
let pontos = 850;

let nivel = pontos >= 1000 ? "Ouro 🥇" : pontos >= 500 ? "Prata 🥈" : "Bronze 🥉";

console.log("Seu nível: " + nivel); // "Seu nível: Prata 🥈"

🔀 5. O switch — Quando há Muitas Opções

O switch é ideal quando você precisa comparar uma mesma variável com vários valores diferentes. Ele substitui vários else if de forma muito mais organizada e legível.

📜 Estrutura básica:

javascript
switch (variável) {
  case valor1:
    // código
    break;
  case valor2:
    // código
    break;
  case valor3:
    // código
    break;
  default:
    // código se nenhum case for correspondido
}

⚠️ Atenção: O break é obrigatório no final de cada case!
Sem ele, o JavaScript continua executando os próximos cases mesmo que não correspondam.

💡 Exemplo prático — Dias da semana:

javascript
let dia = 3;

switch (dia) {
  case 1:
    console.log("Segunda-feira");
    break;
  case 2:
    console.log("Terça-feira");
    break;
  case 3:
    console.log("Quarta-feira");
    break;
  case 4:
    console.log("Quinta-feira");
    break;
  case 5:
    console.log("Sexta-feira");
    break;
  case 6:
    console.log("Sábado");
    break;
  case 7:
    console.log("Domingo");
    break;
  default:
    console.log("Número inválido. Digite entre 1 e 7.");
}

🔎 Resultado: Quarta-feira

💡 Agrupando cases — Quando vários valores têm a mesma resposta:

javascript
let dia = "sábado";

switch (dia) {
  case "sábado":
  case "domingo":
    console.log("🎉 Final de semana! Hora de descansar.");
    break;
  case "segunda":
  case "terça":
  case "quarta":
  case "quinta":
  case "sexta":
    console.log("💻 Dia útil. Bora estudar!");
    break;
  default:
    console.log("Dia não reconhecido.");
}

🔎 Resultado: 🎉 Final de semana! Hora de descansar.

🆚 if/else vs switch — Quando usar cada um?

basic
✅ Use if/else quando:
→ Tiver comparações com >, <, >=, <=
→ Tiver condições com && e ||
→ As condições forem complexas e variadas

✅ Use switch quando:
→ Comparar UMA variável com VÁRIOS valores exatos
→ Quiser código mais limpo e legível
→ Trabalhar com menus, opções ou categorias fixas

💎 Exemplo Completo — Sistema de Login

Veja tudo funcionando junto em um exemplo real:

html

            resultado.textContent = "❌ Senha incorreta para o administrador.";
            resultado.className = "erro";
          }
          break;

        case "aluno":
          if (senha === "aluno123") {
            resultado.textContent = "✅ Bem-vindo, Aluno! Acesso ao curso liberado.";
            resultado.className = "sucesso";
          } else {
            resultado.textContent = "❌ Senha incorreta para o aluno.";
            resultado.className = "erro";
          }
          break;

        default:
          resultado.textContent = "❌ Acesso negado.";
          resultado.className = "erro";
      }
    }
  </script>

</body>
</html>

html 4

🔎 Para testar:
  • Usuário: admin | Senha: admin123 → Acesso total
  • Usuário: aluno | Senha: aluno123 → Acesso ao curso
  • Qualquer outra combinação → Erro

🚨 Boas Práticas com Condicionais

stata
1. ✅ Use === em vez de == sempre que possível
2. ✅ Evite condicionais muito aninhadas (if dentro de if dentro de if...)
3. ✅ Prefira retornar cedo (early return) para evitar else desnecessário
4. ✅ Use o ternário apenas para condições simples e curtas
5. ✅ Dê nomes claros às variáveis para que a condição seja legível
6. ✅ Use switch quando comparar uma variável com mais de 3 valores fixos

💡 Exemplo de early return (código mais limpo):

javascript
// ❌ Forma comum com else desnecessário
function verificarIdade(idade) {
  if (idade >= 18) {
    console.log("Maior de idade");
  } else {
    console.log("Menor de idade");
    return;
  }
  console.log("Pode acessar o sistema");
}

// ✅ Forma mais limpa com early return
function verificarIdade(idade) {
  if (idade < 18) {
    console.log("Menor de idade");
    return; // sai da função imediatamente
  }

  console.log("Maior de idade");
  console.log("Pode acessar o sistema");
}

🔑 Pontos-Chave do Post

💡 if/else é a base das decisões no JavaScript — todo programa usa isso

💡 === é sempre mais seguro que == pois compara valor E tipo

💡 switch é ideal para comparar uma variável com muitos valores fixos e deixa o código muito mais legível

✍️ Exercício Prático

Crie um arquivo chamado condicionais.html com os seguintes desafios:

stata
1. Crie uma variável com uma temperatura em graus Celsius
   → Abaixo de 15°C: "Está frio! Vista um casaco."
   → Entre 15°C e 25°C: "Temperatura agradável!"
   → Acima de 25°C: "Está quente! Beba água."

2. Crie um sistema de desconto:
   → Se o valor da compra for maior que R$500 → 20% de desconto
   → Se for maior que R$200 → 10% de desconto
   → Abaixo de R$200 → sem desconto
   → Exiba o valor final com desconto

3. Com switch, crie um cardápio:
   → Case 1: "🍕 Pizza"
   → Case 2: "🍔 Hambúrguer"
   → Case 3: "🌮 Tacos"
   → Case 4: "🥗 Salada"
   → default: "Opção inválida"

4. (Desafio extra)
   → Combine o DOM com condicionais:
   → Crie um input e um botão
   → O usuário digita um número
   → O sistema responde se é positivo, negativo ou zero

💡 Dica de organização:

/projeto-condicionais
  index.html
  style.css
  script.js  ← sempre separe o JavaScript!

📚 Continue aprendendo JavaScript:

  • 📌 Laços de Repetição em JavaScript (for, while, do while)
  • 📌 Funções em JavaScript — Guia Completo para Iniciantes
  • 📌 Arrays em JavaScript — Como criar e manipular listas

Esse conteúdo faz parte do projeto Academy Code Christ, criado para ajudar iniciantes a aprender programação de forma gratuita e direta.

Se esse conteúdo te ajudou, você pode me pagar um café ☕

Comentários

Postar um comentário

Postagens mais visitadas