Operador de fusión nula o coalescente nula en JavaScript

Resumen: en este tutorial, aprenderás sobre el operador coalescente nulo o fusión nula de JavaScript (??) que acepta dos valores y devuelve el segundo valor si el primero es nulo o indefinido.

Introducción al operador coalescente nulo de JavaScript

ES2020 introdujo el operador coalescente nulo indicado por los signos de interrogación dobles (??).

El operador de fusión nula (nullish coalescing operator) en JavaScript es representado por dos signos de interrogación dobles (??). Este operador se utiliza para evaluar y devolver el primer operando si no es null ni undefined, y en caso contrario, devuelve el segundo operando.

En otras palabras, si el primer operando tiene un valor definido (no es null ni undefined), entonces el operador de fusión nula devuelve ese valor. Si el primer operando es null o undefined, entonces devuelve el segundo operando.

Ejemplo sencillo

Por ejemplo, si tenemos la siguiente variable:

const ejemplo = null;

Podemos utilizar el operador de fusión nula para asignar un valor por defecto en caso de que la variable sea null o undefined:

const valorPorDefecto = "Valor por defecto";
const resultado = ejemplo ?? valorPorDefecto;
console.log(resultado); // "Valor por defecto"

En este ejemplo, la variable resultado tendrá como valor "Valor por defecto", ya que ejemplo es null y el operador de fusión nula devuelve el segundo operando (valorPorDefecto).

El operador coalescente nulo es un operador lógico que acepta dos valores:

valor1 ?? valor2

El operador de fusión nula devuelve el segundo valor (valor2) si el primer valor (valor1) es nulo o indefinido. Técnicamente, el operador coalescente nulo es equivalente al siguiente bloque:

const result = value1;
if(result === null || result === undefined) {
   result = value2;
}

Un valor nulo es un valor que es null o undefined.

El siguiente ejemplo usa el operador coalescente null (??) para devolver la cadena 'John' porque el primer valor es null:

const name = null ?? 'John';
console.log(name); // 'John'

Y este ejemplo devuelve 28 porque el primer valor no está definido (undefined):

const age = undefined ?? 28;
console.log(age);

¿Por qué el operador coalescente nulo o de fusión nula?

Al asignar un valor predeterminado a una variable, a menudo se utiliza el operador lógico OR (||). Por ejemplo:

let count;
let result = count || 1 ;
console.log(result); // 1

En este ejemplo, la variable de count no está definida (undefined), se convierte en false. Por lo tanto, el result es 1.

Sin embargo, el operador lógico OR (||) a veces es confuso si consideras 0 o cadenas vacías '' como un valor válido como este:

let count = 0;
let result = count || 1;

El resultado es 1, no 0, que es posible que no esperes.

El operador coalescente nulo te ayuda a evitar este problema rebuscado. Solo devuelve el segundo valor cuando el primero es null o undefined.

El operador coalescente nulo usa cortocircuito

De forma similar a los operadores lógicos OR y AND, el operador de fusión nula no evalúa el segundo valor si el primer operando no está definido ni es nulo.

Por ejemplo:

let result = 1 ?? console.log('Hola');

En este ejemplo, el operador ?? no evalúa la segunda expresión que muestra el "Hola" a la consola porque el primer valor es 1, que no es null ni undefined.

El siguiente ejemplo evalúa la segunda expresión porque la primera no está definida:

let result = undefined ?? console.log('Hola');

Resultado

'Hola'

Encadenamiento con el operador AND u OR

Se producirá un error (SyntaxError) si combinas el operador lógico AND u OR directamente con el operador coalescente nulo de esta manera:

const result = null || undefined ?? 'OK'; // SyntaxError

Sin embargo, puedes evitar este error ajustando la expresión a la izquierda del operador ?? entre paréntesis para especificar explícitamente las precedencias de los operadores:

const result = (null || undefined) ?? 'OK';
console.log(result); // 'OK'

Resumen

• El operador coalescente nulo (??) es un operador lógico que acepta dos valores y devuelve el segundo valor si el primero es null o undefined.
• El operador coalescente nulo está cortocircuitado y no puede combinarse directamente con el operador lógico AND u OR.