O operador ternário é uma forma concisa de escrever uma estrutura condicional if...else em JavaScript. Ele é frequentemente usado para atribuições condicionais, permitindo que você atribua um valor a uma variável com base em uma condição em uma única linha.

Embora pareça simples, é importante entender quando e como usá-lo para manter o código legível e evitar armadilhas como o aninhamento excessivo.

Sintaxe

A sintaxe do operador ternário é:

condicao ? valorSeVerdadeiro : valorSeFalso

O operador avalia a condicao (que deve ser um valor booleano ou coercível para booleano). Se for verdadeira, retorna valorSeVerdadeiro; caso contrário, retorna valorSeFalso.

Exemplo básico:

let idade = 20;
let podeVotar = idade >= 18 ? 'Sim' : 'Não';
console.log(podeVotar); // 'Sim'

Neste exemplo, a condição idade >= 18 é verdadeira, então a variável podeVotar recebe o valor 'Sim'.

Quando usar

O operador ternário é ideal para atribuições simples e rápidas onde a condição é clara e o resultado é curto. Ele reduz a verbosidade do código em comparação com um bloco if...else.

Exemplo de uso apropriado:

let mensagem = usuarioLogado ? 'Bem-vindo!' : 'Faça login.';
console.log(mensagem);

Outro caso comum é em retornos de funções:

function getStatus(ativo) {
  return ativo ? 'Ativo' : 'Inativo';
}
console.log(getStatus(true)); // 'Ativo'

Evite usar o operador ternário quando a lógica se torna complexa ou quando o efeito colateral (como chamar funções) é significativo. Prefira if...else para múltiplas condições ou blocos de código maiores.

Aninhamento (e por que evitar)

Embora seja possível aninhar operadores ternários, isso geralmente prejudica a legibilidade e é considerado uma má prática. Exemplo de aninhamento:

let tipo = nota >= 90 ? 'A' : nota >= 80 ? 'B' : nota >= 70 ? 'C' : 'D';
console.log(tipo);

Este código é difícil de ler e entender rapidamente. Em vez disso, prefira usar if...else ou uma estrutura switch para múltiplas condições:

let tipo;
if (nota >= 90) {
  tipo = 'A';
} else if (nota >= 80) {
  tipo = 'B';
} else if (nota >= 70) {
  tipo = 'C';
} else {
  tipo = 'D';
}
console.log(tipo);

O aninhamento também pode ser usado com cuidado em casos muito simples, mas geralmente é melhor evitar. Se precisar de uma expressão ternária para múltiplas condições, considere usar uma função ou um objeto de mapeamento.

Boas práticas

  • Use o operador ternário apenas para atribuições ou retornos simples.
  • Evite aninhamentos; prefira estruturas condicionais mais claras.
  • Não use ternário para executar funções com efeitos colaterais; isso pode tornar o código confuso.
  • Mantenha a condição e os valores curtos para que caibam em uma linha.

Referências

Exercícios

  1. Traduza o seguinte código usando o operador ternário: 
    let resultado;
if (x > 0) {
  resultado = 'positivo';
} else {
  resultado = 'negativo ou zero';
}

    ✓ Resposta: 
    let resultado = x > 0 ? 'positivo' : 'negativo ou zero';
  2. Escreva uma função que recebe um número e retorna 'par' se for par, 'ímpar' caso contrário, usando o operador ternário.

    ✓ Resposta: 
    function parOuImpar(num) {
  return num % 2 === 0 ? 'par' : 'ímpar';
}
  3. O que está errado no seguinte uso do operador ternário? Como corrigir? 
    let cor = 'azul';
let mensagem = cor === 'azul' ? 'O céu é azul' : cor === 'vermelho' ? 'O fogo é vermelho' : 'Cor desconhecida';

    ✓ Resposta: O código aninha ternários, dificultando a leitura. Uma correção seria usar if...else ou switch. Exemplo com if...else:
    let cor = 'azul';
let mensagem;
if (cor === 'azul') {
  mensagem = 'O céu é azul';
} else if (cor === 'vermelho') {
  mensagem = 'O fogo é vermelho';
} else {
  mensagem = 'Cor desconhecida';
}
  4. Use o operador ternário para atribuir a uma variável acesso o valor 'permitido' se idade >= 18 e autorizacao === true, caso contrário 'negado'.

    ✓ Resposta: 
    let acesso = (idade >= 18 && autorizacao) ? 'permitido' : 'negado';
  5. Reescreva a seguinte função sem usar o operador ternário, usando if...else: 
    function saudacao(hora) {
  return hora < 12 ? 'Bom dia' : hora < 18 ? 'Boa tarde' : 'Boa noite';
}

    ✓ Resposta: 
    function saudacao(hora) {
  if (hora < 12) {
    return 'Bom dia';
  } else if (hora < 18) {
    return 'Boa tarde';
  } else {
    return 'Boa noite';
  }
}