JavaScript Nullish Coalescing: Una Guía Completa para la Asignación de Valores Predeterminados

En JavaScript, asignar valores predeterminados es una tarea común. Tradicionalmente, los desarrolladores han utilizado el operador OR (||) para este propósito. Sin embargo, el operador nullish coalescing (??), introducido en ECMAScript 2020, proporciona una forma más precisa y confiable de manejar las asignaciones de valores predeterminados, específicamente cuando se trata de valores null o undefined. Esta guía proporciona una inmersión profunda en el operador nullish coalescing, explorando su sintaxis, comportamiento, diferencias con el operador OR y casos de uso prácticos.

¿Qué es Nullish Coalescing?

El operador nullish coalescing (??) es un operador lógico que devuelve su operando del lado derecho cuando su operando del lado izquierdo es null o undefined. De lo contrario, devuelve su operando del lado izquierdo. En términos más simples, proporciona un valor predeterminado solo cuando una variable es estrictamente null o undefined.

Sintaxis

La sintaxis para el operador nullish coalescing es sencilla:

leftOperand ?? rightOperand

Aquí, leftOperand es la variable o expresión que desea verificar si es null o undefined, y rightOperand es el valor predeterminado que desea asignar si leftOperand es realmente null o undefined.

Ejemplo

Considere el siguiente ejemplo:

const username = null ?? "Guest";
console.log(username); // Output: Guest

const age = undefined ?? 25;
console.log(age); // Output: 25

const city = "London" ?? "Unknown";
console.log(city); // Output: London

En este ejemplo, a username se le asigna el valor predeterminado "Guest" porque inicialmente es null. De manera similar, a age se le asigna 25 porque comienza como undefined. Sin embargo, city conserva su valor original, "London", porque no es ni null ni undefined.

Valores Nullish vs. Falsy

Es crucial comprender la diferencia entre valores nullish y falsy en JavaScript. Un valor nullish es null o undefined. Un valor falsy es un valor que se considera falso cuando se encuentra en un contexto booleano. Los valores falsy incluyen:

• null
• undefined
• 0 (cero)
• NaN (No es un número)
• '' (cadena vacía)
• false

La distinción clave es que el operador nullish coalescing solo verifica si es null o undefined, mientras que el operador OR (||) verifica cualquier valor falsy.

La Diferencia Entre ?? y ||

El operador OR (||) es un operador OR lógico que devuelve el operando del lado derecho si el operando del lado izquierdo es falsy. Si bien se puede usar para asignar valores predeterminados, puede conducir a un comportamiento inesperado cuando se trata de valores como 0 o una cadena vacía.

Ejemplo: Los Peligros de ||

const quantity = 0 || 10; // Pretendemos un valor predeterminado de 10 si falta la cantidad
console.log(quantity); // Output: 10 (¡Inesperado!) porque 0 es falsy

const text = '' || 'Default Text'; //Pretendemos un texto predeterminado si falta el texto
console.log(text); // Output: Default Text (¡Inesperado!) porque '' es falsy

En el primer ejemplo, pretendíamos asignar una cantidad predeterminada de 10 solo si faltaba quantity (null o undefined). Sin embargo, debido a que 0 es un valor falsy, el operador OR asignó incorrectamente el valor predeterminado. De manera similar, la cadena vacía hace que se muestre el texto predeterminado incluso si la cadena existe (pero está vacía).

Usando ?? para Precisión

Reescribamos el ejemplo anterior usando el operador nullish coalescing:

const quantity = 0 ?? 10;
console.log(quantity); // Output: 0 (¡Correcto!)

const text = '' ?? 'Default Text';
console.log(text); // Output: '' (¡Correcto!)

Ahora, la salida es la esperada. El operador nullish coalescing solo verifica si es null o undefined, por lo que 0 y '' se tratan como valores válidos y se conservan sus valores originales.

Casos de Uso para Nullish Coalescing

El operador nullish coalescing es útil en varios escenarios donde necesita proporcionar valores predeterminados solo cuando una variable es estrictamente null o undefined. Aquí hay algunos casos de uso comunes:

1. Manejo de Parámetros de Función Opcionales

Cuando define una función con parámetros opcionales, puede usar el operador nullish coalescing para proporcionar valores predeterminados si no se proporcionan los parámetros.

function greet(name, greeting) {
  const userName = name ?? "User";
  const userGreeting = greeting ?? "Hello";
  console.log(`${userGreeting}, ${userName}!`);
}

greet(); // Output: Hello, User!
greet("Alice"); // Output: Hello, Alice!
greet("Bob", "Greetings"); // Output: Greetings, Bob!

2. Establecer Opciones de Configuración Predeterminadas

Cuando trabaja con objetos de configuración, puede usar el operador nullish coalescing para asegurarse de que se utilicen los valores predeterminados si no se especifican ciertas opciones de configuración.

const config = {
  timeout: 5000,
  retries: 3
};

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Tiempo de espera predeterminado de 10 segundos
  const retries = options.retries ?? 5; // 5 reintentos predeterminados
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Output: Timeout: 5000, Retries: 3
fetchData({}); // Output: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Output: Timeout: 10000, Retries: 5

3. Acceso a Propiedades de Objetos Anidados

Cuando acceda a propiedades de objetos anidados, el operador nullish coalescing se puede combinar con el encadenamiento opcional (?.) para proporcionar valores predeterminados si alguna de las propiedades intermedias es null o undefined.

const user = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Output: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Output: Unknown

4. Trabajar con API y Datos Externos

Cuando obtenga datos de API o fuentes externas, el operador nullish coalescing se puede usar para proporcionar valores predeterminados si faltan ciertos campos de datos o tienen valores null o undefined. Considere la posibilidad de recuperar datos de usuario de diferentes regiones. Suponga que algunas regiones pueden no incluir el campo `country` en sus datos de usuario.

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Unknown Country";
    const timezone = data.timezone ?? "UTC";
    console.log(`User is from: ${country}, Timezone: ${timezone}`);
  } catch (error) {
    console.error("Error fetching user data:", error);
  }
}

// Simulating different API responses:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// To test this, you would need an actual API or mock fetch.
// For demonstration purposes, let's simulate the responses:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Unexpected URL");
};

getUserData(123); // Output: User is from: USA, Timezone: EST
getUserData(456); // Output: User is from: Unknown Country, Timezone: GMT

Precedencia del Operador

El operador nullish coalescing tiene una precedencia de operador relativamente baja. Es más baja que los operadores OR (||) y AND (&&). Por lo tanto, al combinar el operador nullish coalescing con otros operadores lógicos, es esencial usar paréntesis para definir explícitamente el orden de las operaciones. No hacerlo puede resultar en errores de sintaxis o un comportamiento inesperado.

Ejemplo: Usando Paréntesis para Mayor Claridad

// Sin paréntesis (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Con paréntesis (Correcto)
const result = false || (null ?? "Default");
console.log(result); // Output: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Output: null

En el primer ejemplo, la falta de paréntesis da como resultado un SyntaxError porque el motor de JavaScript no puede determinar el orden de las operaciones previsto. Al agregar paréntesis, le decimos explícitamente al motor que evalúe primero el operador nullish coalescing. El segundo ejemplo es válido; sin embargo, la salida es diferente porque la expresión `||` se evalúa primero.

Compatibilidad del Navegador

El operador nullish coalescing (??) es una característica relativamente nueva, por lo que es crucial tener en cuenta la compatibilidad del navegador, especialmente si se dirige a navegadores más antiguos. La mayoría de los navegadores modernos admiten el operador nullish coalescing, incluyendo:

• Chrome 80+
• Firefox 72+
• Safari 13.1+
• Edge 80+
• Node.js 14+

Si necesita admitir navegadores más antiguos, puede usar un transpilador como Babel para convertir su código a una versión compatible de JavaScript. Babel transformará el operador ?? en código JavaScript equivalente que funcione en entornos más antiguos.

Mejores Prácticas

Aquí hay algunas de las mejores prácticas para usar el operador nullish coalescing de manera efectiva:

• Use ?? para comprobaciones nullish: Use el operador nullish coalescing (??) cuando específicamente desee proporcionar un valor predeterminado solo cuando una variable sea null o undefined.
• Use paréntesis para expresiones complejas: Cuando combine el operador nullish coalescing con otros operadores lógicos, use paréntesis para definir claramente el orden de las operaciones.
• Considere la compatibilidad del navegador: Verifique la compatibilidad del navegador y use un transpilador si es necesario para admitir navegadores más antiguos.
• Use de manera consistente: Adopte el ?? cuando sea apropiado para un estilo de codificación más predecible en todo el proyecto.
• Combine con encadenamiento opcional: Use ?? junto con el encadenamiento opcional ?. para acceder de forma segura y asignar valores predeterminados a propiedades anidadas de objetos.

Consideraciones Globales

Al desarrollar para una audiencia global, considere los siguientes puntos relacionados con las asignaciones de valores predeterminados:

• Localización: Es posible que sea necesario localizar los valores predeterminados según el idioma o la región del usuario. Por ejemplo, un símbolo de moneda o un formato de fecha predeterminados.
• Normas Culturales: Es posible que sea necesario ajustar ciertos valores predeterminados según las normas culturales. Por ejemplo, es posible que un mensaje de saludo predeterminado deba ser diferente en diferentes culturas.
• Accesibilidad: Asegúrese de que los valores predeterminados sean accesibles y comprensibles para los usuarios con discapacidades. Proporcione etiquetas claras y descriptivas para los valores predeterminados en las interfaces de usuario.
• Zonas Horarias y Fechas: Cuando trabaje con fechas y horas, use las zonas horarias y los formatos de fecha apropiados para asegurarse de que los valores predeterminados se muestren correctamente a los usuarios en diferentes regiones.

Ejemplo: Localización con Nullish Coalescing

Digamos que desea mostrar un mensaje de bienvenida predeterminado en diferentes idiomas según la configuración regional del usuario. Puede usar el operador nullish coalescing para proporcionar un mensaje predeterminado si un mensaje localizado no está disponible.

function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    de: "Willkommen!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // Predeterminado a inglés si no se encuentra la configuración regional
  return message;
}

console.log(getWelcomeMessage("fr")); // Output: Bienvenue !
console.log(getWelcomeMessage("es")); // Output: Welcome! (Predeterminado a inglés)

Conclusión

El operador nullish coalescing (??) es una valiosa adición al lenguaje JavaScript. Proporciona una forma más precisa y confiable de asignar valores predeterminados en comparación con el operador OR (||), especialmente cuando se trata de valores como 0 o cadenas vacías. Al comprender su sintaxis, comportamiento y casos de uso, puede escribir código más limpio y mantenible que maneje con precisión las asignaciones de valores predeterminados. Recuerde tener en cuenta la compatibilidad del navegador, la precedencia del operador y las consideraciones globales al usar el operador nullish coalescing en sus proyectos.

Al seguir las mejores prácticas descritas en esta guía, puede aprovechar de manera efectiva el operador nullish coalescing para mejorar la calidad y la confiabilidad de su código JavaScript, haciéndolo más robusto y fácil de entender. Recuerde siempre priorizar la claridad y la mantenibilidad en su código, y el operador nullish coalescing puede ser una herramienta poderosa para lograr estos objetivos.