El operadornullish coalescing (??) (de coalescencia nula) es un operador lógico que retorna el operando de lado derecho cuando el operando de lado izquierdo esnull oundefined,y en caso contrario retorna el operando de lado izquierdo.

Pruébalo

const foo = null ?? "default string";console.log(foo);// Expected output: "default string"const baz = 0 ?? 42;console.log(baz);// Expected output: 0

Sintaxis

expresionIzquierda ?? expresionDerecha

Descripción

El operadornullish coalescing puede ser visto como un caso especial deloperador lógico OR (||). Este último retorna el operando de lado derecho si el operando izquierdo escualquier valorfalsy, no solonull oundefined. En otras palabras, si se usa|| para proveer algún valor por defecto a otra variablefoo, se puede encontrar comportamientos inesperados si se considera algún valorfalsy como usable (por ejemplo,'' o0). Consultea continuación para más ejemplos.

El operadornullish coalescing tiene la quinta más bajaprecedencia de operadores, directamente por debajo de|| y por arriba deloperador condicional (ternario).

No es posible combinar ambos operadores AND (&&) y OR (||) directamente con??. Unerror 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 seannull oundefined.

const nullValue = null;const emptyText = ""; // falsyconst 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 undefinedconst 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 valorfalsy (incluyendo0,'',NaN,false, etc.) no fue retornado. Este comportamiento puede causar consecuencias inesperadas si se considera0,'', oNaN como valores válidos.

const count = 0;const text = "";const qty = count || 42;const message = text || "¡hola!";console.log(qty); // 42 y no 0console.log(message); // "¡hola!" y no ""

El operadornullish coalescing evita esta trampa ya que solo retorna el segundo operando cuando el primero evalúa anull oundefined (pero ningún otro valorfalsy):

const myText = ""; // Un texto vacío (que también es un valor falsy)const notFalsyText = myText || "Hola mundo";console.log(notFalsyText); // Hola mundoconst 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 esnull niundefined.

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 evaluadasconsole.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 operadornullish coalescing trataundefined ynull como valores específicos. Así como lo hace eloperador de encadenamiento opcional (?.), el cual es útil para acceder a una propiedad de un objeto que puede sernull oundefined. 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

Compatibilidad con navegadores

Veáse también

• Operador de asignación de coalescencia nula (??=)
• Operador de encadenamiento opcional (?.)
• Operador lógico OR (||)
• Parámetros predeterminados