Operador de fusión nula o coalescente nula en JavaScript

Estrada Web Group
Estrada Web Group
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.
Compartir artículo:

Más artículos geniales

Declaración de variables en JavaScript con let

Declaración de variables en JavaScript con let

Resumen: en este tutorial, aprenderás a usar la palabra clave let de JavaScript para declarar variables de ámbito de bloque.

Ver artículo completo
Cómo usar la declaración if else if en JavaScript

Cómo usar la declaración if else if en JavaScript

Resumen: en este tutorial, aprenderás a usar la declaración if... else...if en JavaScript para verificar múltiples condiciones y ejecutar el bloque correspondiente si una condición es verdadera.

Ver artículo completo
Cómo obtener el tamaño de un array en JavaScript

Cómo obtener el tamaño de un array en JavaScript

Resumen: en este tutorial, aprenderás sobre la propiedad de length de un array o matriz en JavaScript y cómo manejarla correctamente.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla