background

Today was found by QA again: this page was fine yesterday, but today it is white, is there a problem with your code? Please check it out.

Take a look and find out why:

Otherwise, the pickup and Dropoff fields would have returned {}, but now the pickup field returns null, and we don’t defend against that.

list: openApiOrderInfo.pickup.address_list,
Copy the code

The result: the script has an error and the page is not available.

It’s easy to fix, either give a default value or use? .Build a layer of defense.

Change to try again, OK, the page is restored to normal.

That’s what we’re going to talk about, okay? .

Today’s highlights:

  • What is the optional chain operator (? .)
  • How do I enable this feature
  • The optional chain operator (? .(How does it work
  • HenyThe release of relevant information
  • conclusion

The body language

The optional chain operator (? .). That’s pretty familiar to you, so let me just recap a little bit.

What is the optional chain operator (? .)

The optional chain operator (? .). Allows the value of properties deep in the chain of connected objects to be read without explicitly verifying that each reference in the chain is valid.

For example, consider an object obj that has a nested structure. Without the optional chain, when looking for a deeply nested subproperty, you need to validate references between them, such as:

let nestedProp = obj.first && obj.first.second;
Copy the code

To avoid errors, ensure that obj.first is neither null nor undefined before accessing obj.first.second.

If obj.first.second is accessed directly without verifying obj.first, an error may be thrown.

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

letnestedProp = obj.first? .second;Copy the code

This is equivalent to the following expression, but does not actually create a temporary variable:

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

? The. Operator functions like the.chain operator, except that:

In the case of nullish (null or undefined) references that do not cause an error, the expression shorted returns the value undefined.

When used with a function call, undefined is returned if the given function does not exist.

When trying to access object properties that may not exist, using the optional chain operator will make the expression shorter and more concise.

We need to pay attention to two points:

  1. If there is an attribute name that is not a function, use? Still generates a TypeError exception (x.y is not a function).
letresult = someInterface.customMethod? . ();Copy the code

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

If you want to allow someInterface to be null or undefined as well, then you need to say someInterface like this, right? .customMethod? . ()

  1. Optional chainCannot be used for assignment
letobject = {}; object? .property =1; // Uncaught SyntaxError: Invalid left-hand side in assignment
Copy the code

How do I enable this feature

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

// babel config
{
 "plugins": [
    "@babel/plugin-proposal-optional-chaining" / / optional link chain
    "@babel/plugin-proposal-nullish-coalescing-operator"./ / double question mark]}Copy the code

The optional chain operator (? .(How does it work

const a = {
  b: 1
};

console.log(a? .b);Copy the code

Will be converted to:

const a = {
  b: 1
};

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

If the hierarchy is deeper, temporary variables are created to record:

const a = {
  b: {
    c: 1.d: 2,}};console.log(a? .b? .c)Copy the code

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
);
Copy the code

HenyThe release of relevant information

Heny, who is currently the director of The Babel project, has previously posted an article on the current Babel dilemma.

Link to the tweet above: twitter.com/left_pad/st…

If you’re interested, you can check it out.

conclusion

? It is very convenient to use, but if used badly, it can hide problems that should be exposed.

So make sure you know what you’re doing when you use it.

? And there’s a little brother called the null merge operator. , here do not say, go to MDN to see the document.

That’s all for today. I hope it inspires you.