Break Spread and Rest
👨💼 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! 🎉
Test Your Knowledge
Retrieval practice helps solidify learning by actively recalling information. Use this prompt with your AI assistant to quiz yourself on what you've learned.
Please quiz me on exercise 3 using the epicshop MCP server. Call the get_quiz_instructions tool with exerciseNumber "3" to get the quiz instructions, then quiz me one question at a time.