A formação mais procurada no Mundo.

Drops Javascript – Operador condicional ternário if/else com “?” e “:”

the-union-of Drops Javascript - Operador condicional ternário if/else com “?” e “:”
foto_ramos Drops Javascript - Operador condicional ternário if/else com “?” e “:”

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.
foto_ramos Drops Javascript - Operador condicional ternário if/else com “?” e “:”

Últimos posts por Ramos de Souza Janones (exibir todos)

Outras respostas já explicaram como funciona o operador condicional ternário, com bons exemplos. Ele avalia expressões condicionais, de maneira parecida com o if:

var variavel = condicao ? valorSeTrue : valorSeFalse;
Ou seja, se a condição (por exemplo x > 5) for verdadeira, a variavel recebe o valor valorSeTrue, e se for falsa, o valor valorSeFalse.

Uma diferença fundamental em relação ao if é que o ternário* é um operador, e não um statement. Ele sempre resulta em um valor, que é retornado, como se vê no exemplo. Não tem como inicializar uma variável em uma linha com if justamente porque ele não gera valor nenhum.

Por isso o operador condicional ternário costuma ser mais utilizado para atribuição de valor a uma variável, enquanto o if comum é mais usado para controle de fluxo.

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 6 linhas (incluindo a declaração da variável):

var x;
if(foo) {
x = 10;
} else {
x = 20;
}
Ou, na melhor das hipóteses, duas linhas:

var x = 20;
if(foo) x = 10;
Já com o operador pode-se declarar, aplicar a condicional e atribuir em uma única linha:

var x = foo ? 10 : 20;
O operador condicional ternário é recomendado para casos simples, pois condições complexas ou aninhadas podem dificultar a leitura do código:

var cargo = salario <= 1000 ? ‘junior’ : salario <= 5000 ? ‘senior’ : ‘diretor’;
Se as opções de valor a ser retornado (valorSeTrue e valorSeFalse no meu exemplo do início) forem chamadas de função, esse operador pode até ser utilizado para controle de fluxo:

// Cuidado: código abaixo pode ser péssima prática
// se você não souber o que está fazendo!
validaEmail(email) ? enviaEmail(email) : mostraErro();
Nesses casos há quem defenda o uso exclusivo desse operador em vez do if, especialmente quando se programa em estilo funcional (onde ainda se poderia capturar o retorno das funções enviaEmail ou mostraErro, caso necessário). Eu pessoalmente acho que cada um tem o seu lugar, e em geral prefiro usar o ternário para atribuições, e o if para controle de fluxo.

(*) O operador condicional ternário é popularmente conhecido simplesmente como “ternário”, ou “operador ternário”. Ele é ternário porque tem 3 argumentos (a condição e os dois possíveis valores), mas a qualidade de ser condicional pode ser vista como mais relevante, já que trata da sua função. Nesta resposta, optei por chamar algumas vezes só de “ternário”, pela simplicidade, e outras pelo nome completo, pra reforçar.

Visão Geral Sobre Condicionais no Javascript

O javascript é uma linguagem realmente interessante nesse aspecto. Além de estruturas da linguagem para controle de fluxo if/elseswitch e outros, e também o operador ternário condição ? a : b que alterna entre valores, existem ainda usos inusitados de operadores lógicos, que podem atuar no lugar de alguns testes ternários, especialmente o operador lógico OU que nesse caso assume o nome de “operador de coalescência”: anulável || valor-padrão. Podemos ainda citar, formas de fazer if sem usar if, que consta em usar um mapa associativo entre valores e respostas, e não usar nenhum if nem switch.

Estruturas de Controler de Fluxo

Vou citar apenas as estruturas de controle de fluxo de execução linear: if e o switch.

if

if é uma estrutura de controle de fluxo baseado em uma condição, que sempre possui um statement/bloco de execução para quando a condição é verdadeira, e pode opcionalmente apresentar um statement/bloco para quando for falsa.

 

Sintaxe segundo a MDN:

 

switch

Já o switch é uma estrutura de controle de fluxo que permite desviar a execução para um dentre vários pontos, dependendo do valor de uma expressão. Cada ponto de desvio é marcado com um rótulo case valor:, ou então o rótulo padrão, que é executado quando nenhum outro é igual à expressão.

Suponhamos uma expressão variável, que pode assumir os valores: “pequeno”, “médio” e “grande”, ou outros valores quaisquer.

 

Note que é usada a palavra-chave break, que serve para sair do bloco do switch ao final de cada trecho. Isso é feito, pois o javascript continuaria executando o trecho do rótulo seguinte na auxência do break.

Sintaxe do switch na MDN

Um switch com breaks ao final de cada trecho, equivale a ifs em cadeia. O código anterior poderia ser escrito assim:

 

Operadores condicionais

O operador condicional ternário, é o mais conhecido, mas à medida que se vê códigos em javascript, se encontra ocasionalmente o operador de coalescência.

O operador ternário escolhe um entre dois valores, baseando-se em uma condição.

 

Já o operador de colescência, serve para indicar um valor padrão, caso uma expressão seja avaliada como falsa. O seu uso é feito, quando uma variável pode possuir o valor anulado:

 

jsfiddle

Isso equivale ao seguinte:

 

Note que essa é uma forma de definir um valor padrão para quando o valor da variável é nulo por exemplo, pois nulo é avaliado como falso.

Outras loucuras com operadores

 

equivale a

 

Essa forma bizarra de fazer um if, mesmo parecendo inútil, encontra um uso razoável na minificação de arquivos de script. Em arquivos minificados, essa técnica economiza 2 caracteres.

jsfiddle ← esse fiddle não está rodando sozinho, portanto aperte Run que vai funcionar!

Usando arrays e mapas associativos no lugar de ifs

Usar arrays e mapas associativos no lugar de ifs, é uma boa prática que pode tornar o programa mais fácil de ententer, principalmente quando se nota que há muitas estruturas de if/switch se repetindo pelo código a fora.

 

Agora no lugar dos switchs, podemos fazer assim:

 

Obviamente que não se deve fazer isso com todos os ifs/switchs, mas sim quando isso de fato tornar o programa mais fácil de entender… usar nomes descritivos também ajuda.

Note ainda que essa técnica dificulta indicar um padrão, tal como o deafult do switch. Poderiamos fazer como a seguir, mas ai a legibilidade vai ficar um pouco abalada (o que é péssimo):

 

jsfiddle

Compartilhe.

PinIt