Home Original page

@babel/plugin-transform-computed-properties · Babel

info

This plugin is included in @babel/preset-env

Example​

In

JavaScript

var obj = {
  ["x" + foo]: "heh",
  ["y" + bar]: "noo",
  foo: "foo",
  bar: "bar",
};

Out

JavaScript

var _obj;

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true,
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

var obj = ((_obj = {}),
_defineProperty(_obj, "x" + foo, "heh"),
_defineProperty(_obj, "y" + bar, "noo"),
_defineProperty(_obj, "foo", "foo"),
_defineProperty(_obj, "bar", "bar"),
_obj);

Installation​

  • npm
  • Yarn
  • pnpm
  • Bun
npm install --save-dev @babel/plugin-transform-computed-properties

Usage​

Without options:

babel.config.json

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

With options:

babel.config.json

{
  "plugins": [
    [
      "@babel/plugin-transform-computed-properties",
      {
        "loose": true
      }
    ]
  ]
}

Via CLI​

Shell

babel --plugins @babel/plugin-transform-computed-properties script.js

Via Node API​

JavaScript

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

Options​

loose​

boolean, defaults to false

Just like method assignment in classes, in loose mode, computed property names use simple assignments instead of being defined. This is unlikely to be an issue in production code.

babel.config.json

{
  "assumptions": {
    "setComputedProperties": true
  }
}

Example​

In

JavaScript

var obj = {
  ["x" + foo]: "heh",
  ["y" + bar]: "noo",
  foo: "foo",
  bar: "bar",
};

Out

When setComputedProperties is true.

JavaScript

var _obj;

var obj = ((_obj = {}),
(_obj["x" + foo] = "heh"),
(_obj["y" + bar] = "noo"),
(_obj.foo = "foo"),
(_obj.bar = "bar"),
_obj);

When setComputedProperties is false.

JavaScript

import _defineProperty from "@babel/runtime/helpers/defineProperty";

var _obj;

var obj = ((_obj = {}),
_defineProperty(_obj, "x" + foo, "heh"),
_defineProperty(_obj, "y" + bar, "noo"),
_defineProperty(_obj, "foo", "foo"),
_defineProperty(_obj, "bar", "bar"),
_obj);

tip

You can read more about configuring plugin options here