babel/doc/usage/playground.md

layout	title	description	permalink	redirect_from
docs	Playground	How to use the playground.	/docs/usage/playground/	/playground.html

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 6to5 repository with your WIP spec, and we can discuss getting it implemented. Be sure to include as much information as possible.

Usage

$ 6to5 --playground

to5.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 var x = { x: undefined }; obj.x ?= 2;`` will still be undefined` because it's already been defined on the object.

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;

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;
  }
}

This shorthand

@foo

is equivalent to

this.foo