@babel/plugin-proposal-object-rest-spread

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.

README

@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); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

Spread Properties

let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }

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

• Proposal: Object Rest/Spread Properties for ECMAScript
• Spec
• Spread VS. Object.assign
• Assigning VS. defining properties