if/else em JavaScript: condições e operador ternário

A estrutura do if em JavaScript

O if em JavaScript executa um bloco de código somente quando a condição é verdadeira. A estrutura é simples: a palavra-chave, a condição entre parênteses e o bloco entre chaves:

A condição age >= 18 resulta em true, então o bloco é executado. Se age fosse 16, a condição seria false e o JavaScript pularia o bloco inteiro.

Tecnicamente, as chaves são opcionais quando o bloco tem apenas uma instrução, mas use-as sempre. if sem chaves é uma fonte clássica de bugs: alguém adiciona uma segunda linha depois e esquece que ela não está dentro do bloco.

else: o caminho alternativo

Combine if com else para executar um código diferente quando a condição for falsa:

Apenas um dos dois caminhos é executado. Nunca os dois, nunca nenhum. O else não aceita condição própria — ele é o "pega-tudo" para quando o if foi falso.

else if: escolhendo entre várias opções

Quando você tem mais de dois casos, encadeie com else if. O JavaScript testa cada condição em ordem e para na primeira que for verdadeira:

Só um caminho é executado. Assim que uma condição bate, o restante é ignorado — mesmo que também fosse verdadeiro. Por isso a ordem importa: se você invertesse a cadeia e checasse score >= 60 primeiro, todo mundo acima de 60 receberia um D.

O else final é opcional, mas incluí-lo deixa sua intenção bem clara: "se nada mais bateu, faça isso".

A condição pode ser qualquer expressão

O que vai dentro dos parênteses não precisa ser uma comparação. Pode ser qualquer expressão — o JavaScript converte o resultado para booleano (é aí que entram os valores truthy e falsy):

Strings não vazias são truthy. Já 0 e strings vazias são falsy, então quando items.length é 0, o fluxo cai no else. Esse é o idioma padrão do JavaScript pra verificar se "tem alguma coisa ali".

A lista completa de valores falsy é curta e vale a pena decorar: false, 0, -0, 0n, "", null, undefined e NaN. Todo o resto é truthy — incluindo "0", "false", [] e {}. Esses dois últimos costumam pegar muita gente de surpresa.

Combinando condições: && e ||

Use && (e) e || (ou) para combinar condições:

&& exige que os dois lados sejam truthy. Já o || se contenta com pelo menos um. Ambos fazem short-circuit: o && para no primeiro valor falsy, e o || para no primeiro truthy. Isso faz diferença quando a segunda condição tem efeito colateral ou poderia estourar um erro — user && user.name devolve undefined tranquilamente se user for null, sem quebrar nada.

Quando misturar operadores lógicos, use parênteses para deixar a precedência explícita:

Sem os parênteses, o && tem precedência maior que o ||, o que normalmente é o oposto do que a gente espera ao ler o código.

== vs === (prefira sempre ===)

Na hora de comparar valores dentro de um if, use === e !== em vez de == e !=:

== faz coerção de tipos antes de comparar, o que gera surpresas como "" == 0 ser true e null == undefined também ser true. Já o === compara sem coerção — mesmo tipo e mesmo valor. Use === por padrão. A única exceção comum é x == null, que verifica null e undefined de uma vez só.

Operador ternário em JavaScript

Quando você precisa escolher entre dois valores, o operador ternário condição ? a : b costuma ficar mais enxuto do que um if/else completo:

O ternário é uma expressão — ele produz um valor. Essa é a grande diferença em relação ao if/else, que é uma instrução. Use o operador ternário quando você precisa do resultado (atribuir uma variável, retornar algo, montar uma string). Já o if/else é a melhor escolha quando o objetivo é executar efeitos colaterais.

Dá pra encadear ternários, sim, mas aí a legibilidade despenca:

// Não faça isso:
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";

Se a ideia é encadear várias checagens, volte pro else if.

if aninhado vs. else if no mesmo nível

Às vezes uma condição só faz sentido dentro de outra. Nesses casos, aninhar é o caminho:

Mas aninhar três ou quatro níveis já é sinal de código com cheiro ruim. Prefira achatar a estrutura com early returns ou juntando as condições numa só:

Retornos antecipados mantêm cada caminho curto e no mesmo nível de indentação. É bem mais fácil de bater o olho e entender do que uma pirâmide de ifs aninhados.

Uma pegadinha clássica: atribuição dentro do if

= atribui. === compara. Confundir os dois dentro de uma condição é um bug manjado em JavaScript:

status = "done" atribui "done" a status e resulta em "done", que é truthy — então o bloco sempre executa, e você acabou sobrescrevendo a variável sem perceber. Linters pegam esse tipo de deslize. O modo estrito, não. Fique atento e use === quando a intenção for comparar.

A seguir: switch

Quando você precisa comparar um mesmo valor contra várias opções possíveis, uma sequência longa de else if começa a ficar repetitiva. O switch do JavaScript foi feito justamente pra esse cenário — e ele tem suas próprias peculiaridades envolvendo break e fall-through, que é o que vem a seguir.