Felipe Kautzmann

Operador “?” e “:” ternário em JavaScript?


Também conhecido como operador ternário condicional

Esse operador facilita tornando nosso código mais curto, frequentemente usada como um atalho para a instrução if.

if (condicao) { ... }

Uma diferença crucial em relação ao if é que o ternário é um operador e não uma declarão tipo função ou váriavel. Ele sempre resulta em um valor que é retornado conforme sua lógica.

// se condicaoBoolean for true
// a primeiraExp será chamada
// caso contrário
// segundaExp será chamada
condicaoBoolean
  ? primeiraExp()
  : segundaExp()

A vantagem do ternário para atribuição de valor é clara: não é preciso repetir o nome da variável. Por exemplo, nesta atribuição com if usamos 2 linhas (incluindo a declaração da variável):

var x = 20;
if (varBoolean) x = 10;

Já com o operador pode-se declarar, aplicar a condicional e atribuir em uma única linha:

var x = foo ? 10 : 20;

Deve se ter cuidado com operações muito complexas, a recomendação de uso é de casos simples, pois condições complexas ou aninhadas podem dificultar a leitura do código:

const premioFinal =
  bilhete === 344
    ? 10000
    : bilhete === 321
      ? 7000
        : 1000;
Resumindo é uma prática recomendada usar o operador ternário quando facilitar a leitura do código. Se a lógica contiver muitas instruções if/else você não deve usar os operadores ternários.

Espero que esse artigo ajude você a tornar seu código mais limpo!

Voltar