Here are Some new Features in Javascript

TL;DR

ES2024 and 2025 deliver powerful additions: Promise.withResolvers(), Array grouping methods, Set operations, Iterator helpers, and refinements that make JavaScript more expressive and performant for modern applications.

JavaScript's evolution never stops. Every year, TC39 (the standards committee) advances new features from proposal through standardization. By 2026, ES2024 features are widely available in modern browsers and Node.js, and ES2025 proposals are on the horizon. In this post, we'll explore the most useful additions from recent years and what's coming next, with practical code examples for each.

ES2024 Features

Promise.withResolvers()

Before ES2024, creating a Promise and manually controlling its resolution required storing references outside the constructor. Promise.withResolvers() fixes this.

// Before ES2024 — verbose
let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

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

// Real-world use case: event-driven resolution
const { promise, resolve } = Promise.withResolvers();

document.getElementById('button').addEventListener('click', () => {
  resolve('Button clicked!');
});

const result = await promise;
console.log(result); // Button clicked!

Browser Support: Chrome 71+, Firefox 126+, Safari 18.2+, Node.js 22.6+

Array Grouping: Array.groupBy() and Object.groupBy()

Grouping data by a key function is a common operation. ES2024 finally provided native support.

const products = [
  { id: 1, name: 'Laptop', category: 'Electronics', price: 1200 },
  { id: 2, name: 'Chair', category: 'Furniture', price: 150 },
  { id: 3, name: 'Monitor', category: 'Electronics', price: 400 },
  { id: 4, name: 'Desk', category: 'Furniture', price: 500 }
];

// Array.groupBy() - returns Map-like object with array values
const byCategory = Array.groupBy(products, p => p.category);
// Result: { Electronics: [...], Furniture: [...] }

console.log(byCategory.Electronics); // Array of electronics

// Object.groupBy() - works with any iterable
const grouped = Object.groupBy(products, p => p.price > 500 ? 'expensive' : 'affordable');
// Result: { expensive: [...], affordable: [...] }

// TypeScript signature
interface GroupedResult<T> {
  [key: string]: T[];
}
const result: GroupedResult<Product> = Array.groupBy(products, p => p.category);

Browser Support: Chrome 122+, Firefox 125+, Safari 18.2+, Node.js 21+

Set Methods: Union, Intersection, Difference

Sets received powerful set-theory operations.

const admins = new Set(['alice', 'bob', 'charlie']);
const moderators = new Set(['bob', 'david', 'eve']);

// Union: all members from both sets
const allStaff = admins.union(moderators);
console.log(allStaff); // Set(5) { 'alice', 'bob', 'charlie', 'david', 'eve' }

// Intersection: members in both sets
const staffWithBothRoles = admins.intersection(moderators);
console.log(staffWithBothRoles); // Set(1) { 'bob' }

// Difference: members in first set but not second
const adminsOnly = admins.difference(moderators);
console.log(adminsOnly); // Set(2) { 'alice', 'charlie' }

// Symmetric difference: members in either set but not both
const uniqueToEach = admins.symmetricDifference(moderators);
console.log(uniqueToEach); // Set(4) { 'alice', 'charlie', 'david', 'eve' }

// Relationship checks
console.log(admins.isSubsetOf(allStaff)); // true
console.log(admins.isSupersetOf(moderators)); // false
console.log(admins.isDisjointFrom(new Set(['frank', 'grace']))); // true

Browser Support: Chrome 122+, Firefox 127+, Safari 18.2+, Node.js 21.9+

Array find by Index

The findIndex() method returned index, but not the value. Now you can destructure both.

const users = [
  { id: 1, name: 'Alice', active: true },
  { id: 2, name: 'Bob', active: false },
  { id: 3, name: 'Charlie', active: true }
];

// Traditional findIndex - returns only index
const index = users.findIndex(u => u.name === 'Bob');
const user = users[index];

// Modern approach - use find with additional logic
const user = users.find(u => u.name === 'Bob');
const index = users.indexOf(user);

Iterator Helpers (Stage 3 Proposal)

Iterator helpers are being standardized to make working with iterables more ergonomic.

// Currently requires polyfill or transpilation, but will be native in 2025-2026

// Mapping over iterables
const numbers = [1, 2, 3, 4, 5];
const doubled = Iterator.from(numbers)
  .map(n => n * 2)
  .filter(n => n > 4)
  .toArray();

console.log(doubled); // [6, 8, 10]

// Chaining operations without intermediate arrays
function* generateUsers() {
  yield { id: 1, age: 25 };
  yield { id: 2, age: 30 };
  yield { id: 3, age: 35 };
}

const adults = Iterator.from(generateUsers())
  .filter(u => u.age >= 30)
  .toArray();

Status: Stage 3 (expected in ES2026/2027)

Decorators (Stage 3)

Decorators allow metadata-driven programming and are widely used in TypeScript and frameworks.

// TypeScript decorator (currently requires experimentalDecorators flag)
function readonly(target: any, propertyKey: string) {
  const descriptor = Object.getOwnPropertyDescriptor(target, propertyKey);
  Object.defineProperty(target, propertyKey, {
    ...descriptor,
    writable: false
  });
}

class User {
  @readonly
  id: number = 1;

  name: string = 'Alice';
}

const user = new User();
user.name = 'Bob'; // OK
user.id = 2; // Error: Cannot assign to read only property 'id'

Status: Stage 3 (widely supported with transpilers; native in modern frameworks)

Record and Tuple Proposals (Stage 2)

These immutable data structures aim to provide value semantics for complex objects.

// Currently Stage 2 - not yet widely available, but representative syntax:

// Record: immutable object-like structure
const point = #{x: 1, y: 2};
// point.x = 3; // Error: Records are immutable

// Tuple: immutable array-like structure
const pair = #[1, 2];
// pair[0] = 3; // Error: Tuples are immutable

// Value equality
const p1 = #{x: 1, y: 2};
const p2 = #{x: 1, y: 2};
console.log(p1 === p2); // true — value semantics, not reference

// Use cases: state immutability, structural equality in data processing

Status: Stage 2 (not yet in browsers; polyfills and experimental transpilers available)

Pattern Matching (Stage 1)

Early-stage proposal for destructuring patterns in conditional logic.

// Conceptual syntax (still being debated)
// Not yet available in production

// Future pattern matching concept:
const response = { status: 200, data: [...] };

match (response) {
  when ({ status: 200, data }) => {
    console.log('Success:', data);
  }
  when ({ status: 404 }) => {
    console.log('Not found');
  }
  when ({ status }) => {
    console.log('Error:', status);
  }
}

Status: Stage 1 (early exploration; not recommended for production use)

Browser and Runtime Compatibility Summary

Feature	Chrome	Firefox	Safari	Node.js	Status
Promise.withResolvers()	71+	126+	18.2+	22.6+	Standard
Array.groupBy()	122+	125+	18.2+	21+	Standard
Set methods	122+	127+	18.2+	21.9+	Standard
Iterator Helpers	✗	✗	✗	✗	Stage 3
Decorators	✗	✗	✗	✗	Stage 3 (TS support)
Record/Tuple	✗	✗	✗	✗	Stage 2
Pattern Matching	✗	✗	✗	✗	Stage 1

Best Practices for Using New Features

1. Check Your Target Environment

If your app needs to support older browsers, use a transpiler like Babel.

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: '> 0.5%, last 2 versions, not dead'
    }]
  ]
};

2. Polyfill When Needed

For Stage 2+ features not yet in browsers, use polyfills or transpilers.

// polyfill-example.js
if (!Promise.withResolvers) {
  Promise.withResolvers = function() {
    let resolve, reject;
    const promise = new Promise((res, rej) => {
      resolve = res;
      reject = rej;
    });
    return { promise, resolve, reject };
  };
}

3. Test in Your Target Environments

Use caniuse.com or browserslist to verify support.

{
  "browserslist": [
    "last 2 versions",
    "> 0.5%",
    "not dead"
  ]
}

Conclusion

ES2024 delivered substantial improvements with Promise.withResolvers(), grouping methods, and Set operations. ES2025 and beyond promise Iterator helpers, advanced Decorators, and potentially Records and Tuples. Stay current with TC39 proposals, but prioritize features already available in your target environments. Use transpilers for cutting-edge syntax, and leverage stable features to write cleaner, more expressive code today.