What is @babel/plugin-proposal-object-rest-spread?
The @babel/plugin-proposal-object-rest-spread package allows developers to use the object rest and spread properties syntax in their JavaScript code. This syntax is part of the ECMAScript proposal and enables more concise and readable code when copying properties from one object to another or collecting the remaining properties of an object after certain properties have been extracted.
What are @babel/plugin-proposal-object-rest-spread's main functionalities?
Object Spread
Allows an object's own enumerable properties to be copied into a new object. This is useful for creating a new object with the same properties as an existing object or for combining multiple objects.
{ ...source }
Object Rest
Enables extracting properties from objects and binding the remaining properties to a new object. This is useful for omitting certain properties from an object and keeping the rest.
const { a, b, ...rest } = source;
Other packages similar to @babel/plugin-proposal-object-rest-spread
object-assign
A polyfill for Object.assign which is a method used to copy the values of all enumerable own properties from one or more source objects to a target object. It is similar to the spread operator but does not allow for rest properties and is not a Babel plugin.
deepmerge
A library for deep (recursive) merging of objects. It is similar to object spread in that it allows for combining objects, but it goes deeper, merging nested objects as well, which is not something object spread syntax does by default.
lodash.merge
Part of the Lodash library, this function is used for a deep merge of own and inherited enumerable properties of source objects into the destination object. It's more powerful than the spread operator in terms of deep merging capabilities.
extend
A port of the classic jQuery.extend() method to Node.js. It can be used to copy properties from one or more source objects to a target object, similar to the spread operator, but it is not specifically a Babel plugin and does not handle the rest properties syntax.
@babel/plugin-proposal-object-rest-spread
This plugin allows Babel to transform rest properties for object destructuring assignment and spread properties for object literals.
Example
Rest Properties
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x);
console.log(y);
console.log(z);
Spread Properties
let n = { x, y, ...z };
console.log(n);
Installation
npm install --save-dev @babel/plugin-proposal-object-rest-spread
Usage
Via .babelrc
(Recommended)
.babelrc
{
"plugins": ["@babel/plugin-proposal-object-rest-spread"]
}
Via CLI
babel --plugins @babel/plugin-proposal-object-rest-spread script.js
Via Node API
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-object-rest-spread"]
});
Options
By default, this plugin will produce spec compliant code by using Babel's objectSpread
helper.
loose
boolean
, defaults to false
.
Enabling this option will use Babel's extends
helper, which is basically the same as Object.assign
(see useBuiltIns
below to use it directly).
:warning: Please keep in mind that even if they're almost equivalent, there's an important difference between spread and Object.assign
: spread defines new properties, while Object.assign()
sets them, so using this mode might produce unexpected results in some cases.
For detailed information please check out Spread VS. Object.assign and Assigning VS. defining properties.
useBuiltIns
boolean
, defaults to false
.
Enabling this option will use Object.assign
directly instead of the Babel's extends
helper.
Example
.babelrc
{
"plugins": [
["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": true }]
]
}
In
z = { x, ...y };
Out
z = Object.assign({ x }, y);
References