Resumo : neste tutorial, você aprenderá sobre operadores de atribuição lógica JavaScript, incluindo o operador de atribuição lógico OR ( ||=
), o operador de atribuição lógico AND ( &&=
) e o operador de atribuição nulo ( ??=
).
ES2021 apresenta três operadores de atribuição lógica, incluindo:
- Operador lógico de atribuição OR (
||=
) - Operador de atribuição AND lógico (
&&=
) - Operador de atribuição coalescente nulo (
??=
)
A tabela a seguir mostra o equivalente do operador de atribuições lógicas:
Operadores de Atribuição Lógica | Operadores lógicos |
---|---|
x ||= y | x || (x = y) |
x&&= y | x && (x = y) |
x ??= y | x?? (x = y); |
O operador de atribuição lógico OR
O operador lógico de atribuição OR ( ||=
) aceita dois operandos e atribui o operando direito ao operando esquerdo se o operando esquerdo for falso:
x ||= y
Nesta sintaxe, o ||=
operador atribui apenas y
se x
for x
falso. Por exemplo:
let title;
title ||= 'untitled';
console.log(title);
Linguagem de código: JavaScript ( javascript )
Saída:
untitled
Neste exemplo, a title
variável é undefined
, portanto, é falsa. Como the title
é falso, o operador ||=
atribui the 'untitled'
ao title
. A saída mostra o untitled
esperado.
Veja outro exemplo:
let title = 'JavaScript Awesome';
title ||= 'untitled';
console.log(title);
Linguagem de código: JavaScript ( javascript )
Saída:
'JavaScript Awesome'
Linguagem de código: JavaScript ( javascript )
Neste exemplo, é title
verdade 'JavaScript Awesome'
. Portanto, o operador lógico de atribuição OR ( ||=
) não atribui a string 'untitled'
à title
variável.
O operador lógico de atribuição OR:
x ||= y
é equivalente à seguinte instrução que usa o operador lógico OR :
x || (x = y)
Assim como o operador lógico OR, a atribuição lógica OR também entra em curto-circuito. Isso significa que o operador lógico de atribuição OR só executa uma atribuição quando é x
falso.
O exemplo a seguir usa o operador de atribuição lógica para exibir uma mensagem padrão se o elemento do resultado da pesquisa estiver vazio:
document.querySelector('.search-result').textContent ||= 'Sorry! No result found';
Linguagem de código: JavaScript ( javascript )
O operador de atribuição lógico AND
O operador de atribuição lógico AND atribui apenas y
se x
for x
verdadeiro:
x &&= y;
O operador lógico de atribuição AND também entra em curto-circuito. Significa que
x &&= y;
é equivalente a:
x && (x = y);
O exemplo a seguir usa o operador de atribuição AND lógico para alterar o sobrenome de um person
objeto se o sobrenome for verdadeiro:
let person = {
firstName: 'Jane',
lastName: 'Doe',
};
person.lastName &&= 'Smith';
console.log(person);
Linguagem de código: JavaScript ( javascript )
Saída:
{firstName: 'Jane', lastName: 'Smith'}
Linguagem de código: CSS ( css )
O operador de atribuição coalescente nulo
O operador de atribuição coalescente nulo atribui apenas y
a x
if x
is null
ou undefined
:
x ??= y;
É equivalente à seguinte instrução que usa o operador de coalescência nulo :
x ?? (x = y);
O exemplo a seguir usa o operador de atribuição coalescente nulo para adicionar uma propriedade ausente a um objeto:
let user = {
username: 'Satoshi'
};
user.nickname ??= 'anonymous';
console.log(user);
Linguagem de código: JavaScript ( javascript )
Saída:
{username: 'Satoshi', nickname:'anonymous'}
Linguagem de código: CSS ( css )
Neste exemplo, user.nickname
is undefined
, portanto, é nulo. O operador de atribuição de coalescência nula atribui a string 'anonymous'
à user.nickname
propriedade.
A tabela a seguir ilustra como funcionam os operadores de atribuição lógica:
Resumo
- O operador lógico de atribuição OR (
x ||= y
) atribui apenasy
ax
ifx
for falso. - O operador lógico AND de atribuição (
x &&= y
) atribui apenasy
sex
forx
verdadeiro. - O operador de atribuição coalescente nula (
x ??= y
) atribui apenasy
ax
sex
for nulo.