JavaScript Nullish Coalescing: Dominando la Asignación de Valores Predeterminados

Los desarrolladores de JavaScript a menudo necesitan asignar valores predeterminados cuando una variable es nula o indefinida. Antes de ES2020, el operador OR lógico (||) era el método principal para lograr esto. Sin embargo, la introducción del operador de nullish coalescing (??) proporciona una solución más precisa y confiable. Esta guía completa explora los matices del nullish coalescing, sus beneficios y ejemplos prácticos para ayudarlo a dominar esta poderosa función.

Comprendiendo el Nullish Coalescing (??)

El operador de 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.

Sintaxis:

            leftOperand ?? rightOperand
            

              
                Copy
              
            
          

Diferencia Clave del OR Lógico (||):

El operador OR lógico (||) devuelve el operando del lado derecho si el operando del lado izquierdo es cualquier valor falsy (null, undefined, 0, '', NaN, false). Esto puede conducir a un comportamiento inesperado cuando solo pretende manejar valores null o undefined.

¿Por Qué Usar Nullish Coalescing?

Nullish coalescing ofrece varias ventajas sobre el operador OR lógico tradicional:

• Precisión: Se dirige específicamente a null y undefined, evitando asignaciones predeterminadas no deseadas para otros valores falsy.
• Legibilidad: Comunica claramente la intención de manejar solo casos null o undefined, mejorando el mantenimiento del código.
• Seguridad: Evita el comportamiento inesperado causado por valores falsy que activan involuntariamente las asignaciones predeterminadas.

Ejemplos Prácticos

1. Asignación Básica de Valores Predeterminados

Asignar un valor predeterminado a una variable si es null o undefined:

            const userName = user.name ?? 'Invitado';
console.log(userName); // Output: 'Invitado' si user.name es null o undefined, de lo contrario, el nombre de usuario real
            

              
                Copy
              
            
          

2. Manejo de Respuestas de la API

Obtener datos de una API y proporcionar un valor predeterminado si la respuesta no tiene una propiedad específica:

            const apiResponse = {
  data: {
    city: null,
  },
};

const cityName = apiResponse.data.city ?? 'Ciudad Desconocida';
console.log(cityName); // Output: 'Ciudad Desconocida'
            

              
                Copy
              
            
          

3. Configuraciones Predeterminadas

Establecer opciones de configuración predeterminadas para un componente o módulo:

            const config = {
  theme: userSettings.theme,
  animationSpeed: userSettings.animationSpeed ?? 'normal',
};

console.log(config.animationSpeed); // Output: 'normal' si userSettings.animationSpeed es null o undefined
            

              
                Copy
              
            
          

4. Manejo de Preferencias del Usuario

Permitir a los usuarios personalizar la configuración y proporcionar valores predeterminados si no han especificado una preferencia:

            let userVolume = localStorage.getItem('volume'); // podría devolver null
let volume = userVolume ?? 0.5; // establece un volumen predeterminado de 0.5

console.log(`El volumen del usuario es ${volume}`);
            

              
                Copy
              
            
          

5. Encadenamiento de Nullish Coalescing

Puede encadenar el operador de nullish coalescing para proporcionar una cascada de valores predeterminados:

            const setting = userSetting.displaySetting.theme ?? defaultSettings.theme ?? 'light';
console.log(setting); // Output: El primer valor no nulo/indefinido de la cadena
            

              
                Copy
              
            
          

6. Trabajando con Funciones

Asignar una función predeterminada si la función proporcionada es nula o indefinida:

            const logMessage = logger.log ?? (() => console.log('No hay registrador disponible.'));
logMessage('Este es un mensaje de prueba.');
            

              
                Copy
              
            
          

Nullish Coalescing con Encadenamiento Opcional

El operador de nullish coalescing se combina perfectamente con el encadenamiento opcional (?.), lo que le permite acceder de forma segura a las propiedades anidadas sin causar errores si una propiedad intermedia es null o undefined.

Ejemplo:

            const user = {
  profile: {
    address: {
      city: null,
    },
  },
};

const cityName = user?.profile?.address?.city ?? 'Ciudad Desconocida';
console.log(cityName); // Output: 'Ciudad Desconocida'
            

              
                Copy
              
            
          

En este ejemplo, si alguna de las propiedades (user, profile, address o city) es null o undefined, el encadenamiento opcional se cortocircuitará y el operador de nullish coalescing devolverá el valor predeterminado 'Ciudad Desconocida'.

Casos de Uso Comunes en Aplicaciones Globales

Considere estos escenarios internacionales donde el nullish coalescing puede ser particularmente útil:

• Localización: Proporcionar traducciones predeterminadas basadas en la configuración regional del usuario. Si una traducción no está disponible para un idioma específico, se puede implementar un respaldo a un idioma predeterminado (por ejemplo, inglés).
• Formato de Moneda: Mostrar valores de moneda con el formato apropiado según la región del usuario. Si la configuración regional no está disponible, se puede aplicar un formato de moneda predeterminado.
• Formato de Fecha y Hora: Formatear fechas y horas de acuerdo con la configuración regional del usuario. Si falta la información de la configuración regional, se puede utilizar un formato de fecha y hora predeterminado.
• Formato de Dirección: Mostrar información de la dirección en el formato correcto para diferentes países. Si no se especifica el país, se puede utilizar un formato de dirección predeterminado.

Ejemplo: Respaldo de Localización

            const translatedText = localizedStrings[userLocale]?.greeting ?? localizedStrings['en-US'].greeting ?? "¡Hola!";
console.log(translatedText);
            

              
                Copy
              
            
          

Mejores Prácticas

• Use ?? para verificaciones de null/undefined: Prefiera ?? sobre || cuando específicamente desee manejar valores null o undefined.
• Combine con encadenamiento opcional: Use ?? junto con el encadenamiento opcional (?.) para acceder de forma segura a las propiedades anidadas.
• Evite la complejidad innecesaria: Mantenga su código limpio y legible utilizando ?? solo cuando proporcione un beneficio claro.
• Considere la compatibilidad del navegador: Asegúrese de que sus navegadores de destino admitan el operador de nullish coalescing (ES2020). Si necesita admitir navegadores más antiguos, utilice un transpilador como Babel.
• Revisiones de Código: Fomente las revisiones de código para garantizar el uso correcto del operador de nullish coalescing, particularmente en grandes proyectos internacionales donde las interpretaciones erróneas de los valores falsy pueden tener implicaciones significativas.

Compatibilidad del Navegador

El operador de nullish coalescing es una característica relativamente nueva en JavaScript (ES2020). Asegúrese de que sus navegadores de destino lo admitan, o utilice un transpilador como Babel para proporcionar compatibilidad con navegadores más antiguos. Considere la demografía de uso de su aplicación. Por ejemplo, un proyecto dirigido a usuarios en países con una adopción de tecnología más lenta puede requerir más transpilación que uno dirigido a usuarios en regiones con tecnología avanzada.

Errores Que Debe Evitar

• Mezclar ?? y || con &&: Al combinar el operador de nullish coalescing (??) o el operador OR lógico (||) con el operador AND lógico (&&) sin paréntesis explícitos, JavaScript genera un error de sintaxis. Siempre use paréntesis para aclarar el orden de las operaciones.
• Confundir ?? con ||: Recuerde la diferencia crucial: ?? solo verifica null y undefined, mientras que || verifica cualquier valor falsy.

Ejemplo del Error 1 (Error de Sintaxis):

            // Esto generará un SyntaxError:
// const value = a ?? b && c;

// Forma correcta (usando paréntesis):
const value = a ?? (b && c);
const value2 = (a ?? b) && c;
            

              
                Copy
              
            
          

Alternativas a Nullish Coalescing (para navegadores más antiguos)

Si necesita admitir navegadores más antiguos que no admiten el operador de nullish coalescing, puede utilizar las siguientes alternativas:

• Operador OR lógico (||): Como se mencionó anteriormente, este es el enfoque tradicional. Sin embargo, tenga en cuenta el problema del valor falsy.
• Operador ternario: Una forma más detallada pero explícita de verificar null o undefined.

Ejemplo: Operador Ternario

            const value = a === null || a === undefined ? defaultValue : a;
            

              
                Copy
              
            
          

Conclusión

El operador de nullish coalescing (??) es una valiosa adición al lenguaje JavaScript, que proporciona una forma más precisa y legible de manejar las asignaciones de valores predeterminados cuando se trata de valores null o undefined. Al comprender sus beneficios y matices, puede escribir código más limpio, seguro y fácil de mantener. Combinarlo con el encadenamiento opcional mejora aún más su capacidad para manejar estructuras de datos complejas con elegancia. A medida que crea aplicaciones para una audiencia global, considere las implicaciones de los valores nulos e indefinidos en diferentes contextos culturales y regionales, y aproveche el nullish coalescing para brindar una experiencia consistente y fácil de usar para todos.