1, Null merge operator (?)

The null value merge operator (?) is a logical operator. When the operand on the left is null or undefined, it returns the operand on the right. Otherwise, it returns the operand on the left. The null merge operator (?) is different from the logical or operator (|), which returns the right operand when the left operand is false.

const nullValue = null;
const emptyText = ""; // Empty string, a false value, Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA Default value for";
const valB = emptyText ?? "valB Default value for";
const valC = someNumber ?? 0;

console.log(valA); // "Default value for valA"
console.log(valB); // "" (although the empty string is false, it is not null or undefined)
console.log(valC); // 42

contrast

You may not understand the above, so please look at the below

//   ||Operator

function(obj){
    var a = obj || {}
}
 
Equivalent to
function(obj){
    var a;
    if(obj === 0 || obj === "" || obj === false || obj === null || obj === undefined){
 	a = {}
    } else {
	a = obj;
    }
}

//  ?? operator

function(obj){
    var a = obj ?? {}
}
 
Equivalent to
function(obj){
    var a;
    if( obj === null || obj === undefined){
 	a = {}
     } else {
	a = obj;
    }
}

2, Optional chain operator (?.)

The optional chain operator (?.) allows you to read the value of an attribute deep in the chain of connected objects without explicitly verifying that each reference in the chain is valid. The function of the (?.) operator is similar to that of the (.) chain operator. The difference is that no error will be caused when the reference is null (null or undefined). The return value of the expression is undefined. When used with a function call, undefined is returned if the given function does not exist.

The optional chain operator makes the expression shorter and more concise when trying to access object properties that may not exist. When exploring the content of an object, if you are not sure which attributes must exist, the optional chain operator is also very helpful.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

a?.b
// Equivalent to
a == null ? undefined : a.b
a?.[x]
// Equivalent to
a == null ? undefined : a[x]
a?.b()
// Equivalent to
a == null ? undefined : a.b()
a?.()
// Equivalent to
a == null ? undefined : a()

3, What= Null assignment operator

When you think this is over, ES2022 brings us= The assignment operator symbol is similar to the | = operator, and the assignment conditions are different from those above.

??= The full English name of the operator logical null assignment is translated into logical null assignment in Chinese.

Logical null assignment operator   (x? = y) only in   x   yes   null   or   It is assigned when undefined.

let a = 0;
a ??= 1;
console.log(a); // 0

let b = null;
b ??= 1;
console.log(b); // 1

4, ?: ternary operator

Match pattern without getting matching result

?: Also called conditional operator, it accepts three operands: condition?   Expression to execute when condition is true: expression to execute when condition is false. Actual effect:

Example 1:
function checkCharge(charge) {
    return (charge > 0) ? 'available' : 'Recharge required' 
}
console.log(checkCharge(20)) // =>Available
console.log(checkCharge(0)) // =>Recharge required


Example 2:
var str = 'aaabbb'
var reg = /(a+)(?:b+)/
str.match(reg)

// ["aaabbb", "aaa", index: 0, input: "aaabbb", groups: undefined]