# Modern JavaScript Cheat Sheet
_The syntax that replaced the patterns you learned first_
A reference for the modern language: optional chaining, nullish coalescing, the newer array methods and the async patterns that go with them.
> Difficulty: beginner  
> Version: 1.0  
> Updated: 2026-02-27  
> Categories: JavaScript  
> Tags: Streaming

Source: https://invitationbuddy.com/cheat-sheet/modern-javascript-cheat-sheet

---

## Operators worth knowing
| Syntax | Meaning |
| --- | --- |
| `a?.b?.c` | undefined instead of a TypeError on a missing link |
| `fn?.(arg)` | Call only if fn exists |
| `a ?? b` | b only when a is null or undefined — 0 and "" survive |
| `a \|\|= b` | Assign when falsy |
| `a ??= b` | Assign only when nullish |
| `const { a, b: c = 1, ...rest } = obj` | Destructure, rename, default, collect |
| `structuredClone(obj)` | A real deep clone — handles Dates, Maps and cycles |

## Arrays
| Method | Note |
| --- | --- |
| `arr.at(-1)` | Last element, without arr.length - 1 |
| `arr.toSorted()` | Sorts a COPY — .sort() mutates in place |
| `arr.toReversed(), arr.toSpliced()` | The other non-mutating twins |
| `arr.with(0, "x")` | A copy with one index replaced |
| `arr.findLast(fn)` | Search from the end |
| `arr.flatMap(fn)` | Map then flatten one level |
| `Object.groupBy(arr, fn)` | Group into an object by key |

## Promise combinators
| Combinator | Settles when | Use for |
| --- | --- | --- |
| `Promise.all` | All fulfil, or any rejects  All-or-nothing work |
| `Promise.allSettled` | All settle, however they settle  Batch jobs where partial success is fine |
| `Promise.race` | The first to settle either way  Timeouts |
| `Promise.any` | The first to FULFIL  Redundant sources — try several mirrors |

## Code examples
### Non-mutating array work
The newer methods return a copy, so the source array survives — which is what makes them safe in reactive frameworks.
```javascript
const users = [
  { name: 'Ada',  score: 91 },
  { name: 'Linus', score: 78 },
  { name: 'Grace', score: 96 },
];

// Copy, not mutate — `users` is untouched
const ranked = users.toSorted((a, b) => b.score - a.score);

const top = ranked.at(0);              // no ranked[ranked.length - 1] dance
const last = ranked.at(-1);

// Group without a reduce()
const byBand = Object.groupBy(users, (u) => (u.score >= 90 ? 'high' : 'rest'));

// Replace one index, immutably
const patched = users.with(1, { ...users[1], score: 80 });
```

## FAQs
**When should I use ?? instead of ||?**
Whenever 0, "" or false are valid values. || treats all of them as missing and substitutes your default; ?? only does so for null and undefined.

**Why prefer toSorted() over sort()?**
sort() mutates the array in place, which in a reactive framework silently edits state you did not mean to touch. toSorted() returns a copy.

---
_Generated from https://invitationbuddy.com/cheat-sheet/modern-javascript-cheat-sheet_