En el desarrollo diario, a menudo necesitamos establecer valores predeterminados para variables, como configuraciones de usuario o valores iniciales de formularios. JavaScript, en ECMAScript 2021 (ES12), introdujo el operador ??=, que ofrece una solución más concisa. Como parte de los «operadores de asignación lógica», no solo hace que el código sea más claro, sino que también evita reemplazar datos válidos por error.

¿Qué es el operador ??=?

En pocas palabras, ??= es un «guardián inteligente»: solo asigna un valor predeterminado a una variable si su valor es null o undefined, sin afectar valores como 0, false o ''.

Comparación de uso

Veamos la comparación entre el método tradicional y ??=:

// Método tradicional: verificación y asignación con if
if (user.name === null || user.name === undefined) {
  user.name = 'Visitante';
}

// Código simplificado con ??=
user.name ??= 'Visitante';

Aquí, user.name ??= 'Visitante' solo asignará 'Visitante' si user.name es null o undefined; de lo contrario, mantendrá el valor existente. En comparación con la escritura tradicional, el código es mucho más conciso y claro.

Aplicaciones típicas de ??= en negocios

En situaciones reales, a menudo necesitamos manejar asignaciones de valores predeterminados. Por ejemplo, en una plataforma social, los usuarios sin un nombre de usuario configurado pueden mostrarse como «Visitante». Utilizando ??=, podemos evitar verificaciones innecesarias, haciendo el código más limpio y legible:

function setDefaultUsername(user) {
  user.username ??= 'Visitante';
}

let userProfile = { username: null };
setDefaultUsername(userProfile);
console.log(userProfile.username); // Salida: Visitante

userProfile = { username: 'Juan' };
setDefaultUsername(userProfile);
console.log(userProfile.username); // Salida: Juan

Aquí, user.username ??= 'Visitante' verifica si username es null o undefined. Si es así, asigna «Visitante»; de lo contrario, mantiene el valor original. Esto es ideal para establecer nombres predeterminados en sistemas de usuarios.

¿Por qué elegir ??=?

Antes de la aparición de ??=, teníamos varias formas de establecer valores predeterminados, pero cada una tenía sus desventajas:

// Uso de if - tedioso y repetitivo
if (user.name === null || user.name === undefined) {
  user.name = 'Anónimo';
}

// Uso del operador || - reemplaza demasiados valores
user.name = user.name || 'Anónimo';  // Reemplaza '', 0, false, etc.

// Uso del operador ternario - expresiones largas y difíciles de leer
user.name = user.name === null || user.name === undefined
  ? 'Anónimo'
  : user.name;

// Uso de ??= - conciso y preciso
user.name ??= 'Anónimo';

La ventaja de ??= radica en su precisión. Solo asigna un valor predeterminado cuando la variable realmente «no tiene valor» (es decir, null o undefined), por lo que es adecuado para preservar datos válidos como 0, cadenas vacías o false:

let score = 0;
score ??= 100;    // Sigue siendo 0

let tag = '';
tag ??= 'default'; // Sigue siendo una cadena vacía

let active = false;
active ??= true;   // Sigue siendo false

Esta precisión puede evitar eficazmente los problemas potenciales que surgen al utilizar verificaciones más amplias. Al construir interfaces de usuario o manejar datos de formularios, generalmente queremos conservar estos «valores falsos» en lugar de reemplazarlos por valores predeterminados.

Escenarios de uso de ||, && y ??

En JavaScript, también podemos usar || y && para manejar valores predeterminados, pero sus escenarios de aplicación son diferentes:

  • ||: Se activa cuando el valor de la variable es cualquier «valor falso» (null, undefined, 0, false, '', etc.), lo que permite establecer rápidamente un valor predeterminado, pero puede sobrescribir datos válidos.
  • &&: Se utiliza para operaciones de asignación que dependen de que múltiples condiciones sean verdaderas, común en evaluaciones lógicas complejas.
  • ?? y ??=: Solo se activan cuando el valor es null o undefined, por lo que son especialmente adecuados para preservar datos válidos como 0, false o cadenas vacías.

Cuando necesitamos asegurarnos de que una variable solo se sobrescriba en ausencia de valor, el operador ??= proporciona el mejor control preciso.

Resumen

El operador ??= hace que el manejo de valores predeterminados en JavaScript sea más conciso y preciso. Ya sea para establecer nombres de usuario predeterminados, inicializar configuraciones o manejar valores iniciales de formularios, ??= nos ayuda a garantizar la integridad de los datos, haciendo que el código sea más legible y práctico.

¡Espero que este pequeño consejo haga tu desarrollo más eficiente! Si tienes otros trucos o experiencias al usar ??=, no dudes en compartirlos en los comentarios para que podamos discutir juntos.

Categorizado en:

Javascript,