Operador de Coalición Nula en TypeScript

En este artículo, explicaremos el Operador de Coalición Nula en TypeScript.

YouTube Video

Operador de Coalición Nula en TypeScript

El operador de coalición nula (??) en TypeScript es similar a la evaluación de cortocircuito en JavaScript, pero se usa más específicamente para proporcionar un valor de respaldo solo cuando el lado izquierdo es null o undefined. Este operador te permite verificar fácilmente si un valor es null o undefined y establecer un valor por defecto según sea necesario.

El operador de coalición nula (??) devuelve el valor del lado derecho solo si el lado izquierdo es null o undefined. Esto permite que valores como false, una cadena vacía o el número 0 sean evaluados tal cual. Esta es una diferencia importante del operador OR lógico tradicional (||). Este operador fue introducido en TypeScript 3.7.

Sintaxis Básica

La sintaxis básica es la siguiente:.

1let result = value ?? defaultValue;

• value es el objetivo que se verifica para comprobar si es null o undefined.
• defaultValue es el valor que se devuelve cuando value es null o undefined.

Uso de Ejemplo

1function getUserName(userName: string | null | undefined): string {
2    return userName ?? "Default User";
3}
4
5console.log(getUserName("Alice"));  // Output: Alice
6console.log(getUserName(null));     // Output: Default User
7console.log(getUserName(undefined)); // Output: Default User

Aquí, la función getUserName devuelve "Default User" si userName es null o undefined, de lo contrario devuelve el valor de userName.

Diferencia con el operador OR lógico

Hay una diferencia importante entre el operador de fusión nulo y el operador lógico OR. El operador OR lógico trata valores como false, 0, y "" (cadena vacía) como "falsos", igual que null y undefined. Por otro lado, el operador de coalición nula solo utiliza null y undefined como respaldo.

Ejemplo del operador OR lógico

1function getUserAge(age: number | null | undefined): number {
2    return age || 18;  // `0` also applies the default value
3}
4
5console.log(getUserAge(25));  // Output: 25
6console.log(getUserAge(0));   // Output: 18
7console.log(getUserAge(null)); // Output: 18

• Como se muestra, el operador lógico OR devuelve el valor predeterminado 18 incluso cuando el valor es 0.

Ejemplo del operador de fusión nula

1function getUserAge(age: number | null | undefined): number {
2    return age ?? 18;  // `0` does not apply the default value
3}
4
5console.log(getUserAge(25));  // Output: 25
6console.log(getUserAge(0));   // Output: 0
7console.log(getUserAge(null)); // Output: 18

• Por otro lado, el operador de fusión nulo devuelve el valor original incluso cuando es 0.

• La elección entre el operador lógico OR y el operador de fusión nulo depende de si 0 o una cadena vacía son aceptables. Por ejemplo, si desea mantener la edad de un usuario como 0, debe usar el operador de fusión nula.

Combinación con Tipos

Puedes mejorar la robustez de tu código aprovechando la seguridad de tipos de TypeScript en combinación con el operador de coalición nula. En el siguiente ejemplo, se utilizan valores por defecto cuando ciertas propiedades son null o undefined.

 1interface User {
 2    name: string;
 3    age?: number | null;
 4}
 5
 6function displayUserInfo(user: User): string {
 7    const userName: string = user.name;
 8    const userAge: number = user.age ?? 18;
 9    return `Name: ${userName}, Age: ${userAge}`;
10}
11
12const user1: User = { name: "John", age: null };
13const user2: User = { name: "Doe" };
14
15console.log(displayUserInfo(user1)); // Output: Name: John, Age: 18
16console.log(displayUserInfo(user2)); // Output: Name: Doe, Age: 18

• En la interfaz User, la propiedad age puede ser un number, null o undefined, por lo que el operador de fusión nulo se utiliza para asignar un valor predeterminado de 18.
• Mientras tanto, la propiedad name solo permite una string, por lo que el valor se utiliza tal cual.

Resumen

• El operador de fusión nula ayuda a establecer un valor predeterminado solo cuando el valor es null o undefined. A diferencia del operador lógico OR tradicional, no trata false, 0 o cadenas vacías como 'falsy', lo que lo hace especialmente útil cuando se desea preservar esos valores. Además, combinarlo con el sistema de tipos de TypeScript permite crear un código más sólido y legible.
• Al usar eficazmente el operador de fusión nula, puedes escribir de manera concisa la lógica para establecer valores predeterminados mientras reduces verificaciones innecesarias de null.

Operador de Asignación de Fusión Nula en TypeScript

El operador de asignación de fusión nula (??=) es un operador relativamente nuevo introducido en TypeScript, que ofrece un método conveniente para asignar un valor solo si la variable es null o undefined. Aquí explicaremos cómo funciona este operador, en qué situaciones es efectivo y proporcionaremos ejemplos con código.

¿Qué es el Operador de Asignación de Fusión Nula?

El operador de asignación por fusión nula es un operador de asignación basado en el operador de fusión nula. Este operador se utiliza para asignar un nuevo valor solo si la variable es null o undefined.

1let variable: string | null = null;
2variable ??= "Default Value"; // The variable is null,
3                              // so the new value is assigned
4
5console.log(variable); // Output: "Default Value"

Al usar este operador, puedes escribir de manera más concisa la lógica de "asignar si la variable es undefined o null".

Comparación con Métodos Tradicionales de Asignación

Sin el operador de asignación por fusión nula, necesitaría usar una declaración if o un operador ternario para lograr el mismo comportamiento. Comparemos con los métodos tradicionales de asignación.

Método convencional

Con una declaración if, se puede escribir de la siguiente manera:.

1let variable: string | null | undefined = null;
2if (variable === null || variable === undefined) {
3    variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"

Método utilizando el operador ternario

Alternativamente, utilizando el operador ternario, se puede escribir de la siguiente manera:.

1let variable: string | null | undefined = undefined;
2variable = variable != null ? variable : "Default Value";
3// != null checks for both null and undefined
4// (intentional loose equality comparison)
5
6console.log(variable); // Output: "Default Value"

Un método conciso usando el operador de asignación de fusión nulo.

Por otro lado, utilizando el operador de asignación de fusión nulo, se puede escribir así:.

1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"

Como se muestra, el operador de asignación de fusión nulo es mucho más simple y legible en comparación con otros métodos de asignación, mejorando la claridad del código.

Ejemplos Específicos de Uso de ??=

El operador de asignación por fusión nula es útil en varios escenarios, como la inicialización de propiedades de objetos y la configuración de valores predeterminados. Aquí hay algunos ejemplos específicos.

Inicialización de propiedades del objeto

 1interface Config {
 2    theme?: string;
 3    language?: string;
 4}
 5
 6let config: Config = {};
 7config.theme ??= "light";  // Set the default "light" theme if none is specified
 8config.language ??= "en";  // Set the default "en" language if none is specified
 9
10console.log(config); // Output: { theme: "light", language: "en" }

Inicialización de matrices

1let numbers: number[] | null = null;
2numbers ??= [];  // Assign an empty array if numbers is null
3
4numbers.push(1);
5console.log(numbers); // Output: [1]

Definición de valores predeterminados para los argumentos de función

1function greet(name?: string) {
2    name ??= "Guest";  // Set name to "Guest" if it is undefined or null
3    console.log(`Hello, ${name}!`);
4}
5
6greet();          // Output: "Hello, Guest!"
7greet("Alice");   // Output: "Hello, Alice!"

Notas y Restricciones

El operador de asignación por fusión nula es muy útil, pero hay algunas advertencias.

Solo se tienen en cuenta null y undefined..

1let str: string | null = "";
2str ??= "Default";
3console.log(str); // Output: "" (remains an empty string)
4
5let num: number | undefined = 0;
6num ??= 100;
7console.log(num); // Output: 0 (remains 0)

• Este operador realiza la asignación solo cuando el valor es null o undefined. Por ejemplo, valores como una cadena vacía (""), 0 o false no son tenidos en cuenta.

Tenga cuidado al usarlo con otros operadores..

 1let value: string | null = null;
 2
 3// Targets not only "null" and "undefined" but also falsy values
 4value ||= "Default";
 5console.log(value);  // Output: "Default"
 6
 7value = "";
 8// An empty string is also targeted
 9value ||= "Default";
10console.log(value);  // Output: "Default"
11
12value = null;
13// Targets only null or undefined
14value ??= "Default";
15console.log(value);  // Output: "Default"

• El operador de asignación de fusión nulo puede producir resultados no esperados cuando se usa con otros operadores. Es especialmente importante entender la diferencia entre este y el operador de asignación OR lógico.

Código de Ejemplo

 1let config: { theme?: string; language?: string } = {};
 2
 3// Use Nullish Coalescing Assignment to set default values
 4config.theme ??= "light";
 5config.language ??= "en";
 6
 7console.log(config); // Output: { theme: "light", language: "en" }
 8
 9let list: number[] | null = null;
10list ??= [];
11list.push(42);
12
13console.log(list); // Output: [42]

• Al usar el operador de asignación por fusión nula, puede eliminar código innecesario y escribir código TypeScript más fluido y elegante.

Resumen

El operador de asignación nullish coalescing (??=) es una de las operaciones de asignación más simples y eficientes en TypeScript. Es particularmente útil cuando necesitas realizar comprobaciones de null o undefined mientras configuras valores predeterminados. En comparación con declaraciones if tradicionales o operadores ternarios, el código se vuelve más conciso 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