👨💼 Excellent! You've mastered the
... operator in both its forms.You learned:
- 📤 Array spread - Expand arrays:
[...arr, newItem] - 📦 Object spread - Expand objects:
{ ...obj, newProp: value } - 📥 Rest parameters - Collect arguments:
function fn(...args) - 🔄 Immutable updates - Create new objects/arrays instead of mutating
🦉 The key distinction:
| Context | Name | Effect |
|---|---|---|
[...arr] | Spread | Expands into elements |
{ ...obj } | Spread | Expands into properties |
fn(...arr) | Spread | Expands as function args |
function fn(...x) | Rest | Collects args into array |
const [a, ...rest] | Rest | Collects remaining elements |
const { a, ...rest} | Rest | Collects remaining props |
These patterns are foundational for:
- React state updates
- Redux reducers
- Utility functions
- Any immutable data manipulation
You're now equipped to write modern, immutable TypeScript code! 🎉