Operador de coalescencia nula (??)
El operador nullish coalescing (??
) (de coalescencia nula) es un operador lógico que retorna el operando de lado derecho cuando el operando de lado izquierdo es null
o undefined
,
y en caso contrario retorna el operando de lado izquierdo.
Pruébalo
Sintaxis
expresionIzquierda ?? expresionDerecha
Descripción
El operador nullish coalescing puede ser visto como un caso especial del operador lógico OR (||
). Este último retorna el operando de lado derecho si el operando izquierdo es cualquier valor falsy, no solo null
o undefined
. En otras palabras, si se usa ||
para proveer algún valor por defecto a otra variable foo
, se puede encontrar comportamientos inesperados si se considera algún valor falsy como usable (por ejemplo, ''
o 0
). Consulte a continuación para más ejemplos.
El operador nullish coalescing tiene la quinta más baja precedencia de operadores, directamente por debajo de ||
y por arriba del operador condicional (ternario).
No es posible combinar ambos operadores AND (&&
) y OR (||
) directamente con ??
. Un error de sintasix será lanzado en tales casos.
null || undefined ?? "foo"; // lanza un error de sintasix (SyntaxError)
true && undefined ?? "foo"; // lanza un error de sintasix (SyntaxError)
En su lugar, agregue paréntesis para explícitamente indicar la precedencia:
(null || undefined) ?? "foo"; // retorna "foo"
Ejemplos
Usando el operador nullish coalescing
En este ejemplo, proveeremos valores por defecto pero mantendremos los valores que no sean null
o undefined
.
const nullValue = null;
const emptyText = ""; // falsy
const someNumber = 42;
const valA = nullValue ?? "predeterminado para A";
const valB = emptyText ?? "predeterminado para B";
const valC = someNumber ?? 0;
console.log(valA); // "predeterminado para A"
console.log(valB); // "" (ya que el valor vacío no es null ni undefined)
console.log(valC); // 42
Asignación de un valor por defecto a una variable
Antes, cuando se quería asignar un valor por defecto a una variable, un patrón común era usar el operador lógico OR (||
):
let foo;
// nunca es asignado un valor a foo por lo que se mantiene undefined
const someDummyText = foo || "¡Hola!";
Sin embargo, debido a que ||
es un operador lógico booleano, el operando de lado izquierdo fue convertido a un booleano para la evaluación y cualquier valor falsy (incluyendo 0
, ''
, NaN
, false
, etc.) no fue retornado. Este comportamiento puede causar consecuencias inesperadas si se considera 0
, ''
, o NaN
como valores válidos.
const count = 0;
const text = "";
const qty = count || 42;
const message = text || "¡hola!";
console.log(qty); // 42 y no 0
console.log(message); // "¡hola!" y no ""
El operador nullish coalescing evita esta trampa ya que solo retorna el segundo operando cuando el primero evalúa a null
o undefined
(pero ningún otro valor falsy):
const myText = ""; // Un texto vacío (que también es un valor falsy)
const notFalsyText = myText || "Hola mundo";
console.log(notFalsyText); // Hola mundo
const preservingFalsy = myText ?? "Hola vecino";
console.log(preservingFalsy); // '' (porque myText no es undefined ni null)
Cortocircuito (Short-circuiting)
Así como los operadores OR y AND, la expresión de lado derecho no es evaluada si el lado izquierdo no es null
ni undefined
.
function A() {
console.log("A fue ejecutada");
return undefined;
}
function B() {
console.log("B fue ejecutada");
return false;
}
function C() {
console.log("C fue ejecutada");
return "foo";
}
console.log(A() ?? C());
// Muestra "A fue ejecutada" después "C fue ejecutada" y después "foo"
// ya que como A() retornó undefined ambas expresiones fueron evaluadas
console.log(B() ?? C());
// Muestra "B fue ejecutada" después "false"
// ya que como B() retornó false (y no null ni undefined),
// la expresión de lado derecho no fue evaluada
Relación con el operador de encadenamiento opcional (?.)
El operador nullish coalescing trata undefined
y null
como valores específicos. Así como lo hace el operador de encadenamiento opcional (?.
), el cual es útil para acceder a una propiedad de un objeto que puede ser null
o undefined
. Combinándolos, se puede acceder de manera segura a una propiedad de un objeto que puede ser nulo y proveer un valor por defecto si lo es.
const foo = { someFooProp: "hola" };
console.log(foo.someFooProp?.toUpperCase() ?? "no disponible"); // "hola"
console.log(foo.someBarProp?.toUpperCase() ?? "no disponible"); // "no disponible"
Especificaciones
Specification |
---|
ECMAScript Language Specification # prod-CoalesceExpression |
Compatibilidad con navegadores
BCD tables only load in the browser