Hamburger Icon
Nullish coalescing o fusión de nulos en Javascript

Nullish coalescing o fusión de nulos en Javascript

La versión EcmaScript 11 o ES2020 nos trajo como novedad el operador denotado con dos símbolos de interrogación cerrada "??": Nullish coalescing o fusión de nulos.

Este nuevo operador viene bien cuando queremos asignar un valor por defecto a una variable, siempre y cuando lo que queramos asignar no sea ni null ni undefined.

Cómo funciona

En cada lado del operador tendremos dos expresiones. La variable tomará el valor de la primera expresión, a no ser que ésta sea null o undefined, en cuyo caso tomará el valor de la segunda expresión.

Vamos a verlo con estos ejemplos:

https://a.storyblok.com/f/96536/1040x480/05d3a954f7/nullish-coalescing-01.png

También podemos encadenar varias expresiones:

https://a.storyblok.com/f/96536/1040x524/ea00ca05ef/nullish-coalescing-02.png

Por qué este operador era necesario

Ya tenemos en JavaScript el operador "||" u OR lógico, que hace algo similar. La diferencia, es que en este caso se coge el valor de la expresión de la izquierda siempre y cuando no sea un valor falsy, en cuyo caso se coge el valor de la derecha.

En JavaScript los valores falsy son los siguientes:

  • false
  • null
  • undefined
  • NaN
  • ""
  • 0

Con el OR lógico nos podemos encontrar con comportamientos no deseados, sobre todo cuando evaluamos cadenas vacías o el valor numérico cero y no queremos que se traten como valores falsy.

Ejemplo:

https://a.storyblok.com/f/96536/1132x524/12d9b28b31/nullish-coalescing-03.png

Ahora ya no tendremos que buscar formas alternativas de asignar valores por defecto a variables pudiendo controlar estos casos.

Puedes ver toda la documentación sobre este operador en la página de MDN.