Nesta aula, vamos explorar as estruturas condicionais fundamentais do JavaScript: if, else e else if. Elas permitem que seu programa tome decisões com base em condições lógicas, executando diferentes blocos de código conforme o resultado de uma expressão booleana. Dominar essas estruturas é essencial para controlar o fluxo de execução e criar lógicas mais complexas.

Condicionais são a base de qualquer programa interativo. Com elas, você pode validar dados, reagir a eventos, implementar regras de negócio e muito mais. Vamos ver desde a sintaxe básica até técnicas avançadas para manter seu código limpo e compreensível.

Sintaxe

O if é a estrutura condicional mais simples. Ele avalia uma expressão e, se for verdadeira, executa o bloco de código associado. A sintaxe básica é:

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

O else pode ser usado para executar um bloco alternativo quando a condição é falsa:

if (condição) {
  // código se verdadeiro
} else {
  // código se falso
}

Já o else if permite testar múltiplas condições em sequência:

if (condição1) {
  // código se condição1 verdadeira
} else if (condição2) {
  // código se condição1 falsa e condição2 verdadeira
} else {
  // código se todas as anteriores falsas
}

Exemplo prático:

let idade = 18;

if (idade < 12) {
  console.log("Criança");
} else if (idade < 18) {
  console.log("Adolescente");
} else {
  console.log("Adulto");
}
// Saída: Adulto

Comparações

As condições em if geralmente usam operadores de comparação. Os principais são:

  • == (igualdade abstrata, com conversão de tipo)
  • === (igualdade estrita, sem conversão)
  • != (diferença abstrata)
  • !== (diferença estrita)
  • >, >=, <, <=

É recomendado usar === e !== para evitar comportamentos inesperados com conversão de tipos. Exemplo:

console.log(5 == "5");  // true (conversão)
console.log(5 === "5"); // false (tipos diferentes)

Além disso, podemos combinar condições com operadores lógicos:

  • && (E lógico): verdadeiro se ambos forem verdadeiros
  • || (OU lógico): verdadeiro se pelo menos um for verdadeiro
  • ! (NÃO lógico): inverte o valor booleano
let idade = 25;
let temCarteira = true;

if (idade >= 18 && temCarteira) {
  console.log("Pode dirigir");
} else {
  console.log("Não pode dirigir");
}
// Saída: Pode dirigir

Encadeamento

É possível aninhar estruturas condicionais umas dentro das outras, criando encadeamento. No entanto, é importante evitar profundidade excessiva para manter a legibilidade. Exemplo de encadeamento:

let numero = 10;

if (numero > 0) {
  if (numero % 2 === 0) {
    console.log("Número positivo e par");
  } else {
    console.log("Número positivo e ímpar");
  }
} else {
  console.log("Número não positivo");
}

Muitas vezes, podemos reescrever encadeamentos com else if para torná-los mais planos. Outra alternativa é usar operadores lógicos para combinar condições:

if (numero > 0 && numero % 2 === 0) {
  console.log("Número positivo e par");
} else if (numero > 0 && numero % 2 !== 0) {
  console.log("Número positivo e ímpar");
} else {
  console.log("Número não positivo");
}

Boas práticas de legibilidade

Escrever condicionais legíveis é fundamental para manutenção do código. Algumas dicas:

  • Use chaves sempre, mesmo para blocos de uma linha. Isso evita erros ao adicionar código posteriormente.
  • Evite encadeamentos profundos (mais de 3 níveis). Considere extrair lógica para funções ou usar switch quando houver muitas condições fixas.
  • Prefira condições positivas em vez de negações duplas. Exemplo: em vez de if (!(x < 10)), use if (x >= 10).
  • Use nomes descritivos para variáveis e condições. Em vez de if (a && b), prefira if (usuarioAtivo && temPermissao).
  • Considere o operador ternário para atribuições simples: let status = (idade >= 18) ? "adulto" : "menor";

Exemplo de código bem escrito:

function podeAcessar(idade, autorizado) {
  if (idade < 18) {
    return false;
  }
  if (!autorizado) {
    return false;
  }
  return true;
}

// Uso:
if (podeAcessar(20, true)) {
  console.log("Acesso permitido");
} else {
  console.log("Acesso negado");
}

Referências

Exercícios

  1. Escreva um programa que verifica se um número é par ou ímpar. Use if e else.

    ✓ Resposta:
    let numero = 7;
if (numero % 2 === 0) {
  console.log("Par");
} else {
  console.log("Ímpar");
}

  2. Crie uma função que recebe uma nota de 0 a 10 e retorna o conceito: A (9-10), B (7-8), C (5-6), D (3-4), F (0-2). Use else if.

    ✓ Resposta:
    function conceito(nota) {
  if (nota >= 9) return "A";
  else if (nota >= 7) return "B";
  else if (nota >= 5) return "C";
  else if (nota >= 3) return "D";
  else return "F";
}
console.log(conceito(8)); // B

  3. Escreva um programa que verifica se um ano é bissexto. Regras: divisível por 400, ou divisível por 4 e não por 100.

    ✓ Resposta:
    function bissexto(ano) {
  if (ano % 400 === 0) return true;
  if (ano % 4 === 0 && ano % 100 !== 0) return true;
  return false;
}
console.log(bissexto(2020)); // true

  4. Use operadores lógicos para simplificar a condição: if (x > 0 && y > 0) { console.log("Ambos positivos"); } escreva uma versão usando if aninhado.

    ✓ Resposta:
    if (x > 0) {
  if (y > 0) {
    console.log("Ambos positivos");
  }
}

  5. Refatore o código abaixo para usar else if e melhorar legibilidade:

    let valor = 10;
if (valor < 5) {
  console.log("pequeno");
} else {
  if (valor < 10) {
    console.log("médio");
  } else {
    console.log("grande");
  }
}

    ✓ Resposta:
    let valor = 10;
if (valor < 5) {
  console.log("pequeno");
} else if (valor < 10) {
  console.log("médio");
} else {
  console.log("grande");
}