Estruturas Condicionais: if, else e switch em JavaScript
Bem-vindo(a) ao post no blog.
🧠 O que são Estruturas Condicionais
Na vida real, tomamos decisões o tempo todo:
● “Se estiver chovendo, eu levo guarda-chuva.”
● “Se eu tiver dinheiro, compro pizza; se não, fico em casa.”
Em JavaScript, fazemos o mesmo com estruturas de decisão.
💬 Definição simples:
Uma estrutura condicional verifica
se algo é verdadeiro ou falso e, com base nisso, executa determinado
bloco de código.
⚙️ A Estrutura if
A estrutura if (se) é usada para executar uma ação somente se uma condição for verdadeira.
Sintaxe:
if (condição) {
// bloco de código executado se a condição for verdadeira
}
💡 Exemplo prático:
let idade = 20;
if (idade >= 18) {
console.log("Você é maior de idade.");
}
✅ Resultado:
Você é maior de idade.
Se idade fosse menor que 18, nada seria exibido — pois o bloco só roda quando a condição é true.
🔹 Estrutura if...else
Para lidar com duas possibilidades (verdadeiro ou falso), usamos else (senão).
Exemplo:
let idade = 16;
if (idade >= 18) {
console.log("Acesso permitido!");
} else {
console.log("Acesso negado. Você é menor de idade!");
}
Resultado no console:
Acesso negado. Você é menor de idade!
💡 Dica: o bloco else não exige condição, pois ele só é executado quando
o if for falso.
🔸 Estrutura if...else if...else
Às vezes, é preciso verificar mais de uma condição.
Nesse caso, usamos várias camadas
de decisão com else if.
Exemplo:
let nota = 8;
if (nota >= 9) {
console.log("Excelente!");
} else if (nota >= 7) {
console.log("Bom desempenho!");
} else if (nota >= 5) {
console.log("Regular!");
} else {
console.log("Reprovado!");
}
Saída:
Bom desempenho!
💬 Como funciona:
● O JavaScript verifica uma condição por vez.
● Assim que uma for verdadeira, ele ignora as demais.
🧩 Boas práticas ao usar if
✔
Sempre use chaves { },
mesmo em códigos curtos — evita confusões futuras.
✔ Mantenha indentação (recuos) para clareza
visual.
✔ Prefira condições simples e
fáceis de entender.
✔ Use comentários para
explicar decisões mais complexas.
⚡ Operador Ternário ? :
O operador ternário é uma forma curta de escrever um if...else.
Ele é usado em situações simples,
quando a decisão envolve apenas uma linha de código.
Sintaxe:
condição ? valor_se_verdadeiro : valor_se_falso;
Exemplo:
let idade = 17;
let acesso = (idade >= 18) ? "Permitido" : "Negado";
console.log(acesso);
Saída:
Negado
💬 Explicação:
● Se a condição for verdadeira, o resultado será "Permitido".
● Se for falsa, será "Negado".
Esse formato é ótimo para simplificar retornos ou atribuições pequenas.
🔁 Estrutura switch...case
Em alguns casos, precisamos verificar várias opções
específicas — e usar muitos if...else if pode deixar o código confuso.
Para isso existe o switch, que compara um
mesmo valor com múltiplos casos possíveis (case).
Sintaxe básica:
switch (expressao) {
case valor1:
// código executado se expressao == valor1
break;
case valor2:
// código executado se expressao == valor2
break;
default:
// código executado se nenhum valor coincidir
break;
}
Exemplo prático:
let dia = 3;
let nomeDoDia;
switch (dia) {
case 1:
nomeDoDia = "Domingo";
break;
case 2:
nomeDoDia = "Segunda";
break;
case 3:
nomeDoDia = "Terça";
break;
case 4:
nomeDoDia = "Quarta";
break;
case 5:
nomeDoDia = "Quinta";
break;
case 6:
nomeDoDia = "Sexta";
break;
case 7:
nomeDoDia = "Sábado";
break;
default:
nomeDoDia = "Dia inválido";
}
console.log(nomeDoDia);
Saída:
Terça
💬 O comando break interrompe a execução do switch — sem ele, o código continua executando todos os case abaixo (comportamento conhecido como fall-through).
🧠 Switch vs If
|
Situação |
Melhor usar |
|
Comparar um valor com vários possíveis (ex.: dias, meses, opções numéricas) |
switch |
|
Fazer comparações complexas (>, <, combinações lógicas) |
if |
|
Apenas duas escolhas simples |
Operador ternário |
💡 Use a ferramenta certa para deixar o código limpo, legível e eficiente.
🧮 Exemplo – Calculador de Descontos
let categoria = "ouro";
let desconto;
switch (categoria) {
case "prata":
desconto = 5;
break;
case "ouro":
desconto = 10;
break;
case "diamante":
desconto = 15;
break;
default:
desconto = 0;
}
console.log(`Cliente ${categoria}: desconto de ${desconto}%`);
Saída:
Cliente ouro: desconto de 10%
💡 Estruturas Condicionais Aninhadas
Podemos colocar um if dentro de outro if (aninhamento), quando precisamos de decisões mais detalhadas.
Exemplo:
let idade = 25;
let carteira = true;
if (idade >= 18) {
if (carteira == true) {
console.log("Pode dirigir!");
} else {
console.log("Você precisa de uma CNH!");
}
} else {
console.log("Menor de idade, não pode dirigir!");
}
Saída:
Pode dirigir!
💬 Embora poderoso, o aninhamento exagerado pode deixar
o código confuso.
Use funções (nas próximas aulas)
quando precisar modularizar decisões mais profundas.
🧩 Exemplo Completo – Sistema de Notas
Vamos criar um mini sistema que interpreta notas escolares e exibe mensagens específicas.
let nota = Number(prompt("Digite sua nota de 0 a 10:"));
let mensagem;
if (nota >= 9 && nota <= 10) {
mensagem = "Excelente! Continue assim!";
} else if (nota >= 7) {
mensagem = "Bom resultado!";
} else if (nota >= 5) {
mensagem = "Recuperação necessária.";
} else if (nota >= 0) {
mensagem = "Reprovado. Estude mais!";
} else {
mensagem = "Nota inválida!";
}
alert(mensagem);
💡 Conceitos aplicados:
● Comparações lógicas (&&, >=);
● Múltiplas verificações (else if);
● Exibição de mensagens variáveis.
💻 Exercício Prático
Crie um arquivo condicional.html com o código abaixo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Condições em JavaScript</title>
</head>
<body>
<h1>Testando Estruturas Condicionais</h1>
<script>
let nome = prompt("Digite seu nome:");
let idade = Number(prompt("Digite sua idade:"));
if (idade >= 18) {
alert(`Olá, ${nome}! Você é maior de idade.`);
} else {
alert(`Olá, ${nome}! Você é menor de idade.`);
}
</script>
</body>
</html>
💬 Teste com várias idades diferentes e observe o comportamento do programa.
🎯 Desafio Extra – Calculadora de IMC
Crie um script que:
1. Peça peso e altura do usuário;
Calcule o IMC usando a fórmula:
IMC = peso / (altura * altura)
2.
3. Mostre o resultado e a classificação de acordo com a tabela abaixo:
|
Faixa de IMC |
Classificação |
|
Menor que 18.5 |
Abaixo do peso |
|
18.5 a 24.9 |
Peso normal |
|
25 a 29.9 |
Sobrepeso |
|
30 ou mais |
Obesidade |
💡 Dica:
Use if...else if...else para classificar cada faixa e exibir
o resultado com alert().
🧠 Revisão
✔
Estruturas if, else if, else tomadas de decisão em
múltiplas etapas;
✔ switch controle de múltiplos casos fixos;
✔ Operador ternário simplificação de
condições simples;
✔ Uso prático de expressões lógicas
dentro de condições;
✔ Decisões aninhadas e exemplos de
aplicação real.
🎓 Conclusão
Agora o seu código pensa e reage: você consegue dizer ao JavaScript o que fazer em cada situação, executando ações diferentes conforme as variáveis e os resultados.
Essas estruturas de condição serão o alicerce para tudo que vem nas próximas lições principalmente quando começarmos com laços de repetição (loops) e funções.
Esse conteúdo faz parte do projeto Academy Code Christ, criado para ajudar iniciantes a aprender programação de forma gratuita e direta.
Comentários
Postar um comentário