Coalescencia nula con ??
Proporcione valores alternativos solo para null y undefined, no para todos los valores falsy.
Coalescencia nula con ?? es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.
El operador de coalescencia nula
El operador ?? devuelve su operando derecho únicamente cuando el operando izquierdo es null o undefined. En cualquier otro caso, devuelve el valor izquierdo. Es la forma precisa de proporcionar valores predeterminados.
const name: string | null = null;
const display = name ?? 'Guest';
console.log(display); // 'Guest'Solo los valores nulos o indefinidos activan el valor alternativo
La palabra clave es nullish: solo null y undefined hacen que se utilice el lado derecho. Todos los demás valores, incluidos los falsy, pasan sin cambios.
console.log(0 ?? 99); // 0
console.log('' ?? 'x'); // ''
console.log(false ?? true); // false
console.log(null ?? 'def'); // 'def'El problema de ||
El OR lógico || utiliza el valor alternativo para cualquier valor falsy: 0, '', false, NaN, además de los valores nulos o indefinidos. Esto suele producir errores cuando 0 o la cadena vacía son entradas válidas.
const count = 0;
console.log(count || 10); // 10 — wrong! 0 is a valid count
console.log(count ?? 10); // 0 — correctValores predeterminados bien elegidos
Use ?? cuando cero, la cadena vacía o false sean valores legítimos que quiera conservar. Reserve || para los casos en los que realmente deba utilizarse el valor alternativo ante cualquier valor falsy.
function volume(v: number | undefined): number {
return v ?? 50; // 0 stays 0, undefined becomes 50
}
console.log(volume(0), volume(undefined));?? con parámetros de función
Un patrón habitual consiste en proporcionar un valor predeterminado para un parámetro opcional cuando se pasa undefined, conservando al mismo tiempo las entradas falsy con significado.
function greet(name?: string): string {
return 'Hello, ' + (name ?? 'friend');
}
console.log(greet('Ada'), greet());El tipo del resultado de ??
El tipo de a ?? b elimina null | undefined del tipo de a y lo combina mediante una unión con el tipo de b. Si a es string | null y b es string, el resultado es string.
const maybe: string | null = null;
const sure: string = maybe ?? 'default';
console.log(sure.toUpperCase());Encadenamiento de valores predeterminados
Puede encadenar ?? para probar varias fuentes en orden y pasar a la siguiente cuando un valor sea nulo o indefinido. Gana el primer valor que no sea nulo ni indefinido.
const fromEnv: string | undefined = undefined;
const fromConfig: string | null = null;
const value = fromEnv ?? fromConfig ?? 'hardcoded';
console.log(value);?? y la precedencia
No puede combinar ?? con || o && sin paréntesis; TypeScript lo exige para evitar ambigüedades. Agrupe siempre las expresiones de forma explícita.
const a: number | null = null;
const b = true;
// const x = a ?? 5 || 10; // Error without parens
const x = (a ?? 5) || 10;
console.log(x);Distinguir cero de la ausencia
Una necesidad frecuente en situaciones reales: una temperatura, puntuación o saldo de 0 son datos válidos, mientras que undefined significa «no proporcionado». ?? mantiene la distinción; || los trata como si fueran lo mismo.
function format(temp: number | undefined): string {
return (temp ?? 'N/A') + ' degrees';
}
console.log(format(0), format(undefined));?? con propiedades de objetos
Leer una propiedad opcional y asignarle un valor predeterminado es el uso cotidiano de ??. Se combina de forma natural con el encadenamiento opcional, que combinará en la siguiente lección.
type Opts = { retries?: number };
function run(o: Opts): number {
return o.retries ?? 3;
}
console.log(run({ retries: 0 }), run({}));Cuándo elegir cada uno
Regla de decisión: si 0, '' o false son valores válidos que debe conservar, use ??. Si realmente desea reemplazar cualquier valor falsy, use ||. Los errores al asignar valores predeterminados casi siempre se deben a elegir || por costumbre.
const username = '';
console.log(username || 'anon'); // 'anon' — empty replaced
console.log(username ?? 'anon'); // '' — empty keptComprobación rápida
Compruebe su comprensión de la coalescencia de nulos.
Repaso: coalescencia de nulos
Ha aprendido que ??:
- Devuelve el valor alternativo solo cuando el lado izquierdo es
nulloundefined. - Conserva valores falsy válidos como
0,''yfalse, a diferencia de||. - Elimina
null | undefineddel tipo del resultado. - Requiere paréntesis cuando se combina con
||o&&.
A continuación, combinaremos ?. y ??.
function port(v: number | undefined): number {
return v ?? 8080;
}
console.log(port(0), port(undefined));
Aprende TypeScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 101
- Lecciones
- 352
Preguntas frecuentes
¿La lección «Coalescencia nula con ??» es gratis?
Sí — el texto completo de «Coalescencia nula con ??» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Coalescencia nula con ??»?
Proporcione valores alternativos solo para null y undefined, no para todos los valores falsy. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar TypeScript Academy?
No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Coalescencia nula con ??»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?
Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Encadenamiento opcional con ?.
- Coalescencia nula con ??
- Combinación de ?. y ??
- Llamadas y acceso a elementos opcionales