Nullish Coalescing Assignment (??=) Operator in JavaScript

This is a new operator introduced by javascript. This operator is represented by x ??= y and it is called Logical nullish assignment operator. Only if the value of x is nullish then the value of y will be assigned to x that means if the value of x is null or undefined then the value of y will be assigned to x.

Let's discuss how this logical nullish assignment operator works. Firstly we all know that logical nullish assignment is represented as x ??= y, this is derived by two operators nullish coalescing operator and assignment operator we can also write it as x ?? (x = y). Now javascript checks the x first, if it is nullish then the value of y will be assigned to x.

Syntax :

x ??= y  // Means : x ?? (x = y)

Example 1 :

let x = 12;
let y = null;

let z = 13;

// The value of x will become 
// unchanged because x is not nullish.
x ??= z;

// The value of y will be 
// changed because y is nullish.
y ??= z;


console.log(x)    // 12
console.log(y)    // 13

Output :

12
13

Example 2 :

let x = {
  name : "Ram"
}

// The value of name will remain
// unchanged because x.name is not nullish
x.name ??= "Shyam";

// There is no any property named age in object x .
// So the value of x.age will be 
// undefined and undefined means nullish.
// that's why the value of age will be assigned.
x.age ??= 18;

console.log(x.name)  // Ram
console.log(x.age)   // 18

Output :

"Ram"
18

Example 3:

<h1>Hello Geeksforgeeks</h1>
<p id="print_arr"></p>

<script>
    let arr = [1, 2, "apple", null, undefined, []]
    
    // Replace each nullish values with "gfg"
    arr.forEach((item, index)=>{
      arr[index] ??= "gfg"
        })
    
        document.getElementById("print_arr")
    .innerText = arr.toString();
        //console.log(arr)
</script>

Output :

Supported browsers

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