@babel/plugin-transform-optional-chaining
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
npm install --save-dev @babel/plugin-transform-optional-chaining
yarn add --dev @babel/plugin-transform-optional-chaining
pnpm add --save-dev @babel/plugin-transform-optional-chaining
Usage
With a configuration file (Recommended)
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
JavaScript
foo?.bar;
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