120

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?

7 Respostas 7

119
+50

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.

5
  • 2
    +1 por referir que este operador retorna um valor (que pode ser atribuído a uma variavel, dentro de outro ternário ou num if statement.)
    – Sergio
    Commented 8/02/2014 às 18:40
  • 7
    De uma certa forma é a melhor explicação, apesar de não dar exemplos úteis (até porque já foram dados). Tem gente que tem preconceito com operador ternário. É o típico caso do "li em algum lugar que pode ser menos legível e então vou abominar ele, até onde ele é o melhor caminho". Tem que entender o fundamento do recurso para usá-lo corretamente.
    – Maniero
    Commented 8/02/2014 às 18:46
  • @bigown Tentei incluir exemplos que encaixassem aqui sem repetir as outras respostas. Acha que melhorou (está mais completo) ou piorou (mais confuso)?
    – bfavaretto
    Commented 8/02/2014 às 19:05
  • Melhorou bem. Quer uma ideia? Não que ela seja tão necessária, mas em todas respostas faltam o contraponto. O exemplo de uso errado. Mas fica a seu critério se cabe na resposta ou se vale o esforço.
    – Maniero
    Commented 8/02/2014 às 19:10
  • Eu nunca tinha entendido essas coisas, e graças à sua resposta eu consegui entender, belíssima resposta. +1 Commented 10/02/2014 às 13:55
43

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;
0
33

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/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.

Estruturas de Controler de Fluxo

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 breaks ao final de cada trecho, equivale a ifs 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();
}

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]();

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

2
  • 2
    sua resposta é bem mais do que a pergunta; Não acha melhor criar uma pergunta e respondê-la, e por essa resposta aqui? Commented 9/02/2014 às 14:39
  • @EmersonRochaLuiz A pergunta também não foi muito específica. Commented 9/02/2014 às 15:34
17

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;
0
15

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

  • Não é obrigatório, embora possa melhorar legibilidade, uso de parenteses. Mas sim apenas ?:
  • Útil quando condição, situação verdadeira e situação se falsa cabem em uma linha, do contrário if-else tradicional funciona
  • Aninhar mais uma condição ternária não é recomendada na maioria das linguagens
0
10

Ternários, binários e unários

Terná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.

exemplo de operação binária

Acima, um exemplo de operação binária. É composta por dois operandos, X e Y, e resulta em um só valor.

O operador condicional do JavaScript

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

Outros operadores ternários em outras linguagens

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.

Operações unárias no JavaScript

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
1
  • 1
    +1 depois do edit, é uma boa explicação do termo, agora que virou um complemento usando terminologia correta..
    – Largato
    Commented 17/08/2018 às 12:35
-3

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*/

1
  • 10
    Não há nada de errado em responder perguntas antigas ou já respondidas, mas só faz sentido fazê-lo se for adicionar informações novas ou apresentar de forma diferente das já apresentadas. Não acredito ser o caso, então se você acha que sua resposta realmente ajuda de uma forma que as outras não, recomendo você editá-la e deixar mais clara possível, explicando com texto a ideia que deseja passar, não apenas código.
    – Woss
    Commented 24/06/2017 às 14:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .