AI Skill Library

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 class

API: /api/skills/javascript-modern