DEV Community

Cristian Fernando
Cristian Fernando

Posted on

Logical Nullish Assignment ??= en JavaScript

#javascript #webdev #spanish

Í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)
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Equivale a esto:

let x = null; if (x === null || x === undefined) { x = 12; }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Ejemplo #2 

const pokemon = { id:1, nombre: "Pikachu" }; pokemon.nombre ??= "Charmander"; pokemon.peso ??= 10; console.log(pokemon.nombre); // Pikachu console.log(pokemon.peso); // 10
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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

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

duxtech

ES6: Promesas en JavaScript

Cristian Fernando ・ Oct 14 '21

#javascript #webdev #beginners #spanish
duxtech

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

Cristian Fernando ・ Sep 20 '21

#react #javascript #webdev #spanish
duxtech

Local Storage API en JavaScript 🍂

Cristian Fernando ・ Aug 2 '21

#javascript #html #webdev #spanish

gif

Top comments (0)