JavaScript ES2024+ Features Cheat Sheet

Quick reference for ES2024 finalized features and upcoming ES2025+ proposals — array grouping, iterator helpers, set methods, Temporal API, decorators, and more.

Array Grouping (ES2024)

Group iterable elements by a callback return value. Replaces the need for manual reduce() grouping patterns.

const inventory = [
  { name: 'apples', type: 'fruit', qty: 5 },
  { name: 'bananas', type: 'fruit', qty: 0 },
  { name: 'carrots', type: 'vegetable', qty: 8 },
];

// Group by type
const grouped = Object.groupBy(inventory, item => item.type);
// { fruit: [{name:'apples',...}, {name:'bananas',...}], vegetable: [{name:'carrots',...}] }

// Group by stock status
const stock = Object.groupBy(inventory, ({ qty }) =>
  qty > 0 ? 'inStock' : 'outOfStock'
);

// Map.groupBy — useful when keys are objects
const byStatus = Map.groupBy(inventory, ({ qty }) =>
  qty > 0 ? { status: 'ok' } : { status: 'empty' }
);

Support: Chrome 117+, Firefox 119+, Safari 17.4+, Node 21+. All major browsers.

Promise.withResolvers() (ES2024)

Creates a deferred promise, returning the promise along with its resolve and reject functions.

// Before: deferred promise pattern
let resolve, reject;
const promise = new Promise((res, rej) => { resolve = res; reject = rej; });

// After: ES2024
const { promise, resolve, reject } = Promise.withResolvers();

// Practical use: event-driven resolution
function waitForEvent(target, eventName) {
  const { promise, resolve } = Promise.withResolvers();
  target.addEventListener(eventName, resolve, { once: true });
  return promise;
}
const click = await waitForEvent(button, 'click');

Support: Chrome 119+, Firefox 121+, Safari 17.4+, Node 22+.

ArrayBuffer Transfer & Resize (ES2024)

Transfer ownership of ArrayBuffers and create resizable/growable buffers for efficient memory management.

// Resizable ArrayBuffer
const buf = new ArrayBuffer(256, { maxByteLength: 1024 });
buf.resize(512);       // Grow in-place
buf.resizable;         // true

// Transfer ownership (zero-copy where possible)
const newBuf = buf.transfer();
buf.detached;          // true — original is unusable

// Growable SharedArrayBuffer
const shared = new SharedArrayBuffer(256, { maxByteLength: 1024 });
shared.grow(512);

Support: Chrome 114+, Firefox 122+, Safari 17.4+, Node 22+.

String.isWellFormed() & toWellFormed() (ES2024)

Validate and fix lone surrogates in strings to ensure well-formed UTF-16, preventing issues with encodeURIComponent() and other APIs.

"hello".isWellFormed();            // true
"\uD800".isWellFormed();           // false (lone surrogate)
"\uD800".toWellFormed();           // "\uFFFD" (replacement char)

// Safe encoding
const input = getUserInput();
if (input.isWellFormed()) {
  const encoded = encodeURIComponent(input);
} else {
  const safe = input.toWellFormed();
}

Support: Chrome 111+, Firefox 119+, Safari 16.4+, Node 20+.

Atomics.waitAsync() (ES2024)

Non-blocking version of Atomics.wait() that returns a promise, usable on the main thread.

const sab = new SharedArrayBuffer(4);
const i32 = new Int32Array(sab);

// Main thread — non-blocking wait
const result = Atomics.waitAsync(i32, 0, 0);
if (result.async) {
  result.value.then(status => {
    console.log(status); // "ok" or "timed-out"
  });
}

// Worker thread — notify
Atomics.store(i32, 0, 1);
Atomics.notify(i32, 0);

Support: Chrome 87+, Firefox 124+, Safari 17.4+, Node 16+.

RegExp v Flag — Set Notation (ES2024)

The v flag upgrades the u flag with set operations inside character classes and support for Unicode string properties.

// Match Greek letters only (intersection)
const greek = /[\p{Script=Greek}&&\p{Letter}]/v;
greek.test('\u03B1'); // true (alpha)

// Match non-ASCII digits (subtraction)
const nonAsciiDigits = /[\p{Decimal_Number}--[0-9]]/v;

// Match multi-codepoint emoji (string properties)
const emoji = /^\p{RGI_Emoji}$/v;
emoji.test('\u{1F468}\u200D\u{1F469}\u200D\u{1F467}'); // true (family emoji)

Support: Chrome 112+, Firefox 116+ (partial), Safari 17+, Node 20+.

Temporal API (Stage 3 — Coming Soon)

A modern replacement for Date with immutable types, proper time zone support, and correct arithmetic. Use @js-temporal/polyfill today.

// Current date
const today = Temporal.Now.plainDateISO();

// Date arithmetic — correct across DST
const deadline = today.add({ months: 3, days: 10 });

// Duration between dates
const diff = deadline.since(today);
console.log(diff.toString()); // "P3M10D"

// Zoned date/time — handles time zones properly
const meeting = Temporal.ZonedDateTime.from({
  timeZone: 'America/New_York',
  year: 2024, month: 11, day: 3,
  hour: 1, minute: 30,
}); // Correctly handles DST fall-back

// Compare dates
Temporal.PlainDate.compare(date1, date2); // -1, 0, or 1

Support: Polyfill available via @js-temporal/polyfill. Native support shipping progressively in 2025.

Iterator Helpers (ES2025)

Built-in methods on iterator prototypes for lazy, chainable transformations without intermediate arrays.

// Chain lazy operations on generators
function* naturals() { let i = 1; while (true) yield i++; }

const result = naturals()
  .filter(n => n % 2 === 0)     // even numbers
  .map(n => n ** 2)             // square them
  .take(5)                       // first 5
  .toArray();                    // [4, 16, 36, 64, 100]

// Works on Map, Set, etc.
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
map.values().filter(v => v > 1).toArray(); // [2, 3]

// Wrap any iterable
Iterator.from('hello').take(3).toArray(); // ['h', 'e', 'l']

Support: Chrome 122+, Firefox 131+, Safari 18+, Node 22+.

Set Methods (ES2025)

Mathematical set operations built into Set.prototype — no more manual iteration for unions and intersections.

const frontend = new Set(['js', 'css', 'html', 'react']);
const backend  = new Set(['js', 'python', 'go', 'sql']);

frontend.union(backend);
// Set {'js', 'css', 'html', 'react', 'python', 'go', 'sql'}

frontend.intersection(backend);
// Set {'js'}

frontend.difference(backend);
// Set {'css', 'html', 'react'}

frontend.symmetricDifference(backend);
// Set {'css', 'html', 'react', 'python', 'go', 'sql'}

new Set([1, 2]).isSubsetOf(new Set([1, 2, 3]));   // true
new Set([1, 2]).isDisjointFrom(new Set([3, 4]));   // true

Support: Chrome 122+, Firefox 127+, Safari 17+, Node 22+.

Decorators (Stage 3)

The @decorator syntax for classes and class elements. Standardizes a pattern widely used via TypeScript and Babel.

// A decorator is a function that wraps a class element
function log(target, context) {
  if (context.kind === 'method') {
    return function (...args) {
      console.log(`Calling ${context.name} with`, args);
      return target.apply(this, args);
    };
  }
}

function bound(target, context) {
  if (context.kind === 'method') {
    context.addInitializer(function () {
      this[context.name] = this[context.name].bind(this);
    });
  }
}

class Router {
  @log
  @bound
  handleRequest(req) {
    return this.process(req);
  }
}

Support: Available in TypeScript 5.0+ and Babel. Native browser support in progress.

Pipeline Operator (Stage 2)

The |> operator pipes a value into a function, improving readability of deeply nested function calls.

// Before: nested calls
const result = capitalize(removeDashes(trim(input)));

// After: pipeline operator
const result = input
  |> trim
  |> removeDashes
  |> capitalize;

// With arrow functions for partial application
const result = input
  |> (s => s.trim())
  |> (s => s.replace(/-/g, ' '))
  |> (s => s.toUpperCase());

Support: Stage 2 proposal. Available via Babel plugin @babel/plugin-proposal-pipeline-operator.

Record & Tuple (Stage 2)

Deeply immutable data structures with value-based equality. Records are like frozen objects; Tuples are like frozen arrays.

// Records — immutable objects with value equality
const r1 = #{ name: "Alice", age: 30 };
const r2 = #{ name: "Alice", age: 30 };
r1 === r2;           // true (value equality!)

// Tuples — immutable arrays with value equality
const t1 = #[1, 2, 3];
const t2 = #[1, 2, 3];
t1 === t2;           // true

// Nested records and tuples
const data = #{ users: #[#{ name: "Alice" }, #{ name: "Bob" }] };

// Can be used as Map keys (value equality)
const map = new Map();
map.set(#{ x: 1, y: 2 }, "point A");
map.get(#{ x: 1, y: 2 }); // "point A"

Support: Stage 2 proposal. Available via Babel plugin @babel/plugin-proposal-record-and-tuple with @bloomberg/record-tuple-polyfill.