Operadores Condicionais em Javascript

Introdução aos Operadores Condicionais

Os operadores condicionais (também chamados de instruções condicionais) em JavaScript são a forma como um programa toma decisões. Em vez de executar todas as linhas de cima para baixo, eles permitem que seu código escolha qual bloco executar com base em uma condição ser true ou false.

Este capítulo abrange o conjunto completo de ferramentas que você usa no dia a dia:

• as instruções if, else if e else,
• o operador ternário ? : (e quando não aninhá-lo),
• como os valores truthy e falsy afetam as condições,
• avaliação de curto-circuito com && e ||,
• o operador de coalescência nula ?? para valores padrão.

Uma condição é qualquer expressão que o JavaScript pode avaliar como boolean. Ela geralmente é construída com operadores de comparação (>, <, ===, …) e combinada com operadores lógicos (&&, ||, !).

A Instrução if

A instrução if é o condicional mais fundamental, usado para executar um bloco de código apenas quando uma condição especificada é verdadeira.

Sintaxe

if (condition) {
  // code to execute if condition is true
}

Exemplo

A Instrução else

A instrução else complementa o if, executando seu bloco quando a condição do if é falsa.

Sintaxe

if (condition) {
  // code if condition is true
} else {
  // code if condition is false
}

Exemplo

A Instrução else if

O else if permite testar várias condições em sequência. O JavaScript verifica cada uma de cima para baixo e executa o primeiro ramo cuja condição é verdadeira — os demais são ignorados, mesmo que também fossem verdadeiros. Essa ordem importa: coloque as condições mais específicas ou de maior prioridade primeiro.

Sintaxe

if (condition1) {
  // code if condition1 is true
} else if (condition2) {
  // code if condition2 is true
} else {
  // code if neither condition is true
}

Exemplo

Quando você está comparando um valor contra muitas opções fixas, uma cadeia de else if pode se tornar repetitiva. A instrução switch geralmente é uma solução mais limpa para esse caso.

O Operador Condicional (Ternário) ?

O operador ternário (? :) é uma forma compacta de abreviação para if...else. É o único operador do JavaScript que recebe três operandos e, ao contrário de uma instrução, retorna um valor — o que o torna ideal para atribuir um resultado com base em uma condição.

Sintaxe

let result = condition ? value1 : value2;

Se condition for verdadeira, a expressão avalia para value1; caso contrário, avalia para value2.

Exemplo

Por produzir um valor, o operador ternário também é útil diretamente dentro de template strings e argumentos de função:

Ternários Aninhados e Encadeados

Um operador ternário pode ele mesmo retornar outro ternário, o que imita uma cadeia de else if:

Isso funciona, mas a legibilidade cai rapidamente. Evite aninhar ternários quando a lógica for não trivial — um a ? b : c ? d : e profundamente encadeado é difícil de ler e fácil de errar. Prefira if...else if (ou switch) quando tiver mais de uma condição e reserve o ternário para escolhas simples de um ou outro.

Valores Truthy e Falsy

A condição em um if ou ternário não precisa ser um boolean. O JavaScript converte o que você fornecer para true ou false. Os valores que se convertem para false são chamados de falsy; todo o resto é truthy.

Existem exatamente oito valores falsy:

false
0        // and -0
0n       // BigInt zero
""       // empty string
null
undefined
NaN

Todo o resto — incluindo "0", "false", [] (array vazio) e {} (object vazio) — é truthy.

É por isso que um atalho comum como if (name) { ... } verifica se name tem um valor utilizável, em vez de name === "" ou name === undefined.

Avaliação de Curto-Circuito

Os operadores lógicos && e || nem sempre retornam um boolean — eles retornam um de seus operandos e param de avaliar assim que o resultado é conhecido. Isso é chamado de curto-circuito.

• a && b retorna a se a for falsy; caso contrário, retorna b.
• a || b retorna a se a for truthy; caso contrário, retorna b.

O fallback com || tem uma armadilha: ele trata todos os valores falsy como ausentes. Se 0 ou "" for um valor válido, o || irá substituí-lo incorretamente. Esse é exatamente o problema que ?? resolve.

Consulte o capítulo dedicado de operadores lógicos para as regras completas.

O Operador de Coalescência Nula (??)

O operador de coalescência nula ?? retorna seu lado direito somente quando o lado esquerdo é null ou undefined — não para outros valores falsy como 0 ou "".

Use ?? sempre que atribuir valores padrão a variáveis que legitimamente podem ser 0, "" ou false. Use || apenas quando genuinamente quiser que qualquer valor falsy acione o fallback.

Conclusão

Os operadores condicionais são a forma como seu código toma decisões. Use if / else if / else para lógica de ramificação, o ternário ? : para escolhas simples de valor (nunca profundamente aninhado) e ?? para fornecer valores padrão com segurança. Combine-os com operadores de comparação e operadores lógicos para expressar qualquer condição, e mude para a instrução switch quando estiver comparando um valor contra muitas opções.

Prática