The Future of JavaScript: Upcoming ECMAScript Features
Discover upcoming JavaScript and ECMAScript features still in development, including Pattern Matching, Pipeline Operator, Array grouping, Set methods, and more!
I'm giving you a sneak peek into the future of JavaScript! You'll be among the first to update your projects with smarter programming logic and modernized coding styles when all of these features standardize. At the bottom of the article, I provide some crucial tips.
Stage 3 Proposals (Almost Ready)
Stage 3 means the feature is considered stable enough to implement, but it’s not yet finalized. These are the ones closest to landing in browsers.
Array Grouping
Group array elements by a callback.
const people = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 25 },
{ name: "Carol", age: 30 }
];
const grouped = Object.groupBy(people, p => p.age);
console.log(grouped);
// → { 25: [Alice, Bob], 30: [Carol] }
Why it matters: Simplifies data transformations.
Pattern Matching
A new match expression that works like switch, but with destructuring and guards.
const user = { role: "admin", name: "Alice" };
const message = match (user) {
when ({ role: "admin", name }) { `Welcome back, ${name}` }
when ({ role: "guest" }) { "Hello guest!" }
when (_) { "Unknown role" }
};
console.log(message);
// → Welcome back, Alice
Why it matters: Cleaner conditional logic, especially with objects and arrays.
Pipeline Operator (|>)
A new operator for chaining functions without nesting.
const result = "hello"
|> (x => x.toUpperCase())
|> (x => x + ' WORLD');
console.log(result);
// → HELLO WORLD
Why it matters: Makes functional programming patterns more readable.
Temporal API
Finally, a modern replacement for the broken Date object.
import { Temporal } from "proposal-temporal";
const today = Temporal.Now.plainDateISO();
console.log(today.toString());
// → 2025-12-01
const meeting = today.add({ days: 3 });
console.log(meeting.toString());
// → 2025-12-04
Why it matters: Reliable time zones, calendars, and precision.
Set Methods
New methods for working with sets directly.
const a = new Set([1, 2, 3]);
const b = new Set([3, 4]);
console.log(a.union(b)); // Set {1, 2, 3, 4}
console.log(a.intersection(b)); // Set {3}
console.log(a.difference(b)); // Set {1, 2}
Why it matters: No more writing utility functions for common set operations.
Iterator Helpers
Iterators finally get useful methods.
function* numbers() {
yield* [1, 2, 3, 4, 5];
}
const result = numbers()
.map(x => x * 2)
.filter(x => x > 5)
.take(2);
console.log([...result]);
// → [6, 8]
Why it matters: Brings iterators closer to arrays in usability.
Stage 2 Proposals (Experimental)
Stage 2 proposals are still being refined. They’re exciting, but syntax and behavior may change.
Object.keysLength
Quickly count object keys.
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keysLength(obj));
// → 3
RegExp.escape
Safely escape strings for regex.
]const unsafe = "hello.*world";
const safe = RegExp.escape(unsafe);
console.log(new RegExp(safe).test("hello.*world"));
// → true
Explicit Resource Management (using)
Deterministic cleanup of resources.
using file = openFile("data.txt");
console.log(file.read());
// file is automatically closed here
Decimal Type
A new numeric type for precise decimal arithmetic.
const price = Decimal("19.99");
const tax = Decimal("0.05");
console.log(price * (Decimal(1) + tax));
// → 20.9895 (exact, no floating-point errors)
Async Context
Propagates contextual values across async calls.
AsyncContext.set("traceId", "abc123");
await someAsyncFunction();
console.log(AsyncContext.get("traceId"));
// → abc123
Features You Can Try in Browsers (2025)
Stage 3 proposals above
Experimental / Behind Flags
Stage 2 proposals above
⚠️ Warning ⚠️
Syntax may change before final standardization.
Cross-browser support is uneven ( a feature may work in one but not another )
Production use is risky! These features are best for demos, teaching, or experimentation.
Have Fun!
By Adam Khoury