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:
Operadores de asignación lógica | Operadores logicos |
---|---|
x ||= y |
x || (x = y) |
x &&= y |
x && (x = y) |
x ??= y |
x ?? (x = y); |
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 asignay
a x six
esfalse
. - El operador de asignación
AND
lógico (x &&= y
) solo asignay
ax
six
estrue
. - El operador de asignación coalescente
null
(x ??= y
) solo asignay
ax
six
esnull
.