What is @babel/plugin-proposal-nullish-coalescing-operator?
The @babel/plugin-proposal-nullish-coalescing-operator package allows developers to use the nullish coalescing operator (??) in their JavaScript code. This operator is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand. This plugin transforms nullish coalescing operator syntax into equivalent JavaScript code that can be understood by JavaScript engines that do not support this feature natively.
What are @babel/plugin-proposal-nullish-coalescing-operator's main functionalities?
Nullish Coalescing for Default Values
Use the nullish coalescing operator to provide a default value for a variable that might be null or undefined. This is useful for handling API responses that might not return data.
const response = apiResponse ?? 'default value';
Combining with Logical OR for Fallbacks
Combine the nullish coalescing operator with the logical OR operator to provide a default value that is an object if both user settings and default settings are null or undefined. This showcases how nullish coalescing can be used in conjunction with other logical operators for more complex fallback mechanisms.
const settings = userSettings ?? defaultSettings || {};
Other packages similar to @babel/plugin-proposal-nullish-coalescing-operator
@babel/plugin-proposal-optional-chaining
Similar to the nullish coalescing operator, the optional chaining plugin (@babel/plugin-proposal-optional-chaining) allows developers to safely access deeply nested properties of an object without having to check for the existence of each level in the chain. While nullish coalescing provides a way to handle null or undefined values, optional chaining helps in accessing properties that might not exist. Both enhance code readability and safety.
lodash.get
The lodash.get function from the lodash library allows developers to access properties of an object safely, providing a default value if the property does not exist. While it serves a similar purpose in safely handling data that might be undefined or null, it does so in a different manner compared to the nullish coalescing operator, which is a language feature transformed by the @babel/plugin-proposal-nullish-coalescing-operator.
@babel/plugin-proposal-nullish-coalescing-operator
Replace ??
with an inline helper.
Example
In
var foo = object.foo ?? "default";
Out
var _object$foo;
var foo = (_object$foo = object.foo) !== null && _object$foo !== void 0 ? _object$foo : "default";
NOTE: We cannot use != null
here because document.all == null
and
document.all
has been deemed not "nullish".
Installation
npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator
Usage
Via .babelrc
(Recommended)
.babelrc
{
"plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}
Via CLI
babel --plugins @babel/plugin-proposal-nullish-coalescing-operator script.js
Via Node API
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-nullish-coalescing-operator"]
});
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
.
Example
In
var foo = object.foo ?? "default";
Out
var _object$foo;
var foo = (_object$foo = object.foo) != null ? _object$foo : "default";
References