if, else e else if
O if é a estrutura que permite ao programa escolher um caminho. É, sem exagero, uma das ideias mais importantes de toda a programação.
Estudar esta lição interativa →Agora que sabemos fazer perguntas (aquelas que resultam em true ou false), falta o passo que dá vida a tudo: usar a resposta para escolher o que fazer. Essa é a função do if, que em inglês significa "se". A ideia é literal: se tal condição for verdadeira, execute este pedaço de código; caso contrário, pule-o. Praticamente tudo que você usa tem um if por trás: se a senha está certa, entra; se o estoque zerou, aparece "esgotado"; se o carrinho passou de 100 reais, o frete sai de graça.
A estrutura tem três partes, e uma delas usa um símbolo novo no curso: as chaves, { }, que marcam onde um bloco de código começa e onde ele termina. Veja a anatomia:
As três partes de um if: a palavra if ("se"), a condição entre parênteses (uma pergunta de sim ou não) e, entre chaves, o bloco que só roda quando a resposta é sim.
O bloco entre chaves é um "pacote" de instruções que fica condicionado à pergunta: se a resposta for true, o JavaScript entra no bloco e executa tudo que está ali dentro; se for false, pula o pacote inteiro e segue adiante. E quando você quer um plano B para o caso do "não", é só emendar um else (em inglês, "senão") com o seu próprio bloco. Havendo mais de duas possibilidades, o else if encadeia perguntas novas no meio do caminho. O desenho do fluxo ajuda a enxergar:
O if funciona como uma bifurcação na estrada: a condição divide o caminho em dois. Se for verdadeira, o programa segue por um lado; se for falsa, pelo outro.
const nota = 7;
if (nota >= 7) {
console.log("Aprovado!");
} else if (nota >= 5) {
console.log("Recuperação");
} else {
console.log("Reprovado");
}
// Troque o valor de 'nota' lá em cima e rode de novo
// para ver os outros caminhos!Acompanhe o fluxo do exemplo: o programa testa a primeira condição; se ela for verdadeira, executa aquele bloco e ignora todos os outros. Se for falsa, desce para o próximo else if, e assim por diante, até encontrar uma condição verdadeira ou cair no else final (o "nenhuma das anteriores"). Como as perguntas são testadas de cima para baixo e a primeira verdadeira vence, a ordem importa. Repare: o teste do 7 vem antes do teste do 5. Se fosse ao contrário, uma nota 8 cairia na "recuperação", porque 8 também é maior que 5, e o programa nem chegaria a testar o resto. Regra prática: condições mais exigentes primeiro.
Eis um dos erros mais clássicos de quem está começando: escrever if (nota = 7), com um sinal só. Lembra da leitura que fixamos no módulo passado? Um = sozinho significa "recebe": em vez de perguntar, essa linha guarda o 7 dentro de nota, e o if trata o resultado como um "sim". Com let, o programa não mostra erro nenhum, só passa a se comportar errado, o que torna o bug difícil de achar (com const, o JavaScript ao menos reclama: Assignment to constant variable, porque const não aceita guardar outro valor). Dentro de uma condição, comparação é sempre com === (ou >=, <= e companhia).
A melhor forma de entender isto é brincar com os valores. No editor acima, mude a nota para 6, depois para 3, rodando a cada troca, e acompanhe qual caminho o programa escolhe. Ver a decisão mudar conforme o dado é o que faz a ficha cair.
// Sua vez! Complete o if/else.
const nota = 6;
// Mostre "Passou!" se a nota for 7 ou mais; senão, mostre "Estude mais".
if (nota >= 7) {
console.log("...");
} else {
console.log("...");
}Complete o if/else e clique em Rodar.