@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;
const safe = obj?.qux?.baz;
obj?.foo.bar?.baz;
Calling deeply nested functions
const obj = {
foo: {
bar: {
baz() {
return 42;
},
},
},
};
const baz = obj?.foo?.bar?.baz();
const safe = obj?.qux?.baz();
const safe2 = obj?.foo.bar.qux?.();
const willThrow = obj?.foo.bar.qux();
function test() {
return 42;
}
test?.();
exists?.();
Constructing deeply nested classes
const obj = {
foo: {
bar: {
baz: class {
},
},
},
};
const baz = new obj?.foo?.bar?.baz();
const safe = new obj?.qux?.baz();
const safe2 = new obj?.foo.bar.qux?.();
const willThrow = new obj?.foo.bar.qux();
class Test {
}
new Test?.();
new exists?.();
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 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