Estou estudando JavaScript e tenho dúvidas quanto às diferentes formas de se fazer um if
/ else
. Por exemplo, isto:
foo ? foo : foo
Como exatamente funciona?
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.
O que você tem é um operador condicional ternário, uma variante de if/else, muito comum não só em JavaScript.
A sintaxe é: [ condição a testar ] ? [ resposta se verdadeiro ] : [ resposta se não verdadeiro ]
Exatamente esse operador condicional ternário que você mostrou com foo
três vezes não faz nada... mas se você tiver
var a = dog ? cat : mouse;
então se dog
for verdadeiro (i.e, diferente de 0
, false
, null
, undefined
) então a
recebe o valor de cat
, se for falso recebe o valor de mouse
Exemplo de condições:
var valor = 10;
valor == 20 ? 'sim' : 'não' // retorna 'não'
valor !=20 ? 'sim' : 'não' // retorna 'sim'
valor < 20 ? 'sim' : 'não' // retorna 'sim'
valor - 10 ? 'sim' : 'não' // retorna 'não' porque 0 é interpretado como false, neste caso melhor usar (valor - 10) == 0 ?
Este operador condicional ternário é o semelhante a
if(condição) { //faz algo se a condição for verdadeira }
else { //faz outra coisa caso contrário }
Porém (e crédito ao @bfavareto por referir esse detalhe que tinha esquecido de referir), este operador retorna um valor (que pode ser atribuído a uma variavel, dentro de outro ternário ou como condição de um outro if statement).
Assim pode usar-se
var variavel = foo ? foo : bar;
// ou mesmo, ainda mais comprimido, útil em alguns casos
var variavel = foo || bar;
O javascript é uma linguagem realmente interessante nesse aspecto.
Além de estruturas da linguagem para controle de fluxo if/else
,
switch
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.
Vou citar apenas as estruturas de controle de fluxo de execução linear:
if
e o switch
.
if
O 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 break
s ao final de cada trecho, equivale a if
s em cadeia.
O código anterior poderia ser escrito assim:
if (expressao == "pequeno") {
pequeno();
}
else if (expressao == "médio") {
medio();
}
else if (expressao == "grande") {
grande();
}
else {
tamanhoInvalido();
}
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";
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!
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]();
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)();
Essa forma de if-else é conhecida como operador condicional ternário. É comum em várias linguagens, não só para javascript.
A vantagem desse formato é que você faz um if-else em uma linha e forma bem limpa.
O formato é:
< condição > ? < caso verdadeiro > : < caso falso >;
Exemplo:
Se eu utilizar um operador condicional ternário para limitar o valor x
para sempre ser no mínimo 40
, seria:
x = (input < 40) ? 40 : input;
Agora compare com:
if (input < 40)
x = 40;
else
x = input;
Isso é um operador ternário. Veja documentação oficial na MDN
Embora possa complicar a legibilidade de código, em algumas situações é extremamente útil e sucinta.
Exemplo:
// Pseudo código
condicao ? executa-se-verdadeira : executa-se-falsa
// Imprime "1 não é maior que 2"
console.log(1 > 2 ? "1 é maior que 2": "1 não é maior que 2");
Recomendações úteis
?:
if-else
tradicional funcionaTernário, do latim ternarius, quer dizer "composto de três itens". As operações ternárias, sejam em matemática ou em ciência da computação, são aquelas que têm três operandos.
Disso, pode-se inferir que existem operações unárias, binárias e ternárias também.
Acima, um exemplo de operação binária. É composta por dois operandos, X
e Y
, e resulta em um só valor.
O operador condicional (ternário) é o único operador JavaScript que possui três operandos. Este operador é frequentemente usado como um atalho para a instrução if. Fonte.
O JavaScript possui um único operador ternário, que é o operador condicional. É frequentemente chamado de operador ternário, por ser o único da linguagem. Ele não é O operador ternário, porém UM operador ternário.
resultado = {condição} ? {expressão se verdadeiro} : {expressão se falso}
Portanto, sobre o operador condicional do JavaScript, o ?:
, como muitas das respostas já exemplificaram:
idade >= 18 ? servirVinho() : servirSuco()
Lê-se: se idade
é maior ou igual à 18
, então servirVinho()
, caso contrário, servirSuco()
.
Mas não pense que operações ternárias se limitam ao ?:
. Em alguns dialetos do SQL existe o BETWEEN
, que é um operador ternário:
[...] WHERE {campo} BETWEEN {expressão 1} AND {expressão 2}
Veja que é um ternário pois faz uma operação composta de três itens e as evalua em um só, que no caso é verdadeiro ou falso.
O JavaScript, como a maioria das linguagens C-like, tem esses operadores unários. Recebem um operando, X
, e resultam em um só Y
.
i++ // incremento
i-- // decremento
-i // negativo
+i // positivo
!i // negação
var a = 10;
//Método padrão
if(a == 10){
//Faça isso
}else{
//Faça isso
}
//Método simplificado
a == 10 ? /*Faça isso*/ : /*Faça isso*/