174 lines
3.2 KiB
Markdown
174 lines
3.2 KiB
Markdown
---
|
|
layout: docs
|
|
title: Playground
|
|
description: How to use the playground.
|
|
permalink: /docs/usage/playground/
|
|
redirect_from: /playground.html
|
|
---
|
|
|
|
> Playground is a proving ground for language ideas.
|
|
|
|
<blockquote class="to5-callout to5-callout-danger">
|
|
<h4>Unofficial</h4>
|
|
<p>
|
|
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. <strong><em>Use with extreme caution</em></strong>.
|
|
</p>
|
|
</blockquote>
|
|
|
|
<blockquote class="to5-callout to5-callout-info">
|
|
<h4>Proposal Authors</h4>
|
|
<p>
|
|
If you are actively working on an
|
|
<a href="https://github.com/tc39/ecma262">ECMAScript proposal</a>, 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.
|
|
</p>
|
|
<p>
|
|
Please feel free to <a href="https://github.com/6to5/6to5/issues/new">open
|
|
an issue</a> on the 6to5 repository with your WIP spec, and we can discuss
|
|
getting it implemented. Be sure to include as much information as possible.
|
|
</p>
|
|
</blockquote>
|
|
|
|
## Usage
|
|
|
|
```js
|
|
$ 6to5 --playground
|
|
```
|
|
|
|
```js
|
|
to5.transform('code', { playground: true });
|
|
```
|
|
|
|
<blockquote class="to5-callout to5-callout-info">
|
|
<h4>Enables experimental</h4>
|
|
<p>
|
|
Enabling playground also enables experimental support.
|
|
</p>
|
|
</blockquote>
|
|
|
|
## 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**
|
|
|
|
```js
|
|
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**
|
|
|
|
```js
|
|
var obj = {};
|
|
obj.x ?= 2;
|
|
```
|
|
|
|
is equivalent to
|
|
|
|
```js
|
|
var obj = {};
|
|
if (!Object.prototype.hasOwnProperty.call(obj, 'x')) obj.x = 2;
|
|
```
|
|
|
|
### Method binding
|
|
|
|
```javascript
|
|
var fn = obj#method;
|
|
var fn = obj#method("foob");
|
|
```
|
|
|
|
is equivalent to
|
|
|
|
```javascript
|
|
var fn = obj.method.bind(obj);
|
|
var fn = obj.method.bind(obj, "foob");
|
|
```
|
|
|
|
### Method binding function shorthand
|
|
|
|
```javascript
|
|
["foo", "bar"].map(#toUpperCase); // ["FOO", "BAR"]
|
|
[1.1234, 23.53245, 3].map(#toFixed(2)); // ["1.12", "23.53", "3.00"]
|
|
```
|
|
|
|
equivalent to
|
|
|
|
```javascript
|
|
["foo", "bar"].map(function (val) { return val.toUpperCase(); });
|
|
[1.1234, 23.53245, 3].map(function (val) { return val.toFixed(2); });
|
|
```
|
|
|
|
### Object getter memoization
|
|
|
|
```js
|
|
var foo = {
|
|
memo bar() {
|
|
return complex();
|
|
}
|
|
};
|
|
|
|
class Foo {
|
|
memo bar() {
|
|
return complex();
|
|
}
|
|
}
|
|
```
|
|
|
|
is equivalent to
|
|
|
|
```js
|
|
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
|
|
|
|
```js
|
|
@foo
|
|
```
|
|
|
|
is equivalent to
|
|
|
|
```
|
|
this.foo
|
|
```
|