Operador Ternário JavaScript

Resumo : neste tutorial, você aprenderá como usar o operador ternário JavaScript para tornar seu código mais conciso. 

Introdução ao operador ternário JavaScript

Quando você deseja executar um bloco se uma condição for avaliada como true, você geralmente usa uma instrução if…else . Por exemplo:

let age = 18;
let message;

if (age >= 16) {
  message = 'You can drive.';
} else {
  message = 'You cannot drive.';
}

console.log(message);Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, mostramos uma mensagem de que uma pessoa pode dirigir se a idade for maior ou igual a 16 anos. Alternativamente, você pode usar um operador ternário em vez da instrução if-else como esta:

let age = 18;
let message;

age >= 16 ? (message = 'You can drive.') : (message = 'You cannot drive.');

console.log(message);Linguagem de código:  JavaScript  ( javascript )

Ou você pode usar o operador ternário em uma expressão da seguinte maneira:

let age = 18;
let message;

message = age >= 16 ? 'You can drive.' : 'You cannot drive.';

console.log(message);Linguagem de código:  JavaScript  ( javascript )

Aqui está a sintaxe do operador ternário:

condition ? expressionIfTrue : expressionIfFalse;Linguagem de código:  JavaScript  ( javascript )

Nesta sintaxe, the conditioné uma expressão avaliada como um valor booleano, trueou false.

Se a condição for true, a primeira expressão ( expresionIfTrue) será executada. Se for falso, a segunda expressão ( expressionIfFalse) é executada.

O seguinte mostra a sintaxe do operador ternário usado em uma expressão:

let variableName = condition ? expressionIfTrue : expressionIfFalse;Linguagem de código:  JavaScript  ( javascript )

Nesta sintaxe, se conditionfor true, variableNamepegará o resultado da primeira expressão ( expressionIfTrue) ou expressionIfFalsenão.

Exemplos de operadores ternários JavaScript

Vejamos alguns exemplos de uso do operador ternário.

1) Usando o operador ternário JavaScript para executar múltiplas instruções

O exemplo a seguir usa o operador ternário para realizar diversas operações, onde cada operação é separada por uma vírgula. Por exemplo:

let authenticated = true;
let nextURL = authenticated
  ? (alert('You will redirect to admin area'), '/admin')
  : (alert('Access denied'), '/403');

// redirect to nextURL here
console.log(nextURL); // '/admin'Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, o valor retornado do operador ternário é o último valor da lista separada por vírgulas.

2) Exemplo de simplificação de operador ternário

Veja o exemplo a seguir:

let locked = 1;
let canChange = locked != 1 ? true : false;Linguagem de código:  JavaScript  ( javascript )

Se lockedfor 1, a canChangevariável será definida como false; caso contrário, será definida como true. Neste caso, você pode simplificá-lo usando uma expressão booleana como segue:

let locked = 1;
let canChange = locked != 1;Linguagem de código:  JavaScript  ( javascript )

3) Exemplo de uso de vários operadores ternários JavaScript

O exemplo a seguir mostra como usar dois operadores ternários na mesma expressão:

let speed = 90;
let message = speed >= 120 ? 'Too Fast' : speed >= 80 ? 'Fast' : 'OK';

console.log(message);Linguagem de código:  JavaScript  ( javascript )

Saída:

FastLinguagem de código:  JavaScript  ( javascript )

É uma boa prática usar o operador ternário quando ele facilita a leitura do código. Se a lógica contiver muitas if...elseinstruções, evite usar operadores ternários.

Resumo

• Use o operador ternário JavaScript ( ?:) para tornar o código mais conciso.