Operador de Fusión Nula en JavaScript

Este artículo explica el Operador de Unión Nula en JavaScript.

YouTube Video

Operador de Fusión Nula en JavaScript

En JavaScript, el Operador de Unión Nula (??) evalúa si un valor es null o undefined y devuelve un valor predeterminado diferente si lo es. Es similar al operador lógico O (||) comúnmente utilizado, pero se diferencia en que se especializa en null y undefined.

El operador lógico OR devuelve el valor del lado derecho si el valor del lado izquierdo es falsy, mientras que el operador de agrupación por nulidad devuelve el valor del lado derecho solo cuando el valor del lado izquierdo es null o undefined. Esta característica permite manejar correctamente valores como 0 y cadenas vacías ("").

Sintaxis Básica

1let result = value ?? defaultValue;

• value es el valor que se está verificando.
• defaultValue es el valor devuelto cuando value es null o undefined.

Ejemplos de Uso del Operador de Fusión Nula

El siguiente ejemplo implementa un proceso para devolver un valor predeterminado en caso de null o undefined.

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

En este código, dado que name es null, se devuelve el valor de defaultName, "Anonymous". Si name es un valor distinto de null o undefined, se devuelve ese valor.

Diferencias con el Operador OR Lógico

El operador de agrupación por nulidad es similar al operador lógico OR pero tiene una diferencia importante. El operador lógico OR verifica valores 'falsy' (false, 0, NaN, "", null, undefined, etc.), mientras que el operador de agrupación por nulidad verifica solo null y undefined.

Ejemplo de Operador OR Lógico:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

Ejemplo de Operador de Fusión Nula:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

De esta manera, el operador de agrupación por nulidad conserva valores válidos como 0 y cadenas vacías ("") y devuelve un valor predeterminado solo cuando es necesario. Dado que el operador lógico OR trata estos valores como falsy y devuelve el valor predeterminado, es importante elegir el operador adecuado según el caso de uso.

Ejemplo Cuando se Usa en Combinación:

El operador de agrupación por nulidad también se puede combinar con otros operadores lógicos, pero se requiere precaución al hacerlo.

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;

• Por ejemplo, cuando se usa junto con el operador lógico OR (||) o el operador lógico AND (&&), se deben usar paréntesis para aclarar el orden de las operaciones.

1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false

• En este ejemplo, a ?? b se evalúa primero y, dado que a es null, se devuelve b. Luego, se evalúa b || c y, dado que b es falso, finalmente se devuelve c.

Casos donde el operador de agrupación por nulidad es útil

Los siguientes son casos donde el operador de agrupación por nulidad es útil.

• Valores Predeterminados para Formularios Esto se puede usar en escenarios donde se establece un valor predeterminado para los campos de entrada de formularios cuando el usuario no ingresa nada.

1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18

• Manejo de Respuestas de API El procesamiento de respaldo se puede realizar cuando el valor es null o undefined en las respuestas de la API.

1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

Resumen

El operador de agrupación por nulidad (??) es muy útil para inicializar datos y manejar respuestas de API, ya que devuelve un valor predeterminado cuando encuentra null o undefined. En particular, es una mejor opción que el operador lógico OR tradicional (||) cuando se desea manejar correctamente valores falsy como 0 o cadenas vacías.

Sobre el Operador de Asignación de Fusión Nula (??=)

Visión general

En JavaScript, se ha introducido el Operador de Asignación de Unión Nula ??= para asignar eficientemente un nuevo valor a las variables que contienen null o undefined. Este operador es un atajo conveniente para asignar un valor a una variable solo si un valor específico es null o undefined.

Uso básico

El operador de asignación de agrupación por nulidad funciona de la siguiente manera:.

• Si una variable es null o undefined, asigna el valor del lado derecho.
• Si la variable no es ni null ni undefined, no hace nada y conserva el valor actual.

Sintaxis

La sintaxis básica del operador de asignación de agrupación por nulidad es la siguiente:.

1x ??= y;

• Se asigna y a x si x es null o undefined.
• Si x ya tiene un valor (que no sea null o undefined), el valor de x no cambiará.

Ejemplo

Veamos un ejemplo básico del operador de asignación de fusión nula.

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"

• En este código, dado que userName es null, se asigna el valor de defaultName.

A continuación, aquí hay un ejemplo donde el valor no es ni null ni undefined.

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"

• En este caso, como "Alice" ya está asignado a userName, no se realiza ninguna asignación.

Comparación con otros operadores de asignación

JavaScript también tiene varios otros operadores de asignación. En particular, la diferencia con el operador de asignación lógico OR (||=) es importante.

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

El operador de asignación lógico OR asigna un valor incluso cuando se encuentra con valores falsy como false, 0 o una cadena vacía (""), mientras que el operador de asignación de agrupación por nulidad solo opera cuando el valor es null o undefined.

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

Dado que el operador de asignación de agrupación por nulidad solo opera con null o undefined, es muy útil cuando se desea conservar valores como 0 o false.

Casos de uso en el mundo real

Un caso de uso en el mundo real para el operador de asignación de fusión nula puede ser el siguiente:.

1. Establecer valores predeterminados

   Es útil para establecer valores predeterminados cuando las entradas del usuario o las respuestas de la API pueden ser null o undefined.

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

2. Manejo de parámetros opcionales

   También se puede utilizar para realizar acciones predeterminadas cuando no se especifican argumentos en las funciones.

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

Resumen

El operador de asignación de agrupación por nulidad (??=) solo asigna un valor cuando el valor del lado izquierdo es null o undefined, haciendo el código más conciso y ayudando a prevenir asignaciones no deseadas. Especialmente al trabajar con valores "falsos" como 0 o false, puede ser más apropiado que el operador lógico OR tradicional (||=).

Al utilizar este operador, puedes crear un código más sólido y legible.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video