O operador ternário é um recurso do JavaScript que permite escrever expressões condicionais de forma concisa. Ele é frequentemente usado para atribuições condicionais, substituindo estruturas if...else simples. Nesta aula, vamos explorar sua sintaxe, entender quando é apropriado utilizá-lo e discutir os riscos do aninhamento excessivo.

Dominar o operador ternário torna seu código mais expressivo e enxuto, mas é preciso equilíbrio para não comprometer a legibilidade.

Sintaxe

O operador ternário é o único operador JavaScript que recebe três operandos. Sua sintaxe é:

condicao ? valorSeVerdadeiro : valorSeFalso

A condicao é avaliada como booleana. Se for verdadeira, a expressão retorna valorSeVerdadeiro; caso contrário, retorna valorSeFalso.

Exemplo básico:

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

O operador ternário pode ser usado em qualquer lugar onde uma expressão é esperada: atribuições, retornos de função, dentro de templates literais, etc.

function getStatus(pontuacao) {
  return pontuacao >= 70 ? 'Aprovado' : 'Reprovado';
}

console.log(getStatus(85)); // 'Aprovado'
console.log(getStatus(50)); // 'Reprovado'

Quando usar

O operador ternário é ideal para decisões simples que resultam em valores. Ele torna o código mais compacto e legível quando comparado a um if...else que apenas atribui um valor.

Comparação:

// Com if...else
let mensagem;
if (horas < 12) {
  mensagem = 'Bom dia';
} else {
  mensagem = 'Boa tarde';
}

// Com ternário
let mensagem = horas < 12 ? 'Bom dia' : 'Boa tarde';

Evite usar ternário quando a lógica envolver múltiplas ações (efeitos colaterais) ou quando a condição for muito complexa. Nesses casos, prefira if...else para clareza.

Exemplo de uso adequado em retorno de função:

function parOuImpar(num) {
  return num % 2 === 0 ? 'Par' : 'Ímpar';
}

Aninhamento (e por que evitar)

É possível aninhar operadores ternários, ou seja, colocar um ternário dentro de outro. No entanto, isso geralmente prejudica a legibilidade e é considerado má prática.

Exemplo de aninhamento (evite):

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

Esse código funciona, mas é difícil de ler e manter. O mesmo resultado pode ser obtido com if...else if ou um switch, que são mais claros.

Alternativa legível:

let conceito;
if (nota >= 90) {
  conceito = 'A';
} else if (nota >= 80) {
  conceito = 'B';
} else if (nota >= 70) {
  conceito = 'C';
} else {
  conceito = 'D';
}

Se você precisar de múltiplas condições, considere usar uma estrutura condicional tradicional. O ternário aninhado só é aceitável em casos muito simples e com curto-circuito evidente, mas geralmente é melhor evitá-lo.

Boas práticas

  • Use ternário apenas para atribuições ou retornos simples.
  • Mantenha a condição curta e legível.
  • Nunca aninhe mais de um nível; prefira if...else.
  • Evite ternários com efeitos colaterais (ex.: chamadas de função que alteram estado).

Referências

Exercícios

  1. Crie uma variável temperatura com valor 30. Use o operador ternário para atribuir a uma variável clima o valor 'Quente' se temperatura >= 30, senão 'Frio'. Imprima clima.

    ✓ Resposta:
    let temperatura = 30;
let clima = temperatura >= 30 ? 'Quente' : 'Frio';
console.log(clima); // 'Quente'

  2. Escreva uma função maiorNumero(a, b) que retorna o maior entre dois números usando o operador ternário.

    ✓ Resposta:
    function maiorNumero(a, b) {
  return a > b ? a : b;
}
console.log(maiorNumero(10, 20)); // 20

  3. Dado um número num, use o operador ternário para determinar se ele é positivo, negativo ou zero. (Dica: use dois ternários, mas mantenha a legibilidade.)

    ✓ Resposta:
    let num = -5;
let tipo = num > 0 ? 'Positivo' : num < 0 ? 'Negativo' : 'Zero';
console.log(tipo); // 'Negativo'

  4. Reescreva o código a seguir usando operador ternário: let saudacao; if (periodo === 'manha') { saudacao = 'Bom dia'; } else { saudacao = 'Boa tarde'; }

    ✓ Resposta:
    let saudacao = periodo === 'manha' ? 'Bom dia' : 'Boa tarde';

  5. Qual é a saída do seguinte código? Explique por que.

    let x = 10;
let y = x > 5 ? (x < 15 ? 'médio' : 'grande') : 'pequeno';
console.log(y);

    ✓ Resposta:

    A saída é 'médio'. A condição x > 5 é verdadeira (10 > 5), então o ternário avalia a expressão (x < 15 ? 'médio' : 'grande'). Como 10 < 15, retorna 'médio'.