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 esnull
oundefined
.defaultValue
es el valor que se devuelve cuandovalue
esnull
oundefined
.
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 es0
.
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 como0
, 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 propiedadage
puede ser unnumber
,null
oundefined
, por lo que el operador de fusión nulo se utiliza para asignar un valor predeterminado de18
. - Mientras tanto, la propiedad
name
solo permite unastring
, 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
oundefined
. A diferencia del operador lógico OR tradicional, no tratafalse
,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
oundefined
. Por ejemplo, valores como una cadena vacía (""
),0
ofalse
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.