Playground

Playground is a proving ground for language ideas.

Unofficial

These features are in no way endorsed by Ecma International and are not a part of any ECMAScript standard, nor are they necessarily on track to become part of any standard. Use with extreme caution.

Proposal Authors

If you are actively working on an ECMAScript proposal, this is a good place to get your ideas implemented with so that they may be tested with all of the latest language and API features.

Please feel free to open an issue on the babel repository with your WIP spec, and we can discuss getting it implemented. Be sure to include as much information as possible.

Usage

$ babel --playground

babel.transform("code", { playground: true });

Enables experimental

Enabling playground also enables experimental support.

Features

Memoization assignment operator

The memoization assignment operator allows you to lazily set an object property. It checks whether there's a property defined on the object and if there isn't then the right hand value is set.

This means that obj.x in the following case var obj = { x: undefined }; obj.x ?= 2; will still be undefined because it's already been defined within object obj.

Uses

var obj = {};
obj.x ?= 2;
obj.x; // 2

obj = { x: 1 };
obj.x ?= 2;
obj.x; // 1

obj = { x: undefined }
obj.x ?= 2;
obj.x; // undefined

Example

var obj = {};
obj.x ?= 2;

is equivalent to

var obj = {};
if (!Object.prototype.hasOwnProperty.call(obj, "x")) obj.x = 2;

Mallet assignment operator

The mallet assignment operator allows you to lazily initialize a value. It checks whether the value is falsey, if it is then the right hand value is set.

While simplistically equivalent to a = a || b, it will never set an already truthy value. It also optimizes deep object lookups and computed keys.

Uses

var a;
a ||= 2;
a; // 2

obj = { x: 1 };
obj.x ||= 2;
obj.x; // 1

obj = { x: undefined }
obj.x ||= 2;
obj.x; // 2

Example

var obj = { deep: {} };
obj.deep.x ||= 2;

is equivalent to

var obj = {};

var _o = obj.deep;
if (!_o.x) _o.x = 2;

Method binding

var fn = obj#method;
var fn = obj#method("foob");

is equivalent to

var fn = obj.method.bind(obj);
var fn = obj.method.bind(obj, "foob");

Method binding function shorthand

["foo", "bar"].map(#toUpperCase); // ["FOO", "BAR"]
[1.1234, 23.53245, 3].map(#toFixed(2)); // ["1.12", "23.53", "3.00"]

equivalent to

["foo", "bar"].map(function (val) { return val.toUpperCase(); });
[1.1234, 23.53245, 3].map(function (val) { return val.toFixed(2); });

Object getter memoization

var foo = {
  memo bar() {
    return complex();
  }
};

class Foo {
  memo bar() {
    return complex();
  }
}

is equivalent to

var foo = {
  get bar() {
    return Object.defineProperty(this, "bar", {
      value: complex(),
      enumerable: true,
      configurable: true,
      writable: true
    }).bar;
  }
};

class Foo {
  get bar() {
    return Object.defineProperty(this, "bar", {
      value: complex(),
      enumerable: true,
      configurable: true,
      writable: true
    }).bar;
  }
}