What does js.? mean? The role of .?, .? (optional chaining operator)

The following is the official explanation from mdn:

The optional chaining operator ( ?.) allows reading the value of properties located 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  . that of the chained operator, except that instead of causing an error if the reference is nullish  ( null  or  undefined ), the expression short-circuits the return value  undefined. When used with a function call, returns if the given function does not exist  undefined.

The optional chaining operator will make expressions shorter and more concise when trying to access object properties that may not exist. The optional chaining operator is also helpful when exploring the contents of an object if you are not sure which properties must be present.

Before figuring out the optional chain operator , you must know that when js accesses the property of an object, if the property is null or undefined, it will not report an error, but if you continue to read the lower level of this property, it will report an error ,.? is used to solve this problem.

Previously done pocket checks:

let obj = {}
let nestedProp = obj.first || obj.first.second; 
// 这是一个简单的校验，保存 first 为 假 值时，不再访问second，以免出现不可预知的错误
let nestedProp = obj.first && obj.first.second;

Use .? (optional chaining operator)

let nestedProp = obj.first?.second; 
/*
   我给大家翻译一下这句话，obj.first是不是 null 或者 undefined 呀？
   不是的话我就读first下面的second去啦
   是的话我就返回 undefined 啦
*/
/*
    mdn的解释：
    通过使用 ?. 运算符取代 . 运算符，JavaScript 会在尝试访问 obj.first.second 之前
    先隐式地检查并确定 obj.first 既不是 null 也不是 undefined
    如果obj.first 是 null 或者 undefined
    表达式将会短路计算直接返回 undefined。
*/
// 这个验证等价于下面的这个表达式
let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
// 对函数的验证
let result = someInterface.customMethod?.();
/*
    如果有customMethod就执行，没有的话就返回undefined
    这里有一点要注意：如果存在一个属性名且不是函数，使用 ?. 仍然会产生一个 TypeError 异常
    正在动脑经的同学可能已经发现了，那要是someInterfaceu也是 null 或者 undefined呢？
    那么我们就可以写成下面这样

*/
let result = someInterface?.customMethod?.();
/*
    如果使用解构赋值来解构的一个对象的回调函数或 fetch 方法
    你可能得到不能当做函数直接调用的不存在的值
    除非你已经校验了他们的存在性
    使用?.的你可以忽略这些额外的校验：
*/ 
function doSomething(onContent, onError) {
  try {
    console.log('正确')
  }
  catch (err) {
    if (onError) { // 校验 onError 是否真的存在
      onError(err.message);
    }
  }
}

// 使用可选链进行函数调用
function doSomething(onContent, onError) {
  try {
   console.log('正确')
  }
  catch (err) { // 等于少了一个 if (onError) 的判断
    onError?.(err.message); // 如果 onError 是 undefined 也不会有异常
  }
}

Using .? (optional chaining operator) also works with 空值合并运算符（??)点击跳转

let customer = {
  name: "Carl",
  details: { age: 82 }
};
let customerCity = customer?.city ?? "值是unll或者undefined,所以我出现了";
console.log(customerCity); // “值是unll或者undefined,所以我出现了”