Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Code samples #96

Merged
merged 14 commits into from
Feb 28, 2019
Merged

Code samples #96

Changes from 8 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
030db8b
example for bigint
hemanth Jan 17, 2019
bfe4c8f
example for Function.prototype.toString revision
hemanth Jan 17, 2019
11fe2a8
example for Private instance methods and accessors.
hemanth Jan 17, 2019
4b5614f
example for Array.prototype.{flat,flatMap}.
hemanth Jan 17, 2019
d1563c2
example for String.prototype.{trimStart,trimEnd}.
hemanth Jan 17, 2019
51a0bdd
example for String.prototype.matchAll
hemanth Jan 17, 2019
048e058
example for Symbol.prototype.description.
hemanth Jan 17, 2019
d0e74ba
example for Object.fromEntries.
hemanth Jan 17, 2019
9e03c99
example for static private methods and Static private fields.
hemanth Jan 19, 2019
deb8b78
example of Well-formed JSON.stringify.
hemanth Jan 19, 2019
092edbd
example for class fields.
hemanth Jan 19, 2019
711fd83
naming it iterableOfEntries instead.
hemanth Jan 20, 2019
a2884dc
fixed syntax error in flatMap.
hemanth Jan 20, 2019
8fed776
remove stage 4 proposals
codehag Feb 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 87 additions & 0 deletions _data/stage3.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@
tests:
- https://github.com/tc39/test262/issues/1163
specification: https://tc39.github.io/Function-prototype-toString-revision/
example: >
// String's parse must contains the same
// function body and parameter list as the original.

O.gOPD({ get a(){} }, "a").get // "function a(){}"

O.gOPD({ set a(b){} }, "a").set // "function a(b){}"
resources:
- https://github.com/tc39/Function-prototype-toString-revision

Expand Down Expand Up @@ -67,6 +74,14 @@
- Daniel Ehrenberg
tests:
- https://github.com/tc39/test262/issues/1056
example: >
const theBiggestInt = 9007199254740991n;

const alsoHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n

const hugeButString = BigInt('9007199254740991');
// ↪ 9007199254740991n
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For BigInt, I'd prefer we contrast the Number behavior with the BigInt behavior, and not include a use of the BigInt constructor on a Number (as that could lead people to use a buggy pattern with rounding).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @sarahgp

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, I'm not sure what you mean @littledan. I think showing how the constructor works with a Number literal is pretty necessary, in general, but if you mean just for the case of this example, we could definitely use something like this instead:

const x = Number.MAX_SAFE_INTEGER;
// ↪ 9007199254740991, this is 1 less than 2^53

const y = x + 1;
// ↪ 9007199254740992, ok, checks out

const z = x + 2
// ↪ 9007199254740992, wait, that’s the same as above!

const a = BigInt(Number.MAX_SAFE_INTEGER);
// ↪ 9007199254740991n, this is 1 less than 2^53, and also a BigInt

const b = a + 1n;
// ↪ 9007199254740992n, checks out, still a BigInt

const c = a + 2n
// ↪ 9007199254740993n, now that's what I want

Copy link
Member

@littledan littledan Jan 19, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In general, I am afraid that people could develop false expectations about how the BigInt constructor works, and try to use it with large number literals. I have already gotten a few "bug reports" about this. I am not sure how we could use code samples to avoid the issue; I am not an expert here.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I think this with maybe a final line showing it re-rounded? There is nothing bad about showing people how the BigInt constructor is used — not everyone is going to use literals, right?

To some extent, I think we are going to have to accept that people are going to make some mistakes as they get used to new functionality — and then it will become just a known fact about Javascript. To me that's as expected. But then, I also don't get "bug report"s.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I just want to emphasize the happy path. Do you see a reason why someone should use the BigInt constructor together with a Number literal? I was imagining that that was subsumed by BigInt literals, but maybe I am missing something.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could image using the BigInt constructor with a number literal if you were programmatically piping data into some calculations with known BigInts, where the literal wouldn't really work. E.g.

let nums = [4, 10, 17, 22] // pretend these come from some API you do not control
let bigFriend = 9007199254740992n

nums.map((n) => bigFriend + num) // would throw
nums.map((n) => bigFriend + BigInt(num)) // would not

resources:
- https://github.com/tc39/proposal-bigint

Expand All @@ -91,6 +106,32 @@
- Kevin Gibbons
tests:
- https://github.com/tc39/test262/issues/1343
example: >
class Counter extends HTMLElement {
#xValue = 0;

get #x() { return #xValue; }
set #x(value) {
this.#xValue = value;
window.requestAnimationFrame(this.#render.bind(this));
}

#clicked() {
this.#x++;
}

constructor() {
super();
this.onclick = this.#clicked.bind(this);
}

connectedCallback() { this.#render(); }

#render() {
this.textContent = this.#x.toString();
}
}
window.customElements.define('num-counter', Counter);
resources:
- https://github.com/tc39/proposal-private-methods

Expand All @@ -102,6 +143,10 @@
champions:
- Brian Terlson
- Michael Ficarra
example: >
[1, [2, [3]]].flat(Infinity); // [1,2,3]

[2, 3, 4].flatMap((x) => [x, x * 2]); // [[2, 4, 3, 6, 4, 8]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It’d probably be helpful to include a flatMap example that illustrates that it has a depth of 1

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This output looks good to me.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The output has a syntax error.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was fixed.

resources:
- https://github.com/tc39/proposal-flatMap

Expand Down Expand Up @@ -143,6 +188,10 @@
- Sebastian Markbåge
tests:
- https://github.com/tc39/test262/pull/1246
example: >
" Hey JS!".trimStart(); // "Hey JS!"

"Hey JS! ".trimEnd(); // "Hey JS!"
resources:
- https://tc39.github.io/proposal-string-left-right-trim/

Expand All @@ -155,6 +204,29 @@
tests:
- https://github.com/tc39/test262/pull/1500
- https://github.com/tc39/test262/pull/1587
example: >
var str = 'Hello world!!!';

var regexp = /(\w+)\W*/g;

console.log(str.matchAll(regexp));

/*
[
{
0: "Hello ",
1: "Hello"
index: 0,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These match objects now also contain a “groups” property (which is undefined if there’s no named captures)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also I’m not sure how to illustrate better that these are not objects, but arrays with string properties

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

//cc @sebmarkbage :-)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’m the champion of matchAll, and @mathiasbynens was the champion of named capture groups.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also I’m not sure how to illustrate better that these are not objects, but arrays with string properties

I’ve always done it this way, which matches the Node.js REPL:

…
[
	'DEADBEEF',
	index: 19,
	input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
]
…

The only downside is that it’s not valid JavaScript syntax.

input: "Hello world!!!"
},
{
0: "world!!!",
1: "world"
index: 6,
input: "Hello world!!!"
}
]
*/
resources:
- https://tc39.github.io/proposal-string-matchall/

Expand All @@ -166,6 +238,12 @@
- Michael Ficarra
tests:
- https://github.com/tc39/test262/pull/1590
example: >
const symbol = Symbol('TC39');

console.log(symbol.description); // 'TC39'

console.log(symbol.hasOwnProperty('description')); // false
resources:
- https://tc39.github.io/proposal-Symbol-description/

Expand All @@ -176,6 +254,15 @@
champions:
- Jordan Harband
- Kevin Gibbons
example: >
const entries = new Map([
Copy link
Member

@ljharb ljharb Jan 17, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think it might be a bit confusing to call a Map entries; it's certainly iterable for entries, but that's not exactly the same thing. maybe call it iterableOfEntries?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or, should we use [['cat', 'dog'], ['life', 42]]?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That could work too - but it's also nice to show that you can do it with a Map. Maybe both examples?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will just rename it to iterableOfEntries, too many examples could be confusing?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good.

['cat', 'dog'],
['life', 42]
]);

const obj = Object.fromEntries(entries);

console.log(obj); // { cat: "dog", life: 42 }
tests:
- https://github.com/tc39/test262/pull/1677
- https://github.com/tc39/test262/pull/1676
Expand Down