Introducción

JavaScript, al ser uno de los lenguajes de programación más populares, proporciona a los desarrolladores una variedad de operadores para manejar diversas operaciones lógicas. Entre estos, los operadores lógico OR (||) y coalescente nulo (??) son herramientas fundamentales para gestionar valores predeterminados y manejar valores nulos. Este artículo profundizará en las diferencias entre estos dos operadores, sus casos de uso y ejemplos prácticos y complejos para ilustrar su uso.

Comprensión del operador lógico OR (||)

El operador lógico OR (||) en JavaScript se usa ampliamente para devolver el primer valor verdadero entre sus operandos o el último valor si ninguno es verdadero. Se utiliza principalmente para configurar valores predeterminados.

Sintaxis

result = operand1 || operand2;

Cómo funciona

El || el operador evalúa de izquierda a derecha y devuelve el primer operando si es verdadero; de lo contrario, evalúa y devuelve el segundo operando.

Ejemplo 1: configuración de valores predeterminados

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput || defaultText;
console.log(message); // Output: 'Hello, World!'

En este ejemplo, userInput es una cadena vacía (falsa), por lo que se devuelve defaultText.

Ejemplo 2: Manejo de múltiples valores

let firstName = null;
let lastName = 'Doe';

let name = firstName || lastName || 'Anonymous';
console.log(name); // Output: 'Doe'

Aquí, el nombre es nulo (falso), por lo que el apellido se devuelve como verdadero.

Limitaciones del operador lógico OR (||)

La principal limitación del || operador es que trata varios valores como falsos, como 0, NaN, '', falso, nulo e indefinido. Esto puede generar resultados inesperados cuando se pretende que estos valores sean válidos.

Presentamos el operador coalescente nulo (??)

El operador coalescente nulo (??) es una adición más reciente a JavaScript, introducida en ES2020. Está diseñado para manejar casos en los que null o indefinido están explícitamente destinados a ser los únicos valores nulos considerados.

Sintaxis

result = operand1 ?? operand2;

Cómo funciona

El ?? El operador devuelve el operando de la derecha cuando el operando de la izquierda es nulo o no está definido. De lo contrario, devuelve el operando de la izquierda.

Ejemplo 1: configuración de valores predeterminados

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput ?? defaultText;
console.log(message); // Output: ''

En este ejemplo, userInput es una cadena vacía, que no es nula ni está indefinida, por lo que se devuelve.

Ejemplo 2: Manejo de valores nulos

let firstName = null;
let lastName = 'Doe';

let name = firstName ?? lastName ?? 'Anonymous';
console.log(name); // Output: 'Doe'

Aquí, nombre es nulo, por lo que se devuelve apellido ya que no es nulo ni está indefinido.

Comparación de operadores lógicos OR (||) y coalescentes nulos (??)

Ejemplo 1: comparación de valores falsos

let value1 = 0;
let value2 = '';

let resultOR = value1 || 'default';
let resultNullish = value1 ?? 'default';

console.log(resultOR); // Output: 'default'
console.log(resultNullish); // Output: 0

En este ejemplo, 0 se considera falso según || operador pero es un valor válido para ?? operador.

Ejemplo 2: uso de ambos operadores juntos

let userInput = null;
let fallbackText = 'Default Text';

let message = (userInput ?? fallbackText) || 'Fallback Message';
console.log(message); // Output: 'Default Text'

Aquí, userInput es nulo, por lo que ?? usa fallbackText. operador. Luego el resultado es verificado por || operador, pero como fallbackText es verdadero, se devuelve.

Ejemplos complejos de operadores lógicos OR (||) y coalescentes nulos (??)

Ejemplo 3: operaciones anidadas con objetos

Considere un escenario en el que necesite establecer valores predeterminados para las propiedades de los objetos anidados.

let userSettings = {
  theme: {
    color: '',
    font: null
  }
};

let defaultSettings = {
  theme: {
    color: 'blue',
    font: 'Arial'
  }
};

let themeColor = userSettings.theme.color || defaultSettings.theme.color;
let themeFont = userSettings.theme.font ?? defaultSettings.theme.font;

console.log(themeColor); // Output: 'blue'
console.log(themeFont); // Output: 'Arial'

En este ejemplo, userSettings.theme.color es una cadena vacía, por lo que se utiliza defaultSettings.theme.color. userSettings.theme.font es nulo, por lo que se utiliza defaultSettings.theme.font.

Ejemplo 4: parámetros de función con valores predeterminados

Al tratar con parámetros de funciones, es posible que desees proporcionar valores predeterminados para los argumentos que faltan.

function greet(name, greeting) {
  name = name ?? 'Guest';
  greeting = greeting || 'Hello';

  console.log(`${greeting}, ${name}!`);
}

greet(); // Output: 'Hello, Guest!'
greet('Alice'); // Output: 'Hello, Alice!'
greet('Bob', 'Hi'); // Output: 'Hi, Bob!'
greet(null, 'Hey'); // Output: 'Hey, Guest!'

En este ejemplo, el parámetro de nombre utiliza la propiedad ?? operador para establecer un valor predeterminado de 'Invitado' si el nombre es nulo o no está definido. El parámetro de saludo utiliza el || operador para establecer un valor predeterminado de 'Hola' si el saludo tiene un valor falso que no sea nulo o indefinido.

Ejemplo 5: combinación con encadenamiento opcional

El encadenamiento opcional (?.) se puede combinar con || y ?? para manejar propiedades de objetos profundamente anidados de forma segura.

let user = {
  profile: {
    name: 'John Doe'
  }
};

let userName = user?.profile?.name || 'Anonymous';
let userEmail = user?.contact?.email ?? 'No Email Provided';

console.log(userName); // Output: 'John Doe'
console.log(userEmail); // Output: 'No Email Provided'

En este ejemplo, el encadenamiento opcional garantiza que si alguna parte de la ruta de la propiedad no existe, devuelva indefinido, lo que evita errores. El || y ?? Los operadores luego proporcionan los valores predeterminados apropiados.

Mejores prácticas y casos de uso

1. Uso || para incumplimiento generalizado:

   • Cuando necesita proporcionar valores predeterminados para una variedad de condiciones falsas (por ejemplo, cadenas vacías, 0, NaN).

2. Usar ?? para comprobaciones nulas precisas:

   • Cuando deseas específicamente manejar valores nulos o indefinidos sin afectar otros valores falsos.

3. Combinando ambos:

   • Usa una combinación de || y ?? para escenarios complejos donde necesita manejar tanto valores verdaderos/falsos como valores nulos claramente.

Preguntas frecuentes

¿Qué hace el operador lógico OR (||)?
El operador lógico OR (||) devuelve el primer valor verdadero entre sus operandos o el último operando si ninguno es verdadero.

¿Cuándo debo utilizar el operador coalescente nulo (??)?
Utilice el operador Coalescente nulo (??) cuando necesite manejar valores nulos o indefinidos específicamente sin tratar otros valores falsos como 0 o cadenas vacías como nulos.

¿Puedo usar ambos operadores juntos?
Sí, puedes usar ambos || y ?? juntos para manejar diferentes tipos de valores y garantizar que la lógica de su código cubra varios casos de manera efectiva.

¿Cómo || manejar cadenas vacías?
El || El operador trata las cadenas vacías como falsas, por lo que devolverá el siguiente operando si el primero es una cadena vacía.

¿El operador coalescente nulo (??) es compatible con todos los navegadores?
El ?? El operador es compatible con navegadores y entornos modernos que admiten ES2020. Para entornos más antiguos, es posible que necesites utilizar un transpilador como Babel.

¿Cuáles son las diferencias entre || y ?? operadores?
La principal diferencia es que || considera varios valores como falsos (p. ej., 0, '', falso), mientras que ?? solo trata nulos e indefinidos como valores nulos.

Conclusión

Comprender las diferencias entre los operadores lógico OR (||) y coalescente nulo (??) en JavaScript es crucial para escribir código sólido y libre de errores. El || El operador es excelente para escenarios de incumplimiento amplios, mientras que ?? es perfecto para manejar valores nulos con precisión. Al utilizar estos operadores de manera adecuada, puede asegurarse de que su código maneje varios estados de datos de manera efectiva, brindando una experiencia de usuario perfecta.