Javascript

Condicionais: if, else e switch

Nyck Folleman 4 visualizações

No Javascript nós guardamos informações em variáveis como visto em um outro arrtigo. Mas um programa de verdade precisa tomar decisões. Se o usuário está logado, mostre o painel. Se a senha está errada, exiba um erro. Se o saldo é suficiente, finalize a compra.

É exatamente isso que as estruturas condicionais fazem: permitem que seu código siga caminhos diferentes dependendo de uma condição.

Operadores de Comparação

Antes de entrar no if, precisamos entender como comparar valores. O resultado de uma comparação é sempre true ou false.

const a = 10;
const b = 5;

console.log(a > b);   // true  — maior que
console.log(a < b);   // false — menor que
console.log(a >= 10); // true  — maior ou igual
console.log(a <= 9);  // false — menor ou igual
console.log(a === 10); // true — igual em valor E tipo (use sempre este)
console.log(a !== b);  // true — diferente

Atenção importante: sempre use === em vez de ==. O operador == faz conversão automática de tipos e pode causar resultados inesperados:

console.log(0 == false);  // true  ← perigoso!
console.log(0 === false); // false ← correto
console.log("5" == 5);    // true  ← perigoso!
console.log("5" === 5);   // false ← correto

Grave essa regra: === sempre.

if e else

A estrutura mais básica de decisão:

const hora = 14;

if (hora < 12) {
  console.log("Bom dia!");
} else {
  console.log("Boa tarde!");
}
// Resultado: "Boa tarde!"

O bloco dentro do if só executa se a condição for true. Caso contrário, o bloco do else é executado.

else if — múltiplas condições

Quando você tem mais de dois caminhos possíveis:

const hora = 20;

if (hora < 12) {
  console.log("Bom dia!");
} else if (hora < 18) {
  console.log("Boa tarde!");
} else {
  console.log("Boa noite!");
}
// Resultado: "Boa noite!"

O JavaScript testa cada condição de cima para baixo e executa apenas o primeiro bloco cuja condição seja verdadeira. Os demais são ignorados.

Operadores Lógicos

Você pode combinar condições usando os operadores lógicos:

const idade = 20;
const temCarteira = true;

// && (E) — ambas as condições precisam ser true
if (idade >= 18 && temCarteira) {
  console.log("Pode dirigir.");
}

// || (OU) — basta uma condição ser true
const temIngresso = false;
const eVIP = true;

if (temIngresso || eVIP) {
  console.log("Pode entrar no evento.");
}

// ! (NÃO) — inverte o valor booleano
const estaLogado = false;

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

Exemplo prático: sistema de notas

const nota = 7.5;

if (nota >= 9) {
  console.log("Conceito A — Excelente!");
} else if (nota >= 7) {
  console.log("Conceito B — Bom!");
} else if (nota >= 5) {
  console.log("Conceito C — Regular.");
} else {
  console.log("Reprovado. Vamos tentar de novo.");
}
// Resultado: "Conceito B — Bom!"

Operador Ternário

Quando a condição é simples, existe uma forma mais curta de escrever um if/else. É chamado de operador ternário:

// Sintaxe: condição ? valorSeTrue : valorSeFalse

const idade = 20;
const acesso = idade >= 18 ? "Permitido" : "Negado";
console.log(acesso); // "Permitido"

// Equivale a:
// if (idade >= 18) {
//   acesso = "Permitido"
// } else {
//   acesso = "Negado"
// }

Use o ternário apenas para casos simples. Se a lógica for complexa, prefira o if/else tradicional — código legível vale mais do que código curto.

switch — quando há muitas opções fixas

O switch é ideal quando você precisa comparar uma variável com vários valores possíveis e específicos:

const diaDaSemana = 3;

switch (diaDaSemana) {
  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;
  default:
    console.log("Final de semana!");
}
// Resultado: "Quarta-feira"

Nunca esqueça o break! Sem ele, o JavaScript continua executando os próximos case mesmo que a condição não corresponda — comportamento chamado de fall-through.

Você pode agrupar casos que compartilham o mesmo resultado:

const mes = 4;

switch (mes) {
  case 1:
  case 3:
  case 5:
  case 7:
  case 8:
  case 10:
  case 12:
    console.log("31 dias");
    break;
  case 4:
  case 6:
  case 9:
  case 11:
    console.log("30 dias");
    break;
  case 2:
    console.log("28 ou 29 dias");
    break;
}
// Resultado: "30 dias"

if vs switch — quando usar cada um?

Situação Use
Comparações com ranges (maior, menor) if / else if
Condições compostas com && e || if / else if
Comparação com valores fixos e específicos switch
Apenas dois caminhos simples Ternário ? :

Tarefa para você

Escreva um programa que receba a velocidade de um carro e exiba uma mensagem. Por exemplo velocidade = 95; aí:

  • Se velocidade <= 60: "Dentro do limite." 
  • Se velocidade <= 80: "Atenção: velocidade moderada." 
  • Se velocidade <= 110: "Acima do limite permitido. Multa leve." 
  • Se velocidade > 110: "Perigo! Multa grave."

Tente resolver antes de ver a resposta. Depois, modifique os valores e observe os resultados.

Conclusão

Neste artigo você aprendeu:

  • Operadores de comparação e por que usar ===
  • Estruturas if, else e else if
  • Operadores lógicos &&, || e !
  • O operador ternário para decisões simples
  • A estrutura switch e quando usá-la

📚 Fontes e Referências

Resposta do exercício proposto:

const velocidade = 95;

if (velocidade <= 60) {
  console.log("Dentro do limite.");
} else if (velocidade <= 80) {
  console.log("Atenção: velocidade moderada.");
} else if (velocidade <= 110) {
  console.log("Acima do limite permitido. Multa leve.");
} else {
  console.log("Perigo! Multa grave.");
}