Operadores de atribuição lógica JavaScript

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 yse xfor xfalso. Por exemplo:

let title;
title ||= 'untitled';

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

Saída:

untitled

Neste exemplo, a titlevariável é undefined, portanto, é falsa. Como the titleé falso, o operador ||=atribui the 'untitled'ao title. A saída mostra o untitledesperado.

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, é titleverdade 'JavaScript Awesome'. Portanto, o operador lógico de atribuição OR ( ||=) não atribui a string 'untitled'à titlevariá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 é xfalso.

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 yse xfor xverdadeiro:

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 personobjeto 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 ya xif xis nullou 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.nicknameis undefined, portanto, é nulo. O operador de atribuição de coalescência nula atribui a string 'anonymous'à user.nicknamepropriedade.

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 apenas ya xif xfor falso.
• O operador lógico AND de atribuição ( x &&= y) atribui apenas yse xfor xverdadeiro.
• O operador de atribuição coalescente nula ( x ??= y) atribui apenas ya xse xfor nulo.