Modern JavaScript (ES2022-2024)
Top-level await, structuredClone, Array.groupBy, Promise combinators and more.
javascriptlanguagefrontend
# Modern JavaScript (ES2022-2024)
## ES2022
- **Top-level await**: `await fetch(...)` in module scope directly.
- **Array.at(-1)**: last element without `arr[arr.length-1]`.
- **Object.hasOwn(obj, key)**: replaces `hasOwnProperty`.
- **Error.cause**: `new Error('msg', { cause: err })`
- **Private class fields**: `#field`, `static #x = 0`
## ES2023
- **Array.findLast / findLastIndex**: search from end.
- **Array.toSorted / toReversed / toSpliced / with**: non-mutating array methods.
## ES2024
- **Promise.withResolvers()**:
```js
const { promise, resolve, reject } = Promise.withResolvers()
```
- **Object.groupBy / Map.groupBy**:
```js
const grouped = Object.groupBy(items, item => item.category)
```
## Useful patterns
```js
// Deep clone
const clone = structuredClone(original)
// Optional chaining + nullish coalescing
const name = user?.profile?.name ?? 'Anonymous'
// Promise combinators
await Promise.all([fetchA(), fetchB()]) // all or reject
await Promise.allSettled([...]) // all, never rejects
await Promise.any([...]) // first fulfilled
await Promise.race([...]) // first settled
```
## Avoid
- `var` -> use `const`/`let`
- `arguments` -> use rest `...args`
- `__proto__` -> use `Object.getPrototypeOf`
- string concatenation for URLs -> use template literals or URL classAPI: /api/skills/javascript-modern