Operadores de Asignación Lógica en JavaScript

En el desarrollo moderno, a menudo nos encontramos escribiendo lógica condicional para asignar un valor a una variable solo si se cumple cierta condición. Tradicionalmente, esto requería un if o el uso de operadores ternarios. Sin embargo, JavaScript ha introducido los operadores de asignación lógica para simplificar estos patrones comunes en una sola línea elegante y legible.

Estos operadores combinan una operación lógica (||, &&, ??) con una asignación (=), permitiéndote escribir código más limpio y optimizado.

En JavaScript, los operadores de asignación lógica son:

• &&=: Asignación condicional usando AND.
• ||=: Asignación condicional usando OR.
• ??=: Asignación condicional usando fusión de nulos.

La siguiente tabla muestra la equivalencia de los operadores de asignación lógica:

Asignación Lógica OR (||=): “Asigna si es Falsy”

El operador ||= (OR lógico de asignación) asigna un valor a una variable solo si la variable actual tiene un valor “falsy” (false, null, undefined, 0, NaN, o ""). Si la variable ya tiene un valor “truthy” (que no es null, undefined, etc.), el operador no realiza la asignación.

Equivalencia:
x ||= y es equivalente a x = x || y;

variable ||= valorPredeterminado;

Caso de Uso Principal: Establecer valores predeterminados de forma flexible.

Ejemplo: Imagina que tienes una configuración donde un usuario puede dejar su nombre de usuario en blanco. Si lo hace, quieres asignarle “Invitado”.

let username = ""; // El usuario no introdujo nada (un valor falsy)

username ||= "Invitado";

console.log(username); // "Invitado"

Otro ejemplo: Si una variable title ya tiene un valor (que es truthy), no se le asignará nada nuevo.

let title = "Mi Página Genial"; // Un valor truthy

title ||= "Página sin título";

console.log(title); // "Mi Página Genial" (no cambia porque el valor original no era falsy)

||= es perfecto cuando cualquier valor falsy debe ser reemplazado por un valor predeterminado.

Al igual que el operador lógico OR, la asignación lógica OR también tiene cortocircuito. Esto significa que el operador de asignación lógica OR solo realiza una asignación cuando x es falsy.

Asignación Lógica AND (&&=): “Asigna si es Truthy”

El operador &&= (AND lógico de asignación) asigna un valor a una variable solo si la variable actual es “truthy” (es decir, no es false, null, undefined, 0, NaN, o ""). Si la variable es “falsy”, el operador no realiza la asignación.

Equivalencia:
x &&= y es equivalente a x = x && y;

variable &&= nuevoValor;

Caso de Uso Principal: Actualizar una variable solo si ya tiene un valor válido o cumple una condición.

Ejemplo: Quieres actualizar los permisos de un usuario, pero solo si el usuario ya tiene permisos asignados.

let userPermissions = { canEdit: true }; // Un objeto es truthy

// Como 'userPermissions' es truthy, se le asigna el nuevo valor.
userPermissions &&= { canEdit: true, canDelete: false };

console.log(userPermissions); // { canEdit: true, canDelete: false }

Si la variable original fuera falsy, la asignación no ocurriría.

let activeUser = null; // Un valor falsy

// Como 'activeUser' es falsy, la asignación no se realiza.
activeUser &&= { name: "Ana" };

console.log(activeUser); // null (no cambia)

&&= es ideal para cambiar un valor solo si ya existe o es “verdadero”.

Fusión de Nulos de Asignación (??=)

Este es el operador más preciso y a menudo el más útil de los tres. El operador ??= asigna un valor a una variable solo si el valor actual de esa variable es null o undefined. A diferencia de ||=, ignora otros valores falsy como 0, "" o false.

Equivalencia:
x ??= y es equivalente a x = x ?? y;

variable ??= valorPredeterminado;

Caso de Uso Principal: Asignar valores predeterminados de forma segura, sin sobrescribir valores falsy que podrían ser válidos (como 0 o una cadena vacía).

Ejemplo Comparativo:
Imagina que estás manejando la puntuación de un jugador.

let score_or = 0;
let score_nullish = 0;

score_or ||= 10; // 0 es falsy, así que la asignación ocurre.
score_nullish ??= 10; // 0 NO es null ni undefined, así que la asignación NO ocurre.

console.log(`Con ||=, el resultado es: ${score_or}`);           // 10 (¡Probablemente un error!)
console.log(`Con ??=, el resultado es: ${score_nullish}`); // 0 (Correcto, se respeta el valor)

Ejemplo Práctico: Configurar opciones de un objeto.

function configure(options) {
  // Si no se provee 'timeout', asigna 5000 por defecto.
  options.timeout ??= 5000;
  
  // Si no se provee 'retries', asigna 3 por defecto.
  options.retries ??= 3;

  return options;
}

// El usuario solo especifica 'timeout', 'retries' será undefined.
const userOptions = { timeout: 1000 };
const finalOptions = configure(userOptions);

console.log(finalOptions); // { timeout: 1000, retries: 3 }

Buenas Prácticas: ¿Cuándo Usar Cada Uno?

1. Usa ??= para valores predeterminados seguros. Es tu mejor opción en la mayoría de los casos. Te protege de sobrescribir accidentalmente valores como 0 o “”. Es perfecto para manejar parámetros de funciones o configuraciones.
2. Usa ||= cuando cualquier valor falsy deba ser reemplazado. Es útil si quieres tratar 0, “” y false como valores “no válidos” o “no establecidos”.
3. Usa &&= para actualizar condicionalmente. Es ideal cuando necesitas cambiar el valor de una variable solo si esta ya tiene un estado “activo” o truthy.

Conclusión

Los operadores de asignación lógica (||=, &&=, ??=) son una adición moderna y poderosa al arsenal de JavaScript. Te permiten escribir código más declarativo, conciso y menos propenso a errores al manejar asignaciones condicionales. Al entender el matiz entre ellos, especialmente la precisión de ??=, puedes simplificar tu lógica y hacerla mucho más robusta y legible.

En el próximo artículo exploraremos Operador de Fusión de Nulos en JavaScript