Como usar o Operador Ternário do JavaScript

Neste post vamos falar sobre o Operador Ternário em JavaScript. Discutiremos o que é o operador ternário, como é usado, quando usá-lo e como ele se compara com: if/else, if/else if/elsee switch.

O que é o Operador Ternário do JavaScript

O operador ternário em JavaScript é um operador denotado pelo ponto de interrogação, ? , que avalia uma expressão condicional passada antes dele e executa um bloco de código com base na decisão da expressão condicional. Ele aceita os possíveis blocos a serem executados como dois outros operandos que vêm depois do ? operador – o terceiro separado do segundo por dois pontos, : .

Sua sintaxe fica assim:

expressaoCondicional ? retornoSeVerdadeiro : retornoSeFalso ;

Se a expressaoCondicional for avaliada para um valor verdadeiro retornoSeVerdadeiro é executada. Se for avaliado como um valor falso, retornoSeFalso é executado.

Como usar o operador ternário

Podemos usar o operador ternário quando precisamos decidir o valor de retorno de uma variável de duas ou mais opções com base em uma condição que passamos como primeiro operando. O código abaixo mostra como:

const estudante = 'João';
const bemVindoEstudante = estudante ? `Bem vindo, ${estudante}!` : "Bem Vindo Convidado!";

console.log(bemVindoEstudante); 

// Saída:
// Bem vindo, João!

No trecho acima, estudante ? é avaliada a expressão antes da ? como uma condição booleana, perguntando se estudante é verdadeira. Por esse motivo, o operador ternário, ? , também é chamado de operador condicional.

O valor dessa expressão condicional é usado para decidir o valor da variável armazenada, bemVindoEstudante. Se o operando condicional for avaliado como um valor verdadeiro, o segundo operando, ou seja, o valor antes dos dois pontos, : , é retornado para bemVindoEstudante. Se for avaliado como falso, o terceiro operando, ou seja, aquele após o : é retornado.

Em JavaScript, os valores falsos incluem false , 0 , -0 , “” , null undefined e NaN Todos os outros valores são considerados verdadeiros.

Quando usar

O caso de uso mais comum do operador ternário é quando há apenas dois resultados possíveis, ou seja, como uma alternativa abreviada da if/elseconstrução. O uso do operador ternário torna o código mais legível e geralmente ocupa menos linhas.

Como no exemplo acima, pode ser usado para retornar o valor de uma variável diretamente.

Também pode ser usado quando precisamos retornar um valor de uma função:

// Com if/else

const bemVindoEstudante = student => {
  if (student) {
    return `Bem vindo, ${student.name}!`;
  } else {
    return "Bem vindo, convidado!";
  };
};

console.log(bemVindoEstudante({ name: 'Carlos' })); 
// Saída:
// Bem vindo, Carlos!

console.log(bemVindoEstudante()); 
// Saída
// Bem vindo, convidado!!


// Com operador ternário
const bemVindoEstudante = student => student ? `Bem vindo, ${student.name}!` : "Bem vindo, convidado!";

console.log(bemVindoEstudante({ name: 'Carlos' })); 
// Saída:
// Bem vindo, Carlos!

console.log(bemVindoEstudante()); 
// Saída:
// Bem vindo, convidado!

Como podemos ver, o operador ternário simplifica o código para uma linha. Tornou o código mais legível e a lógica fácil de seguir.

Operador ternário encadeado

Podemos encadear operadores ternários para emular uma if/else if/else ou um switch:

// Com if/else if/else
const grade = mark => {
  if (mark > 100) {
    return;
  } else if (mark > 80) {
    return 'A';
  } else if (mark > 70) {
    return 'B';
  } else if (mark > 60) {
    return 'C';
  } else if (mark > 50) {
    return 'D';
  } else {
    return 'F';
  };
};

console.log(grade(100)); 
// Saída:
// A

console.log(grade(1000)); 
// Saída
// undefined

console.log(grade(10)); 
// Saída
// F

// Com operadores ternários encadeados
const grade = mark => mark > 100 ? undefined
                      : mark > 80 ? 'A'
                      : mark > 70 ? 'B'
                      : mark > 60 ? 'C'
                      : mark > 50 ? 'D'
                      : 'F';

console.log(grade(100)); 
// Saída:
// A

console.log(grade(1000)); 
// Saída:
// undefined

console.log(grade(10)); 
// Saída:
// F

Aqui, encadeamos o operador condicional no terceiro operando do operador ternário em cada nível.

Muitos desenvolvedores não preferem operadores ternários aninhados como este porque várias verificações condicionais prejudicam a legibilidade, em vez de melhorá-la. Ao contrário do encadeamento de operadores ternários, o uso de instruções simples if/else if/else ou simples switch é recomendado quando há várias bifurcações em um fluxo de controle.

Neste artigo, exploramos o uso do operador ternário em JavaScript. Vimos dois casos comuns que melhoram a legibilidade do código, um envolvendo uma variável e o outro uma expressão de função que retorna um valor com base na avaliação de uma expressão condicional dentro de uma função.

Os operadores ternários podem ser encadeados para emular if/else if/else e switchr, mas a maneira recomendada é manter as construções posteriores porque o encadeamento de vários operadores ternários é contraproducente em termos de legibilidade.

Esperamos ter ajudado com mais esta dica, e siga nos, nas redes sociais para mais tutoriais www.soloweb.com.br.