As estruturas condicionais são fundamentais em qualquer linguagem de programação, pois permitem que seu código tome decisões baseadas em condições. Em JavaScript, usamos os comandos if, else e else if para controlar o fluxo de execução. Nesta aula, você aprenderá a sintaxe correta, como fazer comparações, como encadear múltiplas condições e boas práticas para manter seu código legível e eficiente.

Dominar condicionais é essencial para criar programas que respondam a diferentes entradas e situações. Vamos explorar cada aspecto com exemplos práticos.

Sintaxe

A estrutura básica de um if em JavaScript é simples: a palavra-chave if seguida de uma condição entre parênteses e um bloco de código entre chaves. Se a condição for verdadeira, o bloco é executado. O else é opcional e executa um bloco quando a condição é falsa. O else if permite testar múltiplas condições em sequência.

Exemplo de sintaxe:

let idade = 18;

if (idade >= 18) {
  console.log('Você é maior de idade.');
} else {
  console.log('Você é menor de idade.');
}

Note que as chaves delimitam o bloco de código. Para uma única instrução, as chaves são opcionais, mas é uma boa prática sempre usá-las para evitar erros.

Comparações

As condições em if geralmente envolvem operadores de comparação. Em JavaScript, temos os operadores: == (igualdade de valor), === (igualdade estrita de valor e tipo), != (diferente), !== (diferente estrito), >, <, >=, <=. É recomendado usar === e !== para evitar conversões implícitas de tipo.

Exemplo:

let numero = '5';

if (numero === 5) {
  console.log('Estritamente igual'); // Não executa, pois '5' (string) !== 5 (number)
}

if (numero == 5) {
  console.log('Igualdade solta'); // Executa, pois '5' é convertido para 5
}

Além disso, podemos usar operadores lógicos como && (E), || (OU) e ! (NÃO) para combinar condições.

Encadeamento

Para testar múltiplas condições em sequência, usamos else if após um if inicial. O JavaScript avalia cada condição de cima para baixo e executa o primeiro bloco cuja condição seja verdadeira; depois, sai da estrutura. Se nenhuma for verdadeira, o else final é executado (se presente).

Exemplo de encadeamento:

let nota = 85;

if (nota >= 90) {
  console.log('Conceito A');
} else if (nota >= 80) {
  console.log('Conceito B');
} else if (nota >= 70) {
  console.log('Conceito C');
} else {
  console.log('Reprovado');
}
// Saída: Conceito B

É importante notar que a ordem das condições importa. No exemplo acima, se a primeira condição for nota >= 80 e depois nota >= 90, uma nota 95 seria capturada pela primeira condição (B) em vez da correta (A). Portanto, organize as condições da mais específica para a mais geral.

Boas práticas de legibilidade

Para manter o código limpo e fácil de entender, siga estas recomendações:

  • Sempre use chaves {} mesmo para blocos de uma linha.
  • Evite condições muito complexas; se necessário, armazene-as em variáveis com nomes descritivos.
  • Prefira === e !== a == e !=.
  • Utilize indentação consistente (2 ou 4 espaços).
  • Quando houver muitos else if, considere usar um switch ou um objeto de mapeamento.

Exemplo de código legível:

const temPermissao = usuario.role === 'admin' || usuario.role === 'moderador';

if (temPermissao) {
  // executa ação
} else {
  // nega acesso
}

Além disso, evite aninhamentos profundos. Se você tiver um if dentro de outro, considere usar cláusulas de guarda (return early) para simplificar.

Referências

Exercícios

  1. Escreva um código que verifica se um número é positivo, negativo ou zero.

    ✓ Resposta:
    let numero = -3;

if (numero > 0) {
  console.log('Positivo');
} else if (numero < 0) {
  console.log('Negativo');
} else {
  console.log('Zero');
}
// Saída: Negativo

  2. Crie uma condição que verifique se uma variável nome é igual a 'João' ou 'Maria' e exiba 'Olá, João ou Maria!' caso contrário exiba 'Olá, desconhecido!'.

    ✓ Resposta:
    let nome = 'Maria';

if (nome === 'João' || nome === 'Maria') {
  console.log('Olá, João ou Maria!');
} else {
  console.log('Olá, desconhecido!');
}
// Saída: Olá, João ou Maria!

  3. Use encadeamento para classificar uma nota de 0 a 100 em conceitos: A (90-100), B (80-89), C (70-79), D (60-69), F (0-59).

    ✓ Resposta:
    let nota = 73;

if (nota >= 90) {
  console.log('A');
} else if (nota >= 80) {
  console.log('B');
} else if (nota >= 70) {
  console.log('C');
} else if (nota >= 60) {
  console.log('D');
} else {
  console.log('F');
}
// Saída: C

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

    ✓ Resposta:
    let ano = 2024;

if ((ano % 400 === 0) || (ano % 4 === 0 && ano % 100 !== 0)) {
  console.log('Bissexto');
} else {
  console.log('Não bissexto');
}
// Saída: Bissexto

  5. Refatore o código abaixo para usar cláusulas de guarda (return early) e melhorar a legibilidade:

    function podeEntrar(idade, temIngresso) {
  if (idade >= 18) {
    if (temIngresso) {
      return 'Pode entrar';
    } else {
      return 'Sem ingresso';
    }
  } else {
    return 'Menor de idade';
  }
}

    ✓ Resposta:
    function podeEntrar(idade, temIngresso) {
  if (idade < 18) {
    return 'Menor de idade';
  }
  if (!temIngresso) {
    return 'Sem ingresso';
  }
  return 'Pode entrar';
}