Logical Nullish Assignment ??= en JavaScript

Índice

1. Introducción
2. Sintaxis
3. Funcionamiento
4. Equivalencia
5. Ejemplos
6. Soporte en Navagadores
7. Conclusiones
8. Referencias

1. Introducción

Logical Nullish Assignment o Asignación Lógica Nula en español (??=) es un operador nuevo en JavaScript sencillo de comprender y con aplicaciones practicas en nuestro código.

2. Sintaxis

x ??= y
x ?? (x = y)

Ambas sintaxis son equivalentes, aunque la primera más usada.

3. Funcionamiento

Solo si el valor de x es nullish el valor de y se asignará a x.
Entiendase por valor nullish solo 2 posibilidades: null o undefined. Cualquier otro valor no es considerado nullish.

4. Equivalencia

Esto:

let x = null;

x ??= 12;

Equivale a esto:

let x = null;

if (x === null || x === undefined) {
  x = 12;
}

5. Ejemplos

Ejemplo #1

const x = 25;
let y;
const z = 30;
console.log(x ??= y); // 25
// x no es nullish, entonces se respeta su valor

console.log(y ??= z); // 30
// y es undefined, entonces adopta el valor de z

Ejemplo #2

const pokemon = {
  id:1,
  nombre: "Pikachu"
};

pokemon.nombre ??= "Charmander";
pokemon.peso ??= 10;

console.log(pokemon.nombre); // Pikachu
console.log(pokemon.peso); // 10

pokemon.nombre imprime Pikachu por que su valor no es nullish.
En cambio, pokemon.peso es undefined en el objeto pokemon, entonces le asignamos el valor 10.

Ejemplo #3

const config = (obj) => {
  obj.duracion ??= 500;
  obj.largo ??= 250;
  return obj;
}

console.log(config({ duracion: 100 })); // {duracion: 100, largo: 250}
console.log(config({})); // {duracion: 500, largo: 250}

Ejemplo #4

const arreglo = [1, 2, undefined, "Hola mundo", null];

const res = arreglo.map((item, index, arr) => {
  return arr[index] ??= "xxx"
})

console.log(res); // [1, 2, "xxx", "Hola mundo", "xxx"];

En este ejemplo recorremos el arreglo con map y con Logical Nullish Assignment remplazamos los valores nullish del arreglo con una cadena xxx.

6. Soporte en Navagadores

• Chrome 85
• Edge 85
• Firefox 79
• Safari 14
• Opera 71

7. Conclusiones

Logical Nullish Assignment es un operador relativamente nuevo en javascript, pero esta bueno conocerlo y saber que existe.
Es sencillo de usar y comprender, tiene muchas aplicaciones interesantes.

8. Referencias

• Logical nullish assignment (??=)

• Logical nullish Assignment ??= in JavaScript

• Can I use Logical Nullish Assignment ?

---

Posiblemente los siguientes artículos sean de tu interés:

ES6: Promesas en JavaScript

Cristian Fernando ・ Oct 14 '21

#javascript #webdev #beginners #spanish

¿Cómo rayos funciona el hook useRef en React? 🧐

Cristian Fernando ・ Sep 20 '21

#react #javascript #webdev #spanish

Local Storage API en JavaScript 🍂

Cristian Fernando ・ Aug 2 '21

#javascript #html #webdev #spanish