Getting started General
Components
Forms
Trends
Utilities
Plugins Sass Migrate from v1
  Join us
  JavaScript Articles

JavaScript ES2026 News: Decorators, Temporal API & More

JavaScript

People often say "ES2026" to mean the next batch of standardized JavaScript. The real source of truth is TC39 proposals and their stages. This article summarizes several high-impact items in plain language, with tiny examples. All code here is written from scratch for clarity.

JavaScript language features
Upcoming JavaScript: decorators, dates, resources, and helpers

A quick note before the snippets: stage matters. Stage 4 means "done" for the spec process; Stage 3 means implementers are confident and you will see it in tools and runtimes first. Always check compat tables for your target browser or Node version.

1. Explicit resource management: using and await using

Objects can expose cleanup through Symbol.dispose (sync) or Symbol.asyncDispose (async). The using declaration runs that cleanup when the block ends, even if an error is thrown.

class Ticket {
  #used = false;
  use() {
    if (this.#used) throw new Error('already used');
    this.#used = true;
    return 'admit one';
  }
  [Symbol.dispose]() {
    console.log('ticket disposed');
  }
}

{
  using t = new Ticket();
  console.log(t.use());
} // logs: admit one, then ticket disposed

2. Decorators (standard syntax)

Decorators wrap classes, methods, or fields so you can add cross-cutting behavior (logging, validation, caching) without editing every method body. The @ form is parsed as real syntax; you still need a toolchain (for example Babel or TypeScript) until your runtime supports it natively.

// When a method runs, log its name (decorator receives the original function + context)
function announce(target, context) {
  if (context.kind !== 'method') return target;
  const name = context.name;
  return function (...args) {
    console.log(`${String(name)}()`);
    return target.call(this, ...args);
  };
}

class Cat {
  @announce
  meow() {
    return 'meow!';
  }
}

const c = new Cat();
console.log(c.meow()); // logs: meow() then meow!

Same idea as wrapping Cat.prototype.meow by hand, but the intent stays next to the declaration.

3. RegExp.escape

User input often contains regex metacharacters (., ?, $, and so on). RegExp.escape turns a string into a safe literal fragment for new RegExp(...).

const raw = '3.14';
const re = new RegExp(RegExp.escape(raw));
console.log(re.test('pi is 3.14')); // true

4. Promise.withResolvers

Sometimes you need a promise and the ability to resolve it from outside the executor. This API returns { promise, resolve, reject } in one line.

const { promise, resolve } = Promise.withResolvers();
setTimeout(() => resolve('done'), 10);
console.log(await promise); // 'done'

5. Object.groupBy and Map.groupBy

Group array items by a key without reaching for a library. Object.groupBy uses string keys; Map.groupBy can use any value as a key.

const pets = [
  { name: 'Luna', kind: 'cat' },
  { name: 'Rex', kind: 'dog' },
  { name: 'Milo', kind: 'cat' },
];
const byKind = Object.groupBy(pets, p => p.kind);
console.log(byKind.cat.length); // 2

6. Temporal API

Date has well-known pitfalls (time zones, parsing, arithmetic). Temporal splits calendar dates, wall-clock times, instants, and zoned values so operations stay predictable.

// Plain calendar date (no timezone ambiguity)
const d = Temporal.PlainDate.from('2026-03-25');
const next = d.add({ days: 1 });
console.log(next.toString()); // 2026-03-26

// Difference as a rich object (not "milliseconds since epoch")
const birth = Temporal.PlainDate.from('2000-05-10');
const age = birth.until(Temporal.PlainDate.from('2026-03-25'));
console.log(`${age.years}y`); // e.g. 25y

Use a polyfill or a modern runtime build that ships Temporal while the proposal finishes.

7. New Set methods

Sets gain first-class set algebra: union, intersection, difference, symmetric difference, and subset or superset checks.

const a = new Set([1, 2, 3]);
const b = new Set([3, 4]);
console.log([...a.union(b)]);           // [1, 2, 3, 4]
console.log([...a.intersection(b)]);    // [3]
console.log([...a.difference(b)]);      // [1, 2]

8. Iterator helpers

Any iterable (not only arrays) can be chained with lazy helpers such as .map, .filter, .take, then materialized with .toArray() when you need an array.

function* nums() {
  yield 1; yield 2; yield 3; yield 4;
}
const smallEvens = nums()
  .filter(n => n % 2 === 0)
  .take(1)
  .toArray();
console.log(smallEvens); // [2]

How to try this safely

  • Prefer official docs and TC39 over blog titles: years are labels; stages and shipping status are facts.
  • Use the Babel REPL or TypeScript for syntax that is not native in your target yet (decorators, using in some setups).
  • Polyfill Temporal if you prototype date logic before it is everywhere.

If you want a single readable survey that groups these topics together, the Medium article linked in the intro is a good companion read alongside the official proposals.

Start Building with Axentix

Ready to create amazing websites? Get started with Axentix framework today.

Get Started

Related Posts