Destructuring in Practice
Pull values straight out of objects and arrays — in function parameters (the React props pattern), in the useState shape, and while looping objects with Object.entries.
Step 1 of 3
Unpack values where you need them
Destructuring pulls properties out of an object (or items out of an array) into their own variables. You've met it before — here's how it shows up constantly in real apps:
- In function parameters — the React props pattern. Instead of
function Card(props)thenprops.titleeverywhere, you destructure right in the parentheses:function Card({ title, price }). - Array destructuring — the exact shape of React's
useState:const [count, setCount] = useState(0)unpacks a two-item array into two named variables.
Same tool, two everyday uses. Recognizing them now means React's syntax won't surprise you.
Think of it this way: Destructuring is unpacking a delivery box and putting each item straight onto its shelf, instead of carrying the whole box around and reaching in every time you need something.
Web Standard
Array destructuring is positional (the first variable gets the first item), which is why useState returns [value, setter] in that order. Object destructuring is by name, which is why prop order never matters.
Learn more on MDN
JAVASCRIPTREAD ONLY
CONSOLE
Click "Run" to execute your code...