Condicionais em JavaScript
Instruções condicionais dão ao seu programa o poder de tomar decisões — seguir caminhos diferentes baseados em situações diferentes. Sem elas, seu código rodaria de cima para baixo sem ramificação; com elas, seu programa pode pensar e escolher como um humano.
Instrução if
A condicional mais básica: se a condição for verdadeira, execute o código dentro das chaves.
<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>Instrução if</title></head>
<body>
<div id="output"></div>
<script>
let idade = 20;
if (idade >= 18) {
document.getElementById('output').textContent = 'Você é maior de idade';
}
</script>
</body>
</html>
Você pode omitir as chaves quando há apenas uma instrução dentro, mas é fortemente desencorajado — as chaves tornam seu código mais claro e previnem bugs quando você adicionar mais instruções depois.
Instrução if...else
Uma escolha binária: se a condição for verdadeira, execute o bloco if; caso contrário, execute o bloco else.
<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>if...else</title></head>
<body>
<div id="output"></div>
<script>
let nota = 45;
if (nota >= 60) {
document.getElementById('output').textContent = 'Aprovado!';
} else {
document.getElementById('output').textContent = 'Não aprovado, continue tentando';
}
</script>
</body>
</html>
if...else if...else
Múltiplas condições avaliadas de cima para baixo — a primeira que corresponder é executada, e o resto é ignorado:
<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>if...else if</title></head>
<body>
<div id="output"></div>
<script>
let nota = 85;
if (nota >= 90) {
document.getElementById('output').textContent = 'Excelente';
} else if (nota >= 80) {
document.getElementById('output').textContent = 'Bom';
} else if (nota >= 60) {
document.getElementById('output').textContent = 'Aprovado';
} else {
document.getElementById('output').textContent = 'Reprovado';
}
</script>
</body>
</html>
Exemplo: Calculadora de Notas
<!DOCTYPE html>
<html lang="pt-br">
<body>
<h2>Calculadora de Notas</h2>
<input type="number" id="score" placeholder="Digite a nota (0-100)">
<button onclick="checkGrade()">Verificar Nota</button>
<p id="result"></p>
<script>
function checkGrade() {
let score = Number(document.getElementById('score').value);
let grade = '';
let color = '';
if (score >= 90) {
grade = 'Excelente 🌟';
color = 'green';
} else if (score >= 80) {
grade = 'Bom 👍';
color = 'blue';
} else if (score >= 70) {
grade = 'Médio 😐';
color = 'orange';
} else if (score >= 60) {
grade = 'Aprovado 😅';
color = '#cc8800';
} else {
grade = 'Reprovado 😢';
color = 'red';
}
document.getElementById('result').innerHTML =
`<span style="color:${color};font-size:24px">${score} - ${grade}</span>`;
}
</script>
</body>
</html>
Operador Ternário
O operador ternário é um atalho para if...else, ideal para escolhas binárias simples:
<script>
// Sintaxe: condição ? valor1 : valor2
let idade = 20;
let status = idade >= 18 ? 'Adulto' : 'Menor';
// Equivalente a:
let status2;
if (idade >= 18) {
status2 = 'Adulto';
} else {
status2 = 'Menor';
}
</script>
if...else — legibilidade importa mais que brevidade.
Instrução switch
Ao verificar uma variável contra múltiplos valores fixos, switch é mais limpo que if...else if:
<script>
let dia = 3;
switch (dia) {
case 1: console.log('Segunda'); break;
case 2: console.log('Terça'); break;
case 3: console.log('Quarta'); break;
// ...
default: console.log('Número inválido');
}
</script>
Dois pontos-chave:
- Nunca omita
break— sem ele, a execução "cai" para o próximo case defaulté o caso geral — executa quando nenhum case corresponde
Exemplo: Armadilha de Fall-through do Switch
<!DOCTYPE html>
<html lang="pt-br">
<body>
<h2>Demonstração da Instrução Switch</h2>
<p id="output"></p>
<script>
let html = '<strong>Com break:</strong><br>';
let fruit = 'maçã';
switch (fruit) {
case 'maçã': html += 'Maçã<br>'; break;
case 'banana': html += 'Banana<br>'; break;
default: html += 'Fruta desconhecida<br>';
}
html += '<br><strong>Sem break (fall-through):</strong><br>';
let num = 2;
switch (num) {
case 1: html += 'Um<br>';
case 2: html += 'Dois<br>';
case 3: html += 'Três<br>';
default: html += 'Padrão<br>';
}
// Saída: Dois, Três, Padrão — começa na correspondência e vai até o final
html += '<br><strong>Usando fall-through intencionalmente:</strong><br>';
let month = 2;
let season = '';
switch (month) {
case 3: case 4: case 5: season = 'Primavera'; break;
case 6: case 7: case 8: season = 'Verão'; break;
case 9: case 10: case 11: season = 'Outono'; break;
case 12: case 1: case 2: season = 'Inverno'; break;
}
html += `Mês ${month} é ${season}`;
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
break é o bug mais comum do switch. Mas às vezes o "fall-through" é útil — quando múltiplos valores devem executar a mesma lógica, omitir break intencionalmente permite que eles se fundam.
Valores falsy
Em verificações condicionais, os seguintes valores são tratados como false (chamados valores falsy):
| Valor falsy | Descrição |
|---|---|
false |
Booleano falso |
0 |
Zero |
"" ou '' |
String vazia |
null |
Null |
undefined |
Undefined |
NaN |
Not a Number |
Todos os outros valores são truthy, incluindo "0" (string zero), [] (array vazio), {} (objeto vazio) — estes podem parecer "vazios", mas avaliam para true em condições.
Exemplo: Verificações de Valores Falsy
<!DOCTYPE html>
<html lang="pt-br">
<body>
<h2>Demonstração de Valores Falsy</h2>
<p id="output"></p>
<script>
let html = '<strong>Valores falsy (avaliam para false):</strong><br>';
let falsy = [false, 0, "", null, undefined, NaN];
for (let val of falsy) {
let display = val === "" ? '""' : (val === undefined ? 'undefined' : val);
html += `${display} → ${val ? 'truthy' : 'falsy'}<br>`;
}
html += '<br><strong>Valores truthy enganosos:</strong><br>';
let tricky = ["0", [], {}, "false", -1];
for (let val of tricky) {
let display = Array.isArray(val) ? '[]' : (typeof val === 'object' ? '{}' : JSON.stringify(val));
html += `${display} → ${val ? 'truthy' : 'falsy'}<br>`;
}
html += '<br><strong>Exemplo prático:</strong><br>';
let nome = '';
html += `Nome: "${nome}" → ${nome || 'Não informado'}<br>`;
let count = 0;
html += `Contagem: ${count} → ${count || 'Nenhum'} (0 é tratado como falsy!)<br>`;
html += `Forma correta: ${count !== undefined && count !== null ? count : 'Nenhum'}`;
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
|| para valores padrão, cuidado: 0 e "" são válidos mas são tratados como falsy. Use ?? (operador de coalescência nula) em vez disso — ele só aplica o padrão para null e undefined.
📖 Resumo
if...else if...elseavalia de cima para baixo, executando a primeira correspondência e ignorando o resto- Operador ternário é atalho para
if...else— bom para atribuições simples, não para lógica complexa switché mais limpo para corresponder valores fixos, mas não esqueçabreak- Seis valores falsy:
false,0,"",null,undefined,NaN "0",[],{}são truthy — não se engane pela aparência "vazia"- Cuidado com
||para padrões quando0e""são válidos — use??ou comparações explícitas
❓ Perguntas Frequentes
P：Qual a diferença entre
==e===em condicionais? R：==realiza coerção de tipo antes de comparar ("1" == 1étrue), enquanto===não ("1" === 1éfalse). Sempre use===para evitar conversões implícitas inesperadas.
P：
switchpode comparar strings? R：Sim.switchfunciona com strings, números e booleanos — usa igualdade estrita (===) para comparação.
P：Qual a diferença entre
??e||? R：||dispara em todos os valores falsy (0, "", null, undefined, NaN, false), enquanto??só dispara emnulleundefined. Use??quando precisar preservar 0 e strings vazias.
📝 Atividades
- Escreva um programa que recebe um ano como entrada e determina se é bissexto (divisível por 4 mas não por 100, ou divisível por 400)
- Construa uma calculadora simples: receba dois números e um operador (+, -, *, /) como entrada, use
switchpara calcular o resultado e trate divisão por zero - Construa uma calculadora de IMC: receba altura (m) e peso (kg) como entrada, calcule o IMC e exiba a categoria (abaixo do peso/normal/sobrepeso/obeso)