@babel/plugin-proposal-optional-chaining

What is @babel/plugin-proposal-optional-chaining?

The @babel/plugin-proposal-optional-chaining package is a Babel plugin that allows developers to use the optional chaining syntax in JavaScript. Optional chaining enables developers to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.

What are @babel/plugin-proposal-optional-chaining's main functionalities?

Optional Property Access

Safely access a property on an object. If 'obj' is null or undefined, 'value' will be undefined instead of throwing an error.

const value = obj?.prop;

Optional Method Calls

Safely call a method on an object. If 'obj' or 'obj.method' is null or undefined, 'result' will be undefined instead of throwing an error.

const result = obj?.method?.();

Optional Element Access

Safely access an array element. If 'arr' is null or undefined, 'item' will be undefined instead of throwing an error.

const item = arr?.[index];

Other packages similar to @babel/plugin-proposal-optional-chaining

es5-dot-prop

This package allows safe property access on objects but does not use the optional chaining syntax. It's a utility function rather than a Babel plugin and requires manual function calls.

lodash.get

Lodash provides a 'get' function that allows safe access to object properties. It's similar in purpose to optional chaining but uses a different syntax and is a part of the larger Lodash utility library.

README

@babel/plugin-proposal-optional-chaining

The Optional Chaining Operator allows you to handle properties of deeply nested objects without worrying about undefined intermediate objects.

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

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/proposal-optional-chaining"]
}

Via CLI

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

Via Node API

require("@babel/core").transform("code", {
  plugins: ["@babel/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 string equality checks against 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;

References

• Proposal: Optional Chaining