What's Coming Next to JavaScript

JavaScript is continuously evolving, with new features coming every year. Some
say that it happens to fast, but everybody wishes some specific proposal would
be implemented by browser right now.

What new features can we use in 2024, and what can we expect soon? What are
some more long-term proposed features that will have a potential huge impact of
the ecosystem? We'll go together through these questions, while learning at the
same time how JavaScript gets standardized!


(c) JSConf Budapest 2024
June 26-28, 2024
https://jsconfbp.com
https://www.youtube.com/watch?v=tKHdASf_OOI

1. ..What's coming next to..
JavaScript?

2. About me
NICOLÒ RIBAUDO
●Working at Igalia on web standards
●TC39 delegate
●Maintaining Babel, the JavaScript compiler

3. .What are standard.
.bodies and TC39 ?. 1

4. Where does ?????? go?

5. They’re venues for
unification & uniformization
●WHATWG
●W3C
●IETF
●ECMA
●Unicode
●…

6. TC39 is the
Technical Committee
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. How does
TC39 work? 2

9. 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

10. "Don't break
the web"

11. Where

12. Where

13. 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

14. The Process
3
Stage-by-stage

15. 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

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. test262.fyi
Test262(Github)

19. 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!

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. New ES2024 &
ES2025 features
4

22. ES2024
Unicode-related utilities
❏String.prototype.isWellFormed and toWellFormed
❏/v flag for regular expressions

23. "?????? " === "\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"

24. 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

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. What's
coming next?
5

31. 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⚠

32. 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]

33. 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

34. 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

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. Collaboration & Help
Get involved !!!6

37. Write test262 conformance tests

Refine proposals in GitHub issues

Write documentation and educational materials

Provide feedback on GitHub



??????
??????
??????
??????

38. Thank you! ??????