Trabalhando com o operador ternário em JavaScript

Por: Angelo Luis Ferreira | 23/06/2020 Acessos: 8.146

Neste tutorial, vamos apresentar a utilização do operador condicional mais otimizado em JavaScript, o operador ternário que permite verificar uma condição e executar duas instruções, dependendo da condição avaliada, true ou false.

Operador ternário é o único operador em JavaScript que possui 3 operandos (variáveis ou propriedades). Deve ser utilizado como um atalho para as instruções condicionais if/else , possibilitando verificar condições de forma mais simples e mais rápida.

Instruções condicionais são recursos essenciais no desenvolvimento da lógica de qualquer sistema ou aplicação. Eles são utilizados quando é necessário que determinado código seja executado apenas se atender a uma condição. São eles: if/else, else if e operador ternário.

1. Operador condicional ternário

1. A estrutura de um operador ternário, que é uma versão compacta da estrutura if/else, é compreendida da seguinte forma:

condição ? valor se for verdareiro : valor se for falso;

Primeiro declaramos a condição, depois após o sinal de interrogação (?), o código a ser executado caso a condição seja verdadeira e finalmente depois dos dois pontos (:), o código a ser executado caso a condição seja falsa. Chamamos de operador ternário justamente pelo fato de realizar essas 3 operações.

2. Utilização do operador ternário

2.1. Podemos atribuir uma estrutura condicional a uma variável sem a necessidade de utilizarmos as instruções condicionais if/else. Veja o exemplo abaixo:

let max = (n1 > n2) ? n1 : n2

No exemplo, o valor maior (n1 ou n2) será atribuído à variável max.

Veja o nosso exemplo em ação:

See the Pen Operador ternário JS - 01 by Angelo Luis Ferreira (@angeloalf) on CodePen.

2.2. No exemplo a seguir, verificamos se um valor é maior que 18 para atribuir uma string à variável, entre duas condições.

let idade = Math.floor(Math.random() * 100) //número inteiro aleatório entre 0 e 99;
let maiorIdade = (idade >= 18) ? 'Maior de idade' : 'Menor de idade'

Veja o nosso exemplo em ação:

See the Pen Operador Ternário JS - 02 by Angelo Luis Ferreira (@angeloalf) on CodePen.

 2.3 . É possível usar também o operador ternário em uma estrutura maior. Veja como no exemplo abaixo:

let n = Math.floor(Math.random() * 10) // número aleatório entre 0 e 9;
  let número = (n == 0) ? 'zero' :
                (n == 1) ? 'um' :
                (n == 2) ? 'dois' :
                (n == 3) ? 'três' :
                (n == 4) ? 'quatro' :
                (n == 5) ? 'cinco' :
                'número maior que cinco'

Neste exemplo, estendemos a utilização do operador ternário de forma que quando a primeira condição não é verdadeira, verifica-se uma nova condição. Se nenhuma condição for atendida, utiliza-se a condição falsa que é o último valor.

  Veja o nosso exemplo em ação:

See the Pen Operador Ternário JS - 03 by Angelo Luis Ferreira (@angeloalf) on CodePen.

Documentação Oficial

1. [Operador Condicional Ternário] » Sobre o operador condicional ternário - MDN Web Docs.

2. [if...else] » Sobre a instrução condicional if/else - MDN Web Docs.