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

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

17 de agosto de 2018 0 Por Ramos de Souza Janones
Powered by Rock Convert

Nesta dica Javascript, você aprende sobre o Operador condicional ternário if/else com “?” e “:”. Com exemplos práticos passo a passo.

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.

Frontend Do Zero Ao Profissional

LEIA TAMBÉM:  TypeScript 3.5: Os novos recursos do TypeScript

(*) 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.

if (condicao) verdadeiro();
else falso();

 

Sintaxe segundo a MDN:

if (condition)
     statement1
[else
     statement2]

 

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.

switch (expressao) {

    case "pequeno":
        pequeno();
        break;

    case "médio":
        medio();
        break;

    case "grande":
        grande();
        break;

    default: // não é pequeno, nem médio, nem grande
        tamanhoInvalido();
        break;
}

 

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:

Curso completo de Games, inclusive Realidade Aumentada.Powered by Rock Convert
if (expressao == "pequeno") {
    pequeno();
}
else if (expressao == "médio") {
    medio();
}
else if (expressao == "grande") {
    grande();
}
else {
    tamanhoInvalido();
}

 

LEIA TAMBÉM:  Diferença entre as funções var name = function() e function name()?

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.

var mensagem = sexo == 'M' ? "bem vindo senhor" : "bem vinda senhora";

 

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:

var opcaoDoUsuario = usuario.opcao || "Opção padrão";

 

jsfiddle

Isso equivale ao seguinte:

var opcaoDoUsuario = usuario.opcao ? usuario.opcao : "Opção padrão";

 

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

a && metodo();

 

equivale a

if (a) metodo();

 

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.

// suponha que 'pequeno', 'medio' e 'grande' são funções
var mapaDeTamanhos = { "pequeno": pequeno, "médio": medio, "grande": grande };

 

Agora no lugar dos switchs, podemos fazer assim:

// suponha que tamanho é uma variável que só pode assumir os valores
// "pequeno", "médio" e "grande"
mapaDeTamanhos[tamanho]();

 

LEIA TAMBÉM:  Como criar um site sem recarregar a cada clique

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):

// que ver isso vai pensar: "mas que droga é essa?"
// e vai ficar com cara de WTF =\
(mapaDeTamanhos[tamanho] || tamanhoInvalido)();

 

jsfiddle

– Como adicionar notificações (Push notification) em seu site

» Programação » Javascript 

React Native Do Zero Ao Profissional: crie apps para Android e IOSPowered by Rock Convert
Siga os bons!

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.

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




Frontend Do Zero Ao Profissional