Ramos da Informática

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

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

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

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.

Leia também:

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.

Evento gratuito de tecnologia: inscreva-se na 3ª edição do Dev Summit:

  1. Vem ai a 3ª edição do maior evento hands-on de desenvolvimento de software do Brasil. Vamos apresentar tecnologias, ferramentas e práticas em mais de 20 horas em sessões ao vivo com profissionais de referência em Full Stack, Flutter, Angular, React e muito mais.
  2.  



    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

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

    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

    Leituras recomendadas:

    » Programação » Javascript 

Sair da versão mobile