@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

See our website @babel/plugin-transform-destructuring for more information.

Install

Using npm:

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

or using yarn:

yarn add @babel/plugin-transform-destructuring --dev

Changelog

v7.27.1 (2025-04-30)

:eyeglasses: Spec Compliance

• babel-parser
  • #17254 Allow using of as lexical declaration within for (@JLHwung)
  • #17230 Disallow get/set in TSPropertySignature (@JLHwung)
• babel-parser, babel-types
  • #17193 Stricter TSImportType options parsing (@JLHwung)

:bug: Bug Fix

• babel-plugin-proposal-destructuring-private, babel-plugin-proposal-do-expressions, babel-traverse
  • #17137 fix: do expressions should allow early exit (@kermanx)
• babel-helper-wrap-function, babel-plugin-transform-async-to-generator
  • #17251 Fix: propagate argument evaluation errors through async promise chain (@magic-akari)
• babel-helper-remap-async-to-generator, babel-plugin-transform-async-to-generator
  • #17231 fix apply()/call() annotated as pure (@Lacsw)
• babel-helper-fixtures, babel-parser
  • #17233 Create ChainExpression within TSInstantiationExpression (@JLHwung)
• babel-generator, babel-parser
  • #17226 Fill optional AST properties when both estree and typescript parser plugin are enabled (Part 2) (@JLHwung)
• babel-parser
  • #17224 Fill optional AST properties when both estree and typescript parser plugin are enabled (Part 1) (@JLHwung)
  • #17080 Fix start of TSParameterProperty (@JLHwung)
• babel-compat-data, babel-preset-env
  • #17228 Update firefox bugfix compat data (@JLHwung)
• babel-traverse
  • #17156 fix: Objects and arrays with multiple references should not be evaluated (@liuxingbaoyu)
• babel-generator
  • #17216 Fix: support const type parameter in generator (@JLHwung)

:nail_care: Polish

• babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-proposal-decorators, babel-plugin-transform-arrow-functions, babel-plugin-transform-class-properties, babel-plugin-transform-destructuring, babel-plugin-transform-object-rest-spread, babel-plugin-transform-optional-chaining, babel-plugin-transform-parameters, babel-traverse
  • #17221 Reduce generated names size for the 10th-11th (@nicolo-ribaudo)

:house: Internal

• babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
  • #17263 Remove unused regenerator-runtime dep in @babel/runtime (@nicolo-ribaudo)
• babel-compat-data, babel-preset-env
  • #17256 Tune plugin compat data (@JLHwung)
• babel-compat-data, babel-standalone
  • #17236 migrate babel-compat-data build script to mjs (@JLHwung)
• Other
  • #17232 Bump typescript-eslint to 8.29.1 (@JLHwung)
  • #17219 test: add basic typescript-eslint integration tests (@JLHwung)
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
• babel-register
  • #16844 Migrate @babel/register to cts (@liuxingbaoyu)
• babel-cli, babel-compat-data, babel-core, babel-generator, babel-helper-compilation-targets, babel-helper-fixtures, babel-helper-module-imports, babel-helper-module-transforms, babel-helper-plugin-test-runner, babel-helper-transform-fixture-test-runner, babel-helpers, babel-node, babel-parser, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-plugin-transform-modules-umd, babel-plugin-transform-react-display-name, babel-plugin-transform-regenerator, babel-plugin-transform-runtime, babel-plugin-transform-typeof-symbol, babel-plugin-transform-typescript, babel-preset-env, babel-register, babel-standalone, babel-types
  • #17207 Enforce node protocol import (@JLHwung)
• babel-plugin-transform-regenerator
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
• babel-helpers, babel-plugin-transform-async-generator-functions, babel-plugin-transform-regenerator, babel-preset-env, babel-runtime-corejs3
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
• babel-helpers, babel-plugin-transform-regenerator
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
• babel-helpers
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)

:microscope: Output optimization

• babel-helpers, babel-plugin-transform-modules-commonjs, babel-runtime-corejs3
  • #16538 Reduce interopRequireWildcard size (@liuxingbaoyu)
• babel-helpers, babel-plugin-transform-async-generator-functions, babel-plugin-transform-regenerator, babel-preset-env, babel-runtime-corejs3
  • #17213 Reduce regeneratorRuntime size (@liuxingbaoyu)