By Daniel Ehrenberg. Daniel presents the TC39, the committee working on evolving the JavaScript language standard. Because JavaScript is both programmed by a diverse set of people and deployed in diverse settings, it is essential that its development be governed in a way that is inclusive to these various requirements. We are not there yet, but the TC39 is working on it, and this can be seen in the development of various new language features that are coming to JavaScript. The TC39 needs your help in bringing JavaScript to the next level, and Daniel explains how you can get involved. (c) dotJS 2019 December 5-6, 2019 Paris, France https://www.dotjs.io/

1. @littledan
What TC39 is doing
and how you can help
Daniel Ehrenberg
Igalia, in partnership with Bloomberg
dotJS 2019

2. @littledan
About me
● Daniel Ehrenberg
● @littledan
● Live outside of Barcelona
● Work for Igalia
-- cooperative consultancy
● Mostly work on TC39

3. @littledan
Recap: TC39 stages

4. TC39 stages
● Stage 1: An idea under discussion
● Stage 2: We're doing this and have a first draft
● Stage 3: Basically final draft; ready to go
● Stage 4: 2+ implementations, tests ⇒ standard

5. @littledan
Stage 4 features
2+ implementations, tests ⇒ standard

6. @littledan
BigInt: Stage 4!

7. What is BigInt?
➔ New primitive numeric type to do arbitrary length computations.
◆ New literal: 9128192832918293812823821n
◆ Operator overloading:
● 9007199254740991n + 2n === 9007199254740993n
➔ 64-bits TypedArray (BigInt64Array and BigUInt64Array).
➔ Standard Library to support type casts:
◆ BigInt() and Number() Constructors
➔ No implicit conversion between numbers and BigInt.

8. const x = 2 ** 53;
⇒ x === 9007199254740992
const y = x + 1;
⇒ y === 9007199254740992

9. const x = 2n ** 53n;
⇒ x === 9007199254740992n
const y = x + 1n;
⇒ y === 9007199254740993n

10. const x = 2n ** 53n;
⇒ x === 9007199254740992n
const y = x + 1n;
⇒ y === 9007199254740993n
nstands for BigInt

11. @littledan
Dynamic import():
Stage 4
Domenic Denicola

12. @littledan

13. @littledan
Intl.RelativeTimeFormat:
Stage 4
Zibi Braniecki

14. Intl.RelativeTimeFormat
● Shipped in Chrome and Firefox
let rtf = new Intl.RelativeTimeFormat("en");
rtf.format(100, "day");
// "in 100 days"

15. @littledan
Optional chaining:
Stage 4
Daniel Rosenwasser
Claude Pache
Gabriel Isenberg
Dustin Savery

16. Optional
Property
Access
let x = foo?.bar;
// Equivalent to...
let x = (foo !== null && foo !== undefined) ?
foo.bar :
undefined;

17. @littledan
Nullish coalescing:
Stage 4
Daniel Rosenwasser
Gabriel Isenberg

18. Nullish
Coalescing
let x = foo() ?? bar();
// Equivalent to...
let tmp = foo();
let x = (tmp !== null && tmp !== undefined) ?
tmp :
bar();

19. @littledan
Stage 3 features
Basically final draft; ready to go

20. @littledan
WeakRefs:
Stage 3
Sathya Gunasekaran
Till Schneidereit
Mark Miller
Dean Tribble

21. Read consistency
const w = new WeakRef(someObject);
...
if (w.deref()) {
w.deref().foo(); // w.deref() here can not fail
}

22. @littledan
Private fields and
methods:
Stage 3

23. Why?
● Private methods encapsulate
behavior
● You can access private fields inside
private methods
class Counter extends HTMLElement {
#x = 0;
connectedCallback() {
this.#render();
}
#render() {
this.textContent =
this.#x.toString();
}
}

24. # is the new _
for strong encapsulation

25. class PrivateCounter {
#x = 0;
}
let p = new PrivateCounter();
console.log(p.#x); // SyntaxError
class PublicCounter {
_x = 0;
}
let c = new PublicCounter();
console.log(c._x); // 0
Stage 3

26. @littledan
Stage 2 features
We're doing this and have a first draft

27. @littledan
Decorators: Stage 2
Yehuda Katz
Ron Buckton

28. // Salesforce abstraction
import { api } from '@salesforce';
class InputAddress extends HTMLElement {
@api address = '';
}
Using decorators to track mutations and rehydrate
a web component when needed.
Syntax abstraction for attrs/props in Web Components
// Polymer abstraction
class XCustom extends PolymerElement {
@property({ type: String, reflect: true
})
address = '';
}
Example of using decorators to improve ergonomics.

29. @littledan
Temporal: Stage 2
Maggie Pint
Philipp Dunkel

30. @littledan
Stage 1 features
An idea under discussion

31. @littledan
Pipeline operator: Stage 1
Gilbert Garza
J.S. Choi
James DiGioia

32. library.js
export function doubleSay(str) {
return str + ", " + str;
}
export function capitalize(str) {
return str[0].toUpperCase() +
str.substring(1);
}
export function exclaim(str) {
return str + "!";
}
with-pipeline.js
import { doubleSay, capitalize, exclaim }
from "./library.js";
let result = "hello"
|> doubleSay
|> capitalize
|> exclaim;
// ===> "Hello, hello!"
ordinary.js
import { doubleSay, capitalize, exclaim }
from "./library.js";
let result =
exclaim(capitalize(doubleSay("hello")));
// ===> "Hello, hello!"

33. @littledan
Records and Tuples:
Stage 1
Robin Ricard
Richard Button

34. const marketData = #[
#{ ticker: "AAPL", lastPrice: 195.855 },
#{ ticker: "SPY", lastPrice: 286.53 },
];

35. @littledan
Operator overloading:
Stage 1

36. Vector overloading: Usage
// Usage example
import { Vector } from "./vector.mjs";
with operators from Vector;
new Vector([1, 2, 3]) + new Vector([4, 5, 6]) // ==> new Vector([5, 7, 9])
3 * new Vector([1, 2, 3]) // ==> new Vector([3, 6, 9])
new Vector([1, 2, 3]) == new Vector([1, 2, 3]) // ==> true
(new Vector([1, 2, 3]))[1] // ==> 2

37. @littledan
Stage 0 features
Not even really at a stage!

38. @littledan
BigDecimal: Stage 0
Andrew Paprocki

39. “Why are Numbers
broken in JS?”

40. Problem and solution (?)
// Number (binary 64-bit floating point)
js> 0.1 + 0.2
=> 0.30000000000000004
// BigDecimal (???)
js> 0.1d + 0.2d
=> 0.3d

41. Transparency, diversity and
inclusion in TC39

42. We have not been great in the past
Old process:
● Specification: Big MS Word doc
● Communication: Meetings and es-discuss list
● Committee not nearly as diverse as JS programmers
● First-principles theorizing pushing out experience

46. Invited experts

53. @littledan
Cultural evolution: The hardest part
● Newer values:
○ Accessibility to newer programmers
○ Integration into the existing JavaScript ecosystem
○ Incremental prototyping and iteration
○ Practicality over perfection (?)
● How to make tradeoffs?
Integrate with other value systems?
○ To be continued...

54. @littledan
Help wanted!
Any/all of the following appreciated

55. @littledan
Refine proposals in
GitHub issues

57. @littledan
Write test262
conformance tests

59. @littledan
Implement tooling,
e.g., Babel, or
JS engines, e.g.,
browsers

61. @littledan
Prototype them in
your code and tell us
how it went

62. @littledan
Write documentation
and educational
materials

64. @littledan
Join Ecma and attend
TC39 meetings

65. @littledan
Conclusion
● Lots of things coming to JavaScript
● Stage process clarifies progress
● We could use your help!
● We are working on making a
friendly, open environment
● Daniel Ehrenberg
● @littledan
● https://tc39.es

66. @littledan
What really matters: Human and ecological needs
● The climate emergency:
Power structures are destroying the world
● Inclusive, collective action to save us!

67. @littledan
What really matters: Human and ecological needs
● The climate emergency:
Power structures are destroying the world
● Inclusive, collective action to save us!
like TC39 and free software are trying to build (???)

68. @littledan
What really matters: Human and ecological needs
● Let's solve important problems together
● JS is fun!