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