..What's coming next to..
JavaScript?
About me
NICOLÒ RIBAUDO
● Working at Igalia on web standards
● TC39 delegate
● Maintaining Babel, the JavaScript compiler
.What are standard.
.bodies and TC39 ?.
1
Where does 🧀 go?
They’re venues for
unification & uniformization
● WHATWG
● W3C
● IETF
● ECMA
● Unicode
● …
TC39 is the
Technical Committee
that defines the
ECMAScript language
"JavaScript"?
Delegates
● Implementers (Apple, Google, Mozilla, …)
● Companies using JS (Sony, Bloomberg, …)
● Universities and NPF (OpenJS F, …)
Invited Experts
● Subject matter experts
● Community representatives
Contributors, Editors, Reviewers & Community
Who participates?
How does
TC39 work?
2
Consensus-based decisions
People with wide range of backgrounds
Implementers, Practitioners, Community Experts, Academics
Objections and concerns to satisfy everyone
No stakeholder has more power than others, concerns must be rational
"Don't break
the web"
Where
Where
When
6 Plenary Meetings a year
Online or In person
Focus Groups and Incubator
Calls
Monthly or Biweekly
TG2 / Editors / Outreach /
Proposals / Educators / Tools
Monthly or Biweekly
The Process
3 Stage-by-stage
STAGE 1
Study a common problem in the JS
ecosystem and explore potential solutions
Exploration
��
Devote time and have a “Champion”
Research existing libraries and other languages
Explore possible solutions to the problem
STAGE 2 Draft ��
Propose a concrete solution with a good
level of detail
Initial specification
Refine minor details
TC39 Expects the feature to keep being developed
STAGE 2.7 Candidate ��
Approved in principle but still needs
comprehensive tests to be implementable
New!
There is a complete detailed specification
The proposal has been reviewed by other delegates and
spec editors
test262.fyi
Test262(Github)
STAGE 3 Recommended for
implementation ��
Implementation and validation phase
(implementation complexity, web-compatibility)
The proposal is complete and can be started being
implemented
Can still change if the proposal design causes significant
implementation problems
Some implementation will ship enabled by default!
STAGE 4 Finished ��
About to be include in the upcoming edition
of ECMAScript®
At least two implementations are shipping the proposal
enabled by default
Significant real-world usage experience
Will be included in the next ECMAScript release, e.g. ES2025
New ES2024 &
ES2025 features
4
ES2024
Unicode-related utilities
❏ String.prototype.isWellFormed and toWellFormed
❏ /v flag for regular expressions
"😊" === "u{D83D}u{DE0A}"
"Hi u{D83D}u{DE0A}!".isWellFormed(); // true
"Hi u{D83D}!".isWellFormed(); // false
UTF-16 surrogates
/^p{RGI_Emoji}$/v.test(" "); // true
"Property of strings"
This is "👨u{200D}👨u{200D}👧u{200D}
👦"
/[p{ASCII}--[0-9]]/v; "An ASCII character, but not from 0 to 9"
Unicode-related utilities
❏ String.prototype.isWellFormed and toWellFormed
❏ /v flag for regular expressions
ES2024
Raw memory and multi-threading
❏ Atomics.waitAsync
❏ Resizable and growable (Shared)ArrayBuffers
❏ ArrayBuffer transfer
ES2024
Other convenience methods
❏ Object.groupBy and Map.groupBy
❏ Promise.withResolvers
Object.groupBy([
{ name: 'Nicolò', country: 'Italy' },
{ name: 'Attila', country: 'Germany' },
{ name: 'Tejas', country: 'Germany '},
], obj => obj.country);
{
'Italy': [
{ name: 'Nicolò', country: 'Italy' } ],
'Germany': [
{ name: 'Attila', country: 'Germany' },
{ name: 'Tejas', country: 'Germany' },
],
}
ES2024
Other convenience methods
❏ Object.groupBy and Map.groupBy
❏ Promise.withResolvers
ES2025 sneak peek
❏ New Set methods
new Set([1, 2, 3])
.intersection(
new Set([1, 3, 5])
)
Set { 1, 3 }
.intersection(..)
.union(..)
.difference(..)
.symmetricDifference(..)
.isSubsetOf(..)
.isSupersetOf(..)
.isDisjointFrom(..)
ES2024
Other convenience methods
❏ Object.groupBy and Map.groupBy
❏ Promise.withResolvers
ES2025 sneak peek
❏ New Set methods
What's
coming next?
5
STAGE 3 .Import attributes & JSON imports.
// file.json
{ "foo": 3 }
// main.js
import obj from "./file.json" with { type: "json" }
console.log(obj.foo); // 3
An old version of the proposal used
the assert keyword
⚠
STAGE 3 .Temporal.
const departure = Temporal.ZonedDateTime.from(
'2024-06-28T11:55:00+08:00[Asia/Hong_Kong]');
const flightTime = Temporal.Duration.from({ minutes: 775 });
const arrival = departure.add(flightTime)
.withTimeZone('Europe/Budapest');
arrival.toString();
// 2024-06-28T18:50:00+02:00[Europe/Budapest]
STAGE 2 .Module declarations.
module utils {
export const add = (x, y) => x + y;
}
module entrypoint {
import { add } from utils;
}
import entrypoint;
Support multiple ES modules
per file, providing a better
bundling primitive
STAGE 1 .Decimal.
"JavaScript numbers are broken!" 0.1 + 0.2 !== 0.3
let z1 = new Decimal(0.1);
let z2 = new Decimal(0.2);
let z3 = new Decimal(0.3);
z1.add(z2).equals(z3) // true
STAGE 1 .Intl.MessageFormat.
.match {$count :number}
0 {{You have no new notifications}}
one {{You have {$count} new notification}}
* {{You have {$count} new notifications}}
const mf = new Intl.MessageFormat('en', message);
const notifications = mf.format({ count: 1 });
// 'You have 1 new notification'
Collaboration & Help
Get involved !!!
6
Write test262 conformance tests
Refine proposals in GitHub issues
Write documentation and educational materials
Provide feedback on GitHub
��
��
��
��
Thank you! 🙏

What's Coming Next to JavaScript

  • 1.
    ..What's coming nextto.. JavaScript?
  • 2.
    About me NICOLÒ RIBAUDO ●Working at Igalia on web standards ● TC39 delegate ● Maintaining Babel, the JavaScript compiler
  • 3.
  • 4.
  • 5.
    They’re venues for unification& uniformization ● WHATWG ● W3C ● IETF ● ECMA ● Unicode ● …
  • 6.
    TC39 is the TechnicalCommittee that defines the ECMAScript language "JavaScript"?
  • 7.
    Delegates ● Implementers (Apple,Google, Mozilla, …) ● Companies using JS (Sony, Bloomberg, …) ● Universities and NPF (OpenJS F, …) Invited Experts ● Subject matter experts ● Community representatives Contributors, Editors, Reviewers & Community Who participates?
  • 8.
  • 9.
    Consensus-based decisions People withwide range of backgrounds Implementers, Practitioners, Community Experts, Academics Objections and concerns to satisfy everyone No stakeholder has more power than others, concerns must be rational
  • 10.
  • 11.
  • 12.
  • 13.
    When 6 Plenary Meetingsa year Online or In person Focus Groups and Incubator Calls Monthly or Biweekly TG2 / Editors / Outreach / Proposals / Educators / Tools Monthly or Biweekly
  • 14.
  • 15.
    STAGE 1 Study acommon problem in the JS ecosystem and explore potential solutions Exploration �� Devote time and have a “Champion” Research existing libraries and other languages Explore possible solutions to the problem
  • 16.
    STAGE 2 Draft�� Propose a concrete solution with a good level of detail Initial specification Refine minor details TC39 Expects the feature to keep being developed
  • 17.
    STAGE 2.7 Candidate�� Approved in principle but still needs comprehensive tests to be implementable New! There is a complete detailed specification The proposal has been reviewed by other delegates and spec editors
  • 18.
  • 19.
    STAGE 3 Recommendedfor implementation �� Implementation and validation phase (implementation complexity, web-compatibility) The proposal is complete and can be started being implemented Can still change if the proposal design causes significant implementation problems Some implementation will ship enabled by default!
  • 20.
    STAGE 4 Finished�� About to be include in the upcoming edition of ECMAScript® At least two implementations are shipping the proposal enabled by default Significant real-world usage experience Will be included in the next ECMAScript release, e.g. ES2025
  • 21.
  • 22.
    ES2024 Unicode-related utilities ❏ String.prototype.isWellFormedand toWellFormed ❏ /v flag for regular expressions
  • 23.
    "😊" === "u{D83D}u{DE0A}" "Hiu{D83D}u{DE0A}!".isWellFormed(); // true "Hi u{D83D}!".isWellFormed(); // false UTF-16 surrogates /^p{RGI_Emoji}$/v.test(" "); // true "Property of strings" This is "👨u{200D}👨u{200D}👧u{200D} 👦" /[p{ASCII}--[0-9]]/v; "An ASCII character, but not from 0 to 9"
  • 24.
    Unicode-related utilities ❏ String.prototype.isWellFormedand toWellFormed ❏ /v flag for regular expressions ES2024 Raw memory and multi-threading ❏ Atomics.waitAsync ❏ Resizable and growable (Shared)ArrayBuffers ❏ ArrayBuffer transfer
  • 25.
    ES2024 Other convenience methods ❏Object.groupBy and Map.groupBy ❏ Promise.withResolvers
  • 26.
    Object.groupBy([ { name: 'Nicolò',country: 'Italy' }, { name: 'Attila', country: 'Germany' }, { name: 'Tejas', country: 'Germany '}, ], obj => obj.country); { 'Italy': [ { name: 'Nicolò', country: 'Italy' } ], 'Germany': [ { name: 'Attila', country: 'Germany' }, { name: 'Tejas', country: 'Germany' }, ], }
  • 27.
    ES2024 Other convenience methods ❏Object.groupBy and Map.groupBy ❏ Promise.withResolvers ES2025 sneak peek ❏ New Set methods
  • 28.
    new Set([1, 2,3]) .intersection( new Set([1, 3, 5]) ) Set { 1, 3 } .intersection(..) .union(..) .difference(..) .symmetricDifference(..) .isSubsetOf(..) .isSupersetOf(..) .isDisjointFrom(..)
  • 29.
    ES2024 Other convenience methods ❏Object.groupBy and Map.groupBy ❏ Promise.withResolvers ES2025 sneak peek ❏ New Set methods
  • 30.
  • 31.
    STAGE 3 .Importattributes & JSON imports. // file.json { "foo": 3 } // main.js import obj from "./file.json" with { type: "json" } console.log(obj.foo); // 3 An old version of the proposal used the assert keyword ⚠
  • 32.
    STAGE 3 .Temporal. constdeparture = Temporal.ZonedDateTime.from( '2024-06-28T11:55:00+08:00[Asia/Hong_Kong]'); const flightTime = Temporal.Duration.from({ minutes: 775 }); const arrival = departure.add(flightTime) .withTimeZone('Europe/Budapest'); arrival.toString(); // 2024-06-28T18:50:00+02:00[Europe/Budapest]
  • 33.
    STAGE 2 .Moduledeclarations. module utils { export const add = (x, y) => x + y; } module entrypoint { import { add } from utils; } import entrypoint; Support multiple ES modules per file, providing a better bundling primitive
  • 34.
    STAGE 1 .Decimal. "JavaScriptnumbers are broken!" 0.1 + 0.2 !== 0.3 let z1 = new Decimal(0.1); let z2 = new Decimal(0.2); let z3 = new Decimal(0.3); z1.add(z2).equals(z3) // true
  • 35.
    STAGE 1 .Intl.MessageFormat. .match{$count :number} 0 {{You have no new notifications}} one {{You have {$count} new notification}} * {{You have {$count} new notifications}} const mf = new Intl.MessageFormat('en', message); const notifications = mf.format({ count: 1 }); // 'You have 1 new notification'
  • 36.
  • 37.
    Write test262 conformancetests Refine proposals in GitHub issues Write documentation and educational materials Provide feedback on GitHub �� �� �� ��
  • 38.