Operador ternário Javascript

Introdução

O operador ternário, é um operador condicional do Javascript, normalmente utilizado como atalho para o if.

Além de atalho para o if, utilizá-lo pode deixar o código mais limpo, visto que um if de 4 linhas pode ser substituído por apenas 1.

É possível encadear diversas verificações, mas recomendo não colocar muitas, se não torna o código mais difícil de ler do que um if convencional.

Sintaxe

Basicamente sua sintaxe é, uma condição, valor 1 e valor 2. Caso a condição seja true, o valor 1 é retornado, caso contrário é retornado o valor 2.

condição ? "valor 1" : "valor 2" 

A condição é sempre avaliada como true ou false.

Os valores, podem ser valores de qualquer tipo do Javascript, ele irá retornar normalmente.

O retorno pode ser atribuído a uma variável ou ao retorno de uma função.

Condição normal x operador ternário

Em uma condição normal, é utilizado a instrução if para avaliar algum valor, dessa forma:

let idade = 19;
if (idade >= 18) {
  console.log(true); //vai entrar aqui
} else {
  console.log(false);
}

No caso, coloquei apenas um console.log, mas poderia ser retornado esse valor, ou atribuído a uma variável.

Essa condicional, é uma condição normal e usa 4 linhas de código, vamos reescrever utilizando o operador ternário, fica assim:

let idade = 19;
let podeDirigir = (idade >= 18) ? true : false;
console.log(podeDirigir); //true

Tirando a atribuição de variável e o console.log, a condição está toda em uma linha.

O ternário irá olhar para a condição, que nesse caso é (idade >= 18), e irá avaliar essa condição, caso seja true, ele vai executar o que está após o ponto de interrogação (?). O interrogação é como um “então”.

Caso a condição seja false, então será executado o que está após os dois pontos (:), neste caso, o dois pontos é como um “se não”.

Retornar uma string

No primeiro exemplo, a condição foi avaliada e o retorno era um valor booleano (true ou false), mas esse retorno poderia ser também uma string, para depois concatenar valor em alguma frase:

// let testeCovid = false;
let resultadoTeste = (testeCovid === true) ? "Positivo" : "Negativo";
console.log(`O resultado do teste é: ${resultadoTeste}`);

Neste caso, foi avaliado a variável testeCovid, da mesma forma que a idade anteriormente, e como o valor dela é falso, será executado o que está após o dois pontos, retornando assim a string “Negativo”.

Este valor pode ser concatenado em qualquer string ou ser retornado diretamente para a tela.

Mais de uma condição

É possível colocar mais de uma condição para o operador ternário, esta forma é útil, mas colocar muitas condições, pode colocar mais complexidade ao código.

Recomendo utilizar o operador ternário com até 3 condições, mais que isso fica difícil de dar manutenção.

let tipoPedido = "entrega";
let statusPagamento = "pago";

let situacaoEntrega =
(tipoPedido === "entrega" && statusPagamento === "pago")
  ? "Entrega liberada"
  : "Entrega não liberada";
console.log(situacaoEntrega); //Entrega liberada

Neste caso as condições avaliadas são das variávels tipoPedido e statusPagamento, depois de avaliado, segue o fluxo normal do operador ternário.

Uma dica é sempre colocar as condições entre parenteses, para ficar mais fácil identificar o que é a condição na expressão.

Vídeo

Caso queira ver um vídeo com uma explicação sobre o assunto

Código fonte

O código fonte dos exemplos estão no meu CodeSandbox

Para ver outros canais onde o posto conteúdo e meu Github, veja os Links do Programando Soluções.

Desenvolvimento Web com HTML, CSS e JavaScript

Aprenda a testar Aplicações Javascript

Conclusão

Este operador pode deixar o código mais enxuto e mais limpo, eu particularmente gosto de utilizar bastante esse operador em condições mais simples. Até o próximo post 🙂

Referências

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Conditional_Operator