Optional chaining operator (?.) and null coalescing operator (??)

When I accidentally saw it from a friend, I checked it on Baidu. Maybe Baidu’s method was wrong and I didn’t see it. Later I found out that it was quite interesting. Let’s talk about each one one by one.

Optional chaining operator (?.)

official definition

The optional chain operator ( ?. ) allows reading the value of a property located deep in the chain of connected 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. The difference is that it will not cause an error when the reference is nullish (null or undefined). The short-circuit return value of this expression is undefined . When used with function calls, returns undefined if the given function does not exist.

usage

What we see most in official documents is simplified code and no errors thrown. So how to simplify and avoid throwing errors? The above may be a bit unreasonable, here is a simple version

  var obj = {
    
    
                name: 'mk',
                age: '12',
                adress: {
    
    
                    pro: 'hubei',
                    city: 'wuhan',
                }
            }
            // 我们正常写的话，为了避免报错需要先判断有没有obj,
        var lily = obj.adress && obj.adress.as; //'underfined'
        var ll = obj.adress && obj.adress.city; //'wuhan'

        //有了可选链操作符（?.），不需要先确定
        var mm = obj.adress ?.as; //'underfined'
        var ss = obj.adress ?.city; //'wuhan'
        // 等价于
        var tt = obj.adress;
        var ss = (tt == null || tt.city == null) ? 'underfined' : tt.city

The same applies to functions
** If there is an attribute name and it is not a function, use ?. It will still generate a TypeError exception (xy is not a function).** I saw
this in the official website but I still printed an error and I don’t know why.
If someInterface itself is null or undefined, the exception TypeError will still be thrown. someInterface is null If you want to allow someInterface to also be null or undefined, then you need to write someInterface?.customMethod?.() like this

let result = someInterface.customMethod?.(); //这一条报错
let result=someInterface?.customMethod?.(); //这一行在谷歌中依然报错

According to the official documentation, add ? after someInterface. Even if it is not defined, no error will be reported, but I reported an error, someInterface is not defined

Notice

cannot be used for assignment

let object = {
    
    };
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment(赋值时左边无效，本来有值的情况下也抛这个错误)

Null value coalescing operator (??)

definition

The null value coalescing operator (??) is a logical operator that returns the right operand when the left operand is null null or undefined, otherwise it returns the left operand.

use

It is different from or (||). For or (||), it is judged by a Boolean type value. When it encounters 0, '', etc., it will automatically be judged as false; but for the * null value merging operator (? ?) It will only react to null null or undefined and can be used as a default value

var a = '';
var b = null;
var c=a ?? '12'; //''
var d=b ?? '15';// 15
var e=a||'12'; //12
var f=b||'15'; //15

Of course, the two can also be used together to give a default value. When the right side is underfined or null, the default value after ?? is returned.

ending

The official website address is attached here. You can take a look for yourself. After all, the eldest brother is still the eldest brother.
Optional chain operator.
Null value merging operator.