Logical Nullish Assignment ??= en JavaScript
Tags: javascript, webdev, spanish
Published: 2022-03-05 15:44:58

# **Índice**
1. [Introducción](#id1)
2. [Sintaxis](#id2)
3. [Funcionamiento](#id3)
4. [Equivalencia](#id4)
5. [Ejemplos](#id5)
6. [Soporte en Navagadores](#id6)
7. [Conclusiones](#id7)
8. [Referencias](#id8)

## **1. Introducción** <a name="id1"><a/>
**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** <a name="id2"><a/>

```js
x ??= y
x ?? (x = y)
```

> _Ambas sintaxis son equivalentes, aunque la primera más usada._

## **3. Funcionamiento** <a name="id3"><a/>

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** <a name="id4"><a/>

Esto:

```js
let x = null;

x ??= 12;
```

Equivale a esto:

```js
let x = null;

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

## **5. Ejemplos** <a name="id5"><a/>

### **Ejemplo #1**

```js
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**

```js
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**

```js
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**

```js
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** <a name="id6"><a/>

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

## **7. Conclusiones** <a name="id7"><a/>
**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** <a name="id8"><a/>
* [Logical nullish assignment (??=)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment)

* [Logical nullish Assignment ??= in JavaScript](https://www.geeksforgeeks.org/logical-nullish-assignment-in-javascript/)

* [Can I use Logical Nullish Assignment ?](https://caniuse.com/?search=Logical%20Nullish%20Assignment)

---

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

{% link https://dev.to/duxtech/es6-promesas-en-javascript-5bpb %}

{% link https://dev.to/duxtech/como-rayos-funciona-el-hook-useref-en-react-2lah %}

{% link https://dev.to/duxtech/local-storage-api-en-javascript-o88 %}

![gif](https://media.giphy.com/media/eY1JD4KPG4HMk/giphy.gif)