The difference between ?? and ??= and ?. and || in JS

undefined and null are two special data types, you cannot use the dot operator to access properties, otherwise an error will be reported

 let a;console.log(a?.name); //undefinedconsole.log(a.name); //Error report

 let obj = {};console.log(obj.name); //undefinedconsole.log(obj?.name?.a); //undefinedconsole.log(obj.name.a); //Error

Difference between

?? and ||

Same point:
?? and || are used in the same way. They are all values ​​before and after, and the middle is connected by symbols. According to the previous value, it is judged whether to return the previous value or the latter.value of .
A ?? B
A || B

Differences:
The method of judgment is different:
When using ??, only when A is null or undefinedB will be returned;
When using ||, A will first be converted into a boolean value judgment, return A when true, false return B

// ??console.log(undefined ?? 2); // 2console.log(null ?? 2); // 2console.log(0 ?? 2); // 0console.log("" ?? 2); // ''console.log(true ?? 2); // trueconsole.log(false ?? 2); // false// ||console.log(undefined || 2); // 2console.log(null || 2); // 2console.log(0 || 2); // 2console.log("" || 2); // 2console.log(true || 2); // trueconsole.log(false || 2); // 2

Null Coalescing Operator ??

Only when the left side is null or undefined, the value on the right side will be returned

Optional chaining operator ?.

?. Allows reading the value of properties deep in the chain of connection objects without having to explicitly verify that each reference in the chain is valid.

The function of the

?. operator is similar to the . chain operator, except that the reference is null, i.e. null or undefined does not cause an error, the expression short-circuits the return value.

 const obj = { a: { b: [{ name: "obj" }] } };// original writingconsole.log(obj && obj.a && obj.a.b.length && obj.a.b[0].name); //obj// optional chainingconsole.log(obj?.a?.b?.[0]?.name); // objconsole.log(obj?.b?.c?.d); // undefined

?.Can be combined with the ?? operator

 const obj = { a: { name: "obj" } };console.log(obj?.a?.b ?? "hello world"); // hello world

Null assignment operator (??=)

When the value on the left of ??= is null or undefined, the value of the variable on the right will be assigned to the variable on the left. All other values ​​will not be assigned

 let a = "Hello";let b = null;let c = undefined;let d = 0;let e = "";let f = true;let g = false;console.log((b ??= a)); // helloconsole.log((c ??= a)); // helloconsole.log((d ??= a)); // 0console.log((e ??= a)); // ''console.log((f ??= a)); // trueconsole.log((g ??= a)); // falseconsole.log(b); // helloconsole.log(c); // helloconsole.log(d); // 0console.log(e); // ''console.log(f); // trueconsole.log(g); // false