Tomando decisões com if e else

Uma instrução if executa um bloco de código só quando a condição é true. Com else if, o JavaScript confere as condições de cima para baixo e para na primeira que for true.

Executando código só às vezes

Até agora, todo programa executou cada linha, toda vez. Programas úteis se comportam de modos diferentes em situações diferentes: um jogo mostra "You win" só quando a pontuação é alta o bastante, e uma loja cobra frete só quando o pedido é pequeno. A instrução if é o jeito como o JavaScript escolhe.

const temperature = 31;
if (temperature >= 30) {
  console.log("Hot day. Drink water.");   // só se a condição for true
}
console.log("Done");                      // sempre roda

A condição vai entre parênteses depois da palavra if. Ela é qualquer expressão que produza um boolean, em geral uma comparação da unidade anterior. O código a executar quando ela é true vai entre chaves, que formam um bloco. Se a condição é false, o JavaScript pula o bloco inteiro e continua depois da chave de fechamento. Acima, as duas linhas aparecem. Mude temperature para 20 e só "Done" aparece. As linhas dentro do bloco têm recuo de dois espaços. O JavaScript não precisa do recuo, mas ele mostra num relance quais linhas pertencem ao if, e todo programador experiente vai esperar por ele.

else: o outro caminho

Muitas vezes você quer uma coisa quando a condição é true e outra quando é false. Acrescente um bloco else. Exatamente um dos dois blocos roda, nunca os dois e nunca nenhum.

const n = 7;
if (n % 2 === 0) {
  console.log(n + " is even");
} else {
  console.log(n + " is odd");
}
// mostra: 7 is odd

else if: mais de duas escolhas

Para várias possibilidades, encadeie condições com else if. O JavaScript as testa de cima para baixo. Assim que uma é true, ele executa aquele bloco e pula todo o resto, mesmo que condições seguintes também fossem true. O else final pega tudo o que não combinou com nada acima.

const score = 72;
if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("F");
}
// mostra: C

A ordem das condições importa. Com nota 95, o primeiro teste já é true e A aparece. Se os testes estivessem na ordem contrária, começando por score >= 70, uma nota 95 pararia no primeiro teste e mostraria C. Quando as faixas se sobrepõem assim, ponha a condição mais estreita primeiro. Acompanhar o código à mão é um bom hábito: escolha um valor, leia de cima para baixo e diga em voz alta qual caminho ele segue.

Aninhando e combinando

Um bloco pode conter outra instrução if, o que se chama aninhamento. Muitas vezes dá para evitar aninhamentos profundos combinando condições com && e ||, da unidade anterior. Estes dois trechos de código fazem o mesmo trabalho, e o segundo é mais fácil de ler:

if (age >= 8) {                     // aninhado
  if (height >= 120) {
    console.log("You can ride");
  }
}

if (age >= 8 && height >= 120) {   // combinado
  console.log("You can ride");
}

O operador condicional

Quando você só precisa escolher entre dois valores, existe uma forma compacta chamada operador condicional (ternário): condition ? valueIfTrue : valueIfFalse. Por exemplo, const label = n % 2 === 0 ? "even" : "odd";. Use-o para escolhas curtas de um valor. Para qualquer coisa que execute várias instruções, um if e else normais são mais claros.

Um deslize comum é escrever um só sinal de igual dentro da condição: if (score = 100). Isso guarda 100 em score em vez de comparar, e o bloco roda toda vez. Sempre compare com ===.