Operadores Condicionais ?: e ?? em JavaScript

Os operadores condicionais permitem verificar uma condição e, dependendo do resultado da verificação, executar certas ações. Aqui examinaremos o operador ?: ou o chamado operador ternário e a operação ??.

Operação Ternária

A operação ternária consiste em três operandos e é definida da seguinte forma:

Dependendo da condição no primeiro operando, a operação ternária retorna o segundo ou o terceiro operando. Se a condição no primeiro operando for true, o segundo operando é retornado; se for false, o terceiro é retornado. Por exemplo:

const x = 1;
const y = 2;
const result = x < y ? x : y;
console.log(result); // 1

Aqui, o primeiro operando representa a condição x < y. Se o valor da constante x for menor que o valor da constante y, o segundo operando - x, é retornado, ou seja, a constante result será igual a x.

Se o valor da constante a for maior ou igual ao valor da constante y, o terceiro operando - y, é retornado, assim, a constante result será igual ao valor de y.

Os operandos também podem ser expressões:

const x = 1;
const y = 2;
const result = x < y ? x + y : x - y;
console.log(result); // 3

Neste exemplo de código, o primeiro operando representa a mesma condição que no exemplo anterior, mas o segundo e terceiro operandos representam operações aritméticas. Se o valor da constante a for menor que o valor da constante y, o segundo operando a + y é retornado. Assim, a constante result será igual à soma de x e y.

Se o valor da constante a for maior ou igual ao valor da constante y, o terceiro operando x - y é retornado. Assim, a constante result será igual à diferença de x e y.

Operador ??

O operador ?? (nullish coalescing operator) permite verificar um valor para null e undefined. Ele recebe dois operandos:

O operador retorna o valor do operando esquerdo, se ele NÃO for igual a null ou undefined. Caso contrário, retorna o valor do operando direito. Por exemplo:

const result = "hello" ?? "world";
    
console.log(result);    // hello

console.log(0 ?? 5);    // 0

console.log("" ?? "javascript");    // "" - string vazia

console.log(false ?? true); // false

console.log(null ?? "not null");    // not null

console.log(undefined ?? "defined");    // defined

console.log(null ?? null);  // null

console.log(undefined ?? undefined);    // undefined

Operador ??=

O operador ?? tem uma modificação na forma do operador ??=, que também permite verificar um valor para null e undefined. Ele recebe dois operandos:

Se o operando esquerdo for igual a null ou undefined, então o valor do operando direito é atribuído a ele. Caso contrário, o operando esquerdo mantém seu valor. Por exemplo:

const message = "Hello JavaScript";
let text = "Hello work!"
text ??= message;
console.log(text);  // Hello work!

Aqui, a variável text não é igual a null ou undefined, portanto mantém seu valor. Exemplo contrário:

const message = "Hello JavaScript";
let text = null;
text ??= message;
console.log(text);  // Hello JavaScript

Aqui, a variável text é igual a null, portanto, por meio do operador ??=, ela recebe o valor da variável message.