@babel/plugin-transform-destructuring

What is @babel/plugin-transform-destructuring?

The @babel/plugin-transform-destructuring npm package is a plugin for Babel, a JavaScript compiler, that enables the transformation of destructuring assignments and rest properties in JavaScript code. This allows for more concise and readable code, especially when dealing with objects or arrays. The plugin is part of the larger Babel ecosystem, which helps developers write next-gen JavaScript today.

What are @babel/plugin-transform-destructuring's main functionalities?

Object Destructuring

Transforms object destructuring syntax into a format that can be understood by environments that do not support ES2015 or later. This feature allows for extracting properties from objects and assigning them to variables in a single statement.

const { a, b } = { a: 1, b: 2 };

Array Destructuring

Enables transformation of array destructuring, which allows for a similar concise syntax for arrays as for objects, extracting values from arrays directly into variables.

const [a, b] = [1, 2];

Nested Destructuring

Supports nested destructuring, which is useful for extracting deeply nested properties or values from objects or arrays into variables at various levels of depth.

const { a: { b, c } } = { a: { b: 1, c: 2 } };

Default Values

Allows for setting default values in destructuring assignments, which is particularly useful when the expected property might not exist in the source object or array.

const { a = 10, b = 5 } = { a: 3 };

Other packages similar to @babel/plugin-transform-destructuring

babel-plugin-transform-es2015-destructuring

This package offers similar functionality to @babel/plugin-transform-destructuring but is specifically targeted at transforming ES2015 destructuring syntax. It's part of the older Babel 6 ecosystem and has been superseded by the more general @babel/plugin-transform-destructuring in Babel 7.

babel-preset-env

While not a direct equivalent, babel-preset-env includes @babel/plugin-transform-destructuring among many other plugins. It automatically determines the Babel plugins and polyfills you need based on your supported environments. It's a more comprehensive solution for writing next-gen JavaScript.

README

@babel/plugin-transform-destructuring

Compile ES2015 destructuring to ES5

Examples

In

let {x, y} = obj;

let [a, b, ...rest] = arr;

Out

function _toArray(arr) { ... }

let _obj = obj,
    x = _obj.x,
    y = _obj.y;

let _arr = arr,
    _arr2 = _toArray(_arr),
    a = _arr2[0],
    b = _arr2[1],
    rest = _arr2.slice(2);

Installation

npm install --save-dev @babel/plugin-transform-destructuring

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["@babel/plugin-transform-destructuring"]
}

Via CLI

babel --plugins @babel/plugin-transform-destructuring script.js

Via Node API

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-transform-destructuring"]
});

Options

loose

boolean, defaults to false.

Enabling this option will assume that what you want to destructure is an array and won't use Array.from on other iterables.

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-transform-destructuring", { "useBuiltIns": true }]
  ]
}

In

var { ...x } = z;

Out

var _z = z,
    x = Object.assign({}, _z);

References

• MDN: Destructuring assignment