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, true
ou 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 condition
for true
, variableName
pegará o resultado da primeira expressão ( expressionIfTrue
) ou expressionIfFalse
nã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 locked
for 1, a canChange
variá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:
Fast
Linguagem 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...else
instruções, evite usar operadores ternários.
Resumo
- Use o operador ternário JavaScript (
?:
) para tornar o código mais conciso.