@babel/plugin-proposal-optional-chaining

Example

Accessing deeply nested properties

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};
const baz = obj?.foo?.bar?.baz; // 42
const safe = obj?.qux?.baz; // undefined
// Optional chaining and normal chaining can be intermixed
obj?.foo.bar?.baz; // Only access `foo` if `obj` exists, and `baz` if
                   // `bar` exists
// Example usage with bracket notation:
obj?.['foo']?.bar?.baz // 42

Calling deeply nested functions

const obj = {
  foo: {
    bar: {
      baz() {
        return 42;
      },
    },
  },
};
const baz = obj?.foo?.bar?.baz(); // 42
const safe = obj?.qux?.baz(); // undefined
const safe2 = obj?.foo.bar.qux?.(); // undefined
const willThrow = obj?.foo.bar.qux(); // Error: not a function
// Top function can be called directly, too.
function test() {
  return 42;
}
test?.(); // 42
exists?.(); // undefined

Constructing deeply nested classes

const obj = {
  foo: {
    bar: {
      baz: class {
      },
    },
  },
};
const baz = new obj?.foo?.bar?.baz(); // baz instance
const safe = new obj?.qux?.baz(); // undefined
const safe2 = new obj?.foo.bar.qux?.(); // undefined
const willThrow = new obj?.foo.bar.qux(); // Error: not a constructor
// Top classes can be called directly, too.
class Test {
}
new Test?.(); // test instance
new exists?.(); // undefined

Installation

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

Usage

Via .babelrc (Recommended)

.babelrc

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

Via CLI

babel --plugins @babel/plugin-proposal-optional-chaining script.js

Via Node API

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-proposal-optional-chaining"]
});

Options

loose

boolean, defaults to false.

When true, this transform will pretend document.all does not exist,and perform loose equality checks with null instead of strict equality checksagainst both null and undefined.

Example

In

foo?.bar;

Out (loose === true)

foo == null ? void 0 : foo.bar;

Out (loose === false)

foo === null || foo === void 0 ? void 0 : foo.bar;

You can read more about configuring plugin options here

References

• Proposal: Optional Chaining