Home Original page

@babel/plugin-transform-optional-chaining · Babel

info

This plugin is included in @babel/preset-env, in ES2020

Example​

Accessing deeply nested properties​

JavaScript

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​

JavaScript

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​

JavaScript

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

Deleting deeply nested properties​

Added in: v7.8.0

JavaScript

const obj = {
  foo: {
    bar: {},
  },
};

const ret = delete obj?.foo?.bar?.baz; // true

Installation​

  • npm
  • Yarn
  • pnpm
  • Bun
npm install --save-dev @babel/plugin-transform-optional-chaining

Usage​

babel.config.json

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

Via CLI​

Shell

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

Via Node API​

JavaScript

require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-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 checks against both null and undefined.

caution

Consider migrating to the top level noDocumentAll assumption.

babel.config.json

{
  "assumptions": {
    "noDocumentAll": true
  }
}

Example​

In

Out (noDocumentAll === true)

JavaScript

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

Out (noDocumentAll === false)

JavaScript

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

tip

You can read more about configuring plugin options here

References​