The page is blank? Look at the optional chain operator (?.)

background

I was found by QA again today: This page was fine yesterday, but it was blank today. Is there a problem with your code? Just take a look.

I went up and found the reason:

Originally pickup , dropoff two fields without data, it should return {} , the results are now pickup field returned null , and we value the time, the defense did not do this place.

list: openApiOrderInfo.pickup.address_list,

The result is: error and the page is not available.

The solution is also very simple, either give a default value , or use ?. as a layer of defense.

Try again after the modification, it is OK, and the page returns to normal.

Let’s ?.

Today’s main content:

• What is the optional chain operator ( ?. )
• How to enable this feature
• How does the optional chain operator ( ?.
• Some information released by Henry
• to sum up

Body language

The optional chain operator ( ?. ) is familiar to everyone, so I will briefly review it here.

What is the optional chain operator ( ?. )

The optional chain operator ( ?. ) allows to read the value of an attribute located deep in the chain of connected objects without having to explicitly verify that each reference in the chain is valid.

For example, consider an object obj that has a nested structure. If you don't use the optional chain, you need to verify the reference between when looking for a deeply nested sub-attribute, for example:

let nestedProp = obj.first && obj.first.second;

In order to avoid errors, before accessing obj.first.second, ensure that the value of obj.first is neither null nor undefined.

If you only directly access obj.first.second without checking obj.first, an error may be thrown.

With the optional chain operator (?.), before accessing obj.first.second, it is no longer necessary to explicitly verify the state of obj.first, and then use short-circuit calculation to obtain the final result:

let nestedProp = obj.first?.second;

This is equivalent to the following expression, but no temporary variables are actually created:

let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

?. operator is similar to the . chain operator, the difference is:

In the empty (nullish) (reference null or undefined case) is not cause an error, the return value is shorted expression: undefined .

When used with a function call, if the given function does not exist, it returns undefined .

When you try to access properties of an object that may not exist, the use of optional chain operator will make expression shorter and more concise.

There are two points we need to pay attention to:

1. If there is a property name and it is not a function, using ?. will still generate a TypeError exception (xy is not a function).

let result = someInterface.customMethod?.();

If someInterface itself is null or undefined, the exception TypeError will still be thrown.

If you want to allow someInterface to also be null or undefined , then you need to write someInterface?.customMethod?.()

1. Optional chain cannot be used for assignment

let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment

How to enable this feature

// install
npm install --save-dev @babel/plugin-proposal-optional-chaining

// babel config
{
 "plugins": [
    "@babel/plugin-proposal-optional-chaining" //可选链
    "@babel/plugin-proposal-nullish-coalescing-operator", //双问号
  ]
}

How does the optional chain operator ( ?.

const a = {
  b: 1
};

console.log(a?.b);

Will be converted to:

const a = {
  b: 1
};

console.log(a === null ? void 0 : a.b);

If the hierarchy is deeper, temporary variables will be created for recording:

const a = {
  b: {
    c: 1,
    d: 2,
  }
};

console.log(a?.b?.c)

Will be converted to:

var _a$b;

const a = {
  b: {
    c: 1,
    d: 2
  }
};
console.log(
  a === null || a === void 0
    ? void 0 
    : (_a$b = a.b) === null || _a$b === void 0
      ? void 0
      : _a$b.c
);

Some information released by Heny

Heny is currently the babel in charge of the 060a77d1b3276e project, and previously posted an article about the current dilemma of babel.

The tweet link above: https://twitter.com/left_pad/status/1136282005170262016

Those who are interested can go and have a look.

to sum up

?. is very convenient to use, but if it is not used properly, it will also hide problems that should have been exposed.

Therefore, you must be clear about what you are doing when using it.

?. also has a little brother called null merge operator (??), not to mention here, go to MDN to see the documentation.

That’s all for today, I hope to inspire everyone.