Operadores de asignación lógica en JavaScript

Estrada Web Group
Estrada Web Group
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 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.
Compartir artículo:

Más artículos geniales

Operadores de comparación de JavaScript

Operadores de comparación de JavaScript

Resumen: en este tutorial, aprenderás a usar operadores de comparación de JavaScript para comparar dos valores.

Ver artículo completo
Cómo usar la declaración switch y case de JavaScript

Cómo usar la declaración switch y case de JavaScript

Resumen: en este tutorial, aprenderás a usar la declaración switch y case de JavaScript para ejecutar un bloque de código basado en múltiples condiciones.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla