@babel/plugin-transform-parameters

What is @babel/plugin-transform-parameters?

The @babel/plugin-transform-parameters package is a Babel plugin that transforms function parameter features, such as default parameters, destructured parameters, and rest parameters, into ES5-compatible syntax. This transformation allows developers to use modern JavaScript features while maintaining compatibility with older environments that may not support these newer syntaxes natively.

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

Default Parameters

Transforms functions with default parameters to check for `undefined` and assign a default value if necessary. This allows for cleaner function signatures and easier parameter handling.

function log(message = 'Default message') { console.log(message); }

Destructured Parameters

Enables the use of destructuring in function parameters, transforming it into a series of variable assignments for compatibility. This simplifies the extraction of properties from objects passed as function arguments.

function greet({ name, age }) { console.log(`Hello ${name}, you are ${age} years old.`); }

Rest Parameters

Transforms rest parameters into a standard ES5 arguments pattern, allowing functions to accept an indefinite number of arguments as an array.

function concatenate(separator, ...strings) { return strings.join(separator); }

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

@babel/plugin-transform-destructuring

Similar to the destructuring aspect of @babel/plugin-transform-parameters, this plugin transforms destructuring assignments and rest/spread properties to ES5. However, it focuses more broadly on destructuring patterns outside of function parameters as well.

@babel/plugin-transform-spread

This plugin transforms spread elements into a form that can be understood by environments without native support for this syntax. While it deals with the spread operator like the rest parameters feature of @babel/plugin-transform-parameters, it's applied in array literals and function calls rather than function parameters.

README

@babel/plugin-transform-parameters

Compile ES2015 default and rest parameters to ES5

This plugin transforms ES2015 parameters to ES5, this includes:

• Destructuring parameters
• Default parameters
• Rest parameters

Examples

In

function test(x = "hello", { a, b }, ...args) {
  console.log(x, a, b, args);
}

Out

function test() {
  var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "hello";
  var _ref = arguments[1];
  var a = _ref.a,
      b = _ref.b;

  for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
    args[_key - 2] = arguments[_key];
  }

  console.log(x, a, b, args);
}

Installation

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

Caveats

Default parameters desugar into let declarations to retain proper semantics. If this is not supported in your environment then you'll need the @babel/plugin-transform-block-scoping plugin.

Usage

Via .babelrc (Recommended)

.babelrc

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

Via CLI

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

Via Node API

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

Options

loose

boolean, defaults to false.

In loose mode, parameters with default values will be counted into the arity of the function. This is not spec behavior where these parameters do not add to function arity.

The loose implementation is a more performant solution as JavaScript engines will fully optimize a function that doesn't reference arguments. Please do your own benchmarking and determine if this option is the right fit for your application.

// Spec behavior
function bar1 (arg1 = 1) {}
bar1.length // 0

// Loose mode
function bar1 (arg1 = 1) {}
bar1.length // 1