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 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

Todo lo que necesitas saber sobre JavaScript y SEO para ser el número uno en Google

Todo lo que necesitas saber sobre JavaScript y SEO para ser el número uno en Google

Si ha utilizado JavaScript para su sitio web, es importante recordar que puede frustrar sus intenciones al evitar que su sitio se indexe en Google. Compartiremos algunos consejos útiles y luego explicaremos cómo solucionar errores comunes de SEO de JavaScript.

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