Operadores de asignación lógica en JavaScript

Resumen: en este tutorial, aprenderás sobre los operadores de asignación lógica de JavaScript, incluido el operador de asignación OR lógico (||=), el operador de asignación AND lógico (&&=) y el operador de asignación null (??=).

Introducción a los operadores de asignación lógicos

ES2021 presenta tres operadores de asignación lógica que incluyen:

• Operador de asignación OR lógico (||=)
• Operador de asignación AND lógico (&&=)
• Operador de asignación coalescente null (??=)

La siguiente tabla muestra el equivalente del operador de asignaciones lógicas:

El operador de asignación OR lógico

El operador de asignación OR lógico (||=) acepta dos operandos y asigna el operando derecho al operando izquierdo si el operando izquierdo es false:

x ||= y

En esta sintaxis, el operador ||= solo asigna y a x si x es falso. Por ejemplo:

let title;
title ||= 'untitled';

console.log(title);

Resultado:

untitled

En este ejemplo, la variable title no está definida, por lo tanto, es falsa. Dado que el title es falso, el operador ||= asigna 'untitled' a title. La salida muestra untitled como se esperaba.

Ver otro ejemplo:

let title = 'JavaScript Awesome';
title ||= 'untitled';

console.log(title);

Resultado:

'JavaScript Awesome'

En este ejemplo, title es 'JavaScript Awesome'. Por lo tanto, el operador de asignación OR lógico (||=) no asigna la cadena 'untitled' a la variable title.

El operador de asignación OR lógico:

x ||= y

Es equivalente a la siguiente declaración que usa el operador lógico OR:

x || (x = y)

Al igual que el operador lógico OR, la asignación lógica OR también provoca cortocircuitos. Significa que el operador de asignación OR lógico solo realiza una asignación cuando la x es false.

El siguiente ejemplo utiliza el operador de asignación lógica para mostrar un mensaje predeterminado si el elemento del resultado de la búsqueda está vacío:

document.querySelector('.search-result').textContent ||= '¡Lo siento! No se han encontrado resultados';

El operador lógico y de asignación.

El operador de asignación AND lógico solo asigna y a x si x es true:

x &&= y;

El operador de asignación AND lógico también provoca cortocircuitos. Esto significa que

x &&= y;

es equivalente a:

x && (x = y);

El siguiente ejemplo utiliza el operador de asignación AND lógico para cambiar el lastName de un objeto de person si el lastName es true:

let person = {
    firstName: 'Jane',
    lastName: 'Doe',
};

person.lastName &&= 'Smith';

console.log(person);

Resultado:

{firstName: 'Jane', lastName: 'Smith'}

El operador de asignación coalescente null

El operador de asignación coalescente nulo solo asigna y a x si x es null o undefined:

x ??= y;

Es equivalente a la siguiente declaración que usa el operador coalescente nulo:

x ?? (x = y);

El siguiente ejemplo utiliza el operador de asignación de fusión nula para agregar una propiedad faltante a un objeto:

let user = {
    username: 'Satoshi'
};
user.nickname ??= 'anonymous';

console.log(user);

Resultado:

{username: 'Satoshi', nickname:'anonymous'}

En este ejemplo, user.nickname no está definido, por lo tanto, es nulo. El operador de asignación fusionado nulo asigna la cadena 'anonymous' a la propiedad user.nickname.

Resumen

• El operador de asignación OR lógico (x ||= y) solo asigna y a x si x es false.
• El operador de asignación AND lógico (x &&= y) solo asigna y a x si x es true.
• El operador de asignación coalescente null (x ??= y) solo asigna y a x si x es null.