Use of js optional chaining operator

Preface

The optional chaining operator (?.) allows reading the value of a property located at the end of a chain without having to explicitly verify that each reference in the chain is valid. The difference is that if the reference is null or undefined, no error will occur and the short-circuit return value of the expression is undefined. When used with a function call, if the given function does not exist, undefined is returned.

The optional chaining operator makes expression roots 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, when you are unsure which properties must be present.

Optional Chaining Operator (?.)

grammar

obj?.prop
obj?.[expr]
func?.(args)

describe

The optional chaining operator provides a way to simplify accessing the value of a connected object when the reference or function passed through the connected object may be undefined or null.
For example, consider an object obj that has a nested structure. Without optional chaining, when looking up a deeply nested sub-property, you need to verify the references between them, for example:

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

To avoid errors, before accessing obj.first.second, make sure that the value of obj.first is neither null nor undefined. If you simply access obj.first.second without verifying obj.first, an error may be thrown.
With the optional chaining operator (?.), we no longer need to explicitly check the state of obj.first before accessing obj.first.second and then use short-circuit evaluation to get the final result:

let nestedProp = obj.first?.second

By using the ?. operator instead of the . operator, JavaScript implicitly checks to make sure obj.first is neither null nor undefined before trying to access obj.first.second. If obj.first is null or undefined, the expression will short-circuit the calculation and return undefined directly.

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

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

use

We can use chainable operators with the babel compiler.

babel

yarn add @babel/plugin-proposal-optional-chaining --dev

Add .babelrc file

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

Use in create-react-app

By default create-react-app does not allow modification of the babel configuration, here we need to install two additional modules to allow supplementation of the default configuration.

yarn add customize-cra react-app-rewired --dev

Add config-overrides.js file

const { useBabelRc, override } = require('customize-cra');
module.exports = override(useBabelRc());

Modify package.json

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom"
}

eslint

After installing the babel compiler, you can use the ?. operator. But if you use eslint, you need to install babel-eslint to recognize this new syntax.

yarn add babel-eslint --dev

Add .eslintrc file

{
  "parser": "babel-eslint",
  "rules": {
    "strict": 0
  }
}

Use in vscode

The js validator of vscode currently does not recognize the ?. operator, so there will be an error warning:

To resolve the error warning:

Install the vscode extension ESLint, search and install ESLint in the extension store.

Modify vscode configuration (.vscode/settings.json):

{
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "javascript.validate.enable": false, // Mainly this, turn off vscode's js validator "[javascript]": {
    "editor.formatOnSave": false,
  },
  "[javascriptreact]": {
  "editor.formatOnSave": false,
  },
}

Source: Optional Chaining Operator

This is the end of this article about the use of js optional chaining operator. For more relevant js optional chaining operator content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!