Los Operadores ?? y ??= de JavaScript: Tu Fran Fine Personalizada para el Código

---

¡Hola Chiquis!👋🏻 Hoy vamos a hablar sobre el operador ??= en JavaScript, una herramienta increíblemente útil que te ayudará a escribir código más limpio y eficiente. Y para hacerlo aún más interesante, utilizaremos la divertida analogía de la serie La Niñera. 🍿

¿Qué es el Operador ??=? En JavaScript, el operador ??= es conocido como el operador de asignación lógica nula. Este operador permite asignar un valor a una variable solo si dicha variable es null o undefined. Básicamente, es como asegurar que Fran Fine (la niñera) solo se encargue de los niños cuando no hay otra niñera disponible.

Imagina que tu código es una familia que necesita una niñera para cuidar a los niños. La niñera principal es Fran Fine, pero solo se le llama si no hay otra niñera disponible. El operador ??= asegura que Fran solo intervenga cuando realmente se le necesita, evitando conflictos y asegurando que todo funcione sin problemas.

Ejemplo en Código Veamos cómo funciona el operador ??= en diferentes situaciones: Ejemplo Básico:

let niñeraActual;

// Si niñeraActual es null o undefined, se asigna Fran Fine como la niñera
niñeraActual ??= 'Fran Fine';
console.log(niñeraActual);  // Salida: Fran Fine

¿Qué hace el operador ?? ? Imagina que tienes una variable nombre que puede tener un valor o ser null o undefined. Si intentas usar esta variable sin comprobar si tiene un valor, podrías encontrarte con un error. Aquí es donde entra en juego el operador ??.

let nombre = null;
let saludo = `Hola, ${nombre ?? "amigo"}`;
console.log(saludo); // Imprimirá: Hola, amigo

En este ejemplo, si nombre tiene un valor, se utilizará ese valor. Pero si nombre es null o undefined, se utilizará el valor por defecto “amigo”. Es como si Fran Fine dijera: “Si no tienes nombre, te llamaré amigo”. Ejemplo con Valores Existentes:

let niñeraActual = 'Sarah';

// El operador ??= no cambia el valor porque niñeraActual ya tiene un valor
niñeraActual ??= 'Fran Fine';
console.log(niñeraActual);  // Salida: Sarah

Aquí, niñeraActual ya tiene un valor (‘Sarah’), por lo que el operador ??= no cambia el valor. Ejemplo con Múltiples Variables:

let niñeraPrimaria = null;
let niñeraSecundaria = 'John Smith';

// Usando el operador ??= para asignar Fran Fine solo si la niñera primaria no está disponible
niñeraPrimaria ??= 'Fran Fine';
console.log(niñeraPrimaria);  // Salida: Fran Fine

// niñeraSecundaria ya tiene un valor, por lo que no se asigna Fran Fine
niñeraSecundaria ??= 'Fran Fine';
console.log(niñeraSecundaria);  // Salida: John Smith

En este caso, niñeraPrimaria es null, así que se le asigna ‘Fran Fine’. niñeraSecundaria ya tiene un valor (‘John Smith’), por lo que no se cambia. ¿Por qué es tan útil?

• ✅ Simplifica el código: Elimina la necesidad de escribir condicionales largos para comprobar si un valor es null o undefined.
• ✅ Mejora la legibilidad: Hace que tu código sea más conciso y fácil de entender.
• ✅ Evita errores: Ayuda a prevenir errores comunes causados por valores nulos o indefinidos.
• ✅ Eficiencia: Asegura que solo se asignen valores cuando realmente es necesario, evitando reasignaciones innecesarias.

Comparación con el operador || A menudo, el operador ?? se compara con el operador lógico OR (||). Ambos pueden utilizarse para proporcionar valores por defecto. Sin embargo, hay una diferencia importante:

• ||: Evaluará ambos operandos si el primero es falsy (0, "", null, undefined, NaN, false).
• ??: Solo si es null o undefined

Ejemplo:

let edad = 0;
let mensaje = edad || "Eres muy joven"; // Imprimirá: "Eres muy joven" (aunque edad es falsy)
let mensaje2 = edad ?? "Eres muy joven"; // Imprimirá: 0 (porque edad no es null ni undefined)

En este caso:

• || reemplaza 0 con “Eres muy joven” porque 0 es un valor falsy.
• ?? no lo reemplaza porque 0 no es null ni undefined.

Casos de uso comunes Asignación de valores por defecto a parámetros de funciones:

function saludar(nombre) {
  console.log(`Hola, ${nombre ?? "desconocido"}`);
}

Acceso a propiedades de objetos anidados:

const persona = { nombre: "Juan", direccion: null };
const ciudad = persona.direccion?.ciudad ?? "Desconocida";

Manejo de datos de API:

const respuesta = await fetch('/api/datos');
const datos = respuesta.json()?.data ?? [];

Conclusión El operador ??= es una herramienta poderosa y versátil en JavaScript. Al simplificar la gestión de valores nulos e indefinidos, hace que tu código sea más limpio, eficiente y menos propenso a errores.

¡Así que la próxima vez que te encuentres con un valor nulo, recuerda a Fran Fine y utiliza el operador ??= para resolver el problema con elegancia!

El operador ??= en JavaScript es como tener a Fran Fine cuidando de tus variables: asegura que solo intervenga cuando realmente es necesario, manteniendo todo bajo control y funcionando sin problemas.

¡Gracias por leer! 👇🏻 🚀 ¿Te ha gustado? Comparte tu opinión. Artículo completo, visita: https://community.aws/@orlidun https://lnkd.in/ewtCN2Mn https://lnkd.in/eAjM_Smy 👩💻 https://lnkd.in/eKvu-BHe https://dev.to/orlidev https://lnkd.in/ecHHabTD https://pin.it/2BuZ9N4n8 https://linktr.ee/orlidevs ¡No te lo pierdas!

Referencias: Imágenes creadas con: Copilot ( microsoft.com )

#PorUnMillóndeAmigos #MakeYourselfVisible