JavaScript continues to evolve rapidly. Let's explore the latest features that make development easier and more powerful.
ES2024 (ES15) Features
Object.groupBy()
Group array elements by a criteria:
const people = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 25 }
];
const grouped = Object.groupBy(people, ({ age }) => age);
// { 25: [{...}, {...}], 30: [{...}] }Map.groupBy()
Similar but returns a Map:
const mapped = Map.groupBy(people, ({ age }) => age);Promise.withResolvers()
Create promises with separate resolve/reject functions:
const { promise, resolve, reject } = Promise.withResolvers();
resolve('Done!');
// No need to store resolve/reject externallyAtomics.waitAsync()
Non-blocking atomic operations:
const result = await Atomics.waitAsync(sharedArray, 0, 0);RegExp v flag (setNotation)
Advanced pattern matching:
const regex = /[\p{Letter}--\p{Script=Latin}]/v;Well-formed Unicode strings
const str = 'Cafe\u{301}';
str.isWellFormed(); // trueES2025 (ES16) Proposals
Temporal API (Stage 3)
Modern date/time handling:
const now = Temporal.Now.plainDateTimeISO();
const birthday = Temporal.PlainDate.from('1990-05-15');
const age = now.until(birthday).years;Iterator Helpers
Chain methods on iterators:
const result = iterator
.map(x => x * 2)
.filter(x => x > 10)
.take(5);Symbols as WeakMap keys
const sym = Symbol('description');
const weakMap = new WeakMap();
weakMap.set(sym, 'value');Other Recent Features Worth Mentioning
Array.prototype.toReversed/toSorted
Non-mutating array methods:
const arr = [3, 1, 2];
const sorted = arr.toSorted(); // [1, 2, 3]
arr; // Still [3, 1, 2]Array.prototype.toSpliced
Non-mutating splice:
const arr = [1, 2, 3];
const result = arr.toSpliced(1, 1, 4); // [1, 4, 3]Array.prototype.with
Non-mutating element replacement:
const arr = [1, 2, 3];
const result = arr.with(1, 99); // [1, 99, 3]Hashbang Grammar
#!/usr/bin/env node
console.log('Hello from Node.js!');Using New Features Today
Babel and SWC support most proposals:
npm install @babel/preset-envConfigure in .babelrc:
{
"presets": [["@babel/preset-env", {
"targets": "last 2 versions"
}]]
}Browser Support
Check compatibility:
- caniuse.com for specific features
- Use core-js for polyfills
- Configure Babel targets appropriately
Conclusion
JavaScript's evolution brings powerful features that improve developer experience. Use transpilation for new features, polyfill when needed, and gradually adopt these patterns in your codebase.