Resumo : neste tutorial, você aprenderá sobre o operador de coalescência nula do JavaScript ( ??) que aceita dois valores e retorna o segundo valor se o primeiro for nullou undefined.
Introdução ao operador de coalescência nula JavaScript
ES2020 introduziu o operador de coalescência nulo indicado pelos pontos de interrogação duplos ( ??). O operador coalescente nulo é um operador lógico que aceita dois valores:
value1 ?? value2O operador de coalescência nulo retorna o segundo valor ( value2) se o primeiro valor ( value2) for nullou undefined. Tecnicamente, o operador coalescente nulo é equivalente ao seguinte bloco:
const result = value1;
if(result === null || result === undefined) {
result = value2;
}Linguagem de código: JavaScript ( javascript )Um valor nulo é um valor que é null ou undefined.
O exemplo a seguir usa o operador de coalescência nulo ( ??) para retornar a string 'John'porque o primeiro valor é null:
const name = null ?? 'John';
console.log(name); // 'John'Linguagem de código: JavaScript ( javascript )E este exemplo retorna 28porque o primeiro valor é undefined:
const age = undefined ?? 28;
console.log(age);Linguagem de código: JavaScript ( javascript )Por que anular o operador coalescente
Ao atribuir um valor padrão a uma variável , você geralmente usa o operador lógico OR ( ||). Por exemplo:
let count;
let result = count || 1 ;
console.log(result); // 1Linguagem de código: JavaScript ( javascript )Neste exemplo, a countvariável é undefined, ela é forçada a false. Portanto, resulté 1.
No entanto, o operador lógico OR( ||) às vezes é confuso se você considerar 0strings vazias ''como um valor válido como este:
let count = 0;
let result = count || 1;Linguagem de código: JavaScript ( javascript )O resultado é 1, não 0, o que você pode não esperar.
O operador de coalescência nulo ajuda você a evitar essa armadilha. Ele só retorna o segundo valor quando o primeiro é nullou undefined.
O operador coalescente nulo está em curto-circuito
Semelhante aos operadores lógicos OR e AND , o operador de coalescência nulo não avalia o segundo valor se o primeiro operando não for nem undefinednem null.
Por exemplo:
let result = 1 ?? console.log('Hi');Linguagem de código: JavaScript ( javascript )Neste exemplo, o operador ??não avalia a segunda expressão que exibe “Hi” para o console porque o primeiro valor é 1, que não é nullou undefined.
O exemplo a seguir avalia a segunda expressão porque a primeira é undefined:
let result = undefined ?? console.log('Hi');Linguagem de código: JavaScript ( javascript )Saída:
'Hi'Linguagem de código: JavaScript ( javascript )Encadeamento com o operador AND ou OR
A SyntaxErrorocorrerá se você combinar o operador lógico AND ou OR diretamente com o operador de coalescência nulo como este:
const result = null || undefined ?? 'OK'; // SyntaxErrorLinguagem de código: JavaScript ( javascript )No entanto, você pode evitar esse erro colocando a expressão à esquerda do ??operador entre parênteses para especificar explicitamente as precedências do operador:
const result = (null || undefined) ?? 'OK';
console.log(result); // 'OK'Linguagem de código: JavaScript ( javascript )Resumo
- O operador coalescente nulo (
??) é um operador lógico que aceita dois valores e retorna o segundo valor se o primeiro fornullouundefined. - O operador coalescente nulo está em curto-circuito e não pode ser combinado diretamente com o operador lógico AND ou OR.
