Destructuring
📚 What is Destructuring? Destructuring is a clean way to extract values from arrays and objects into separate variables. Instead of const name = user.name; const age = user.age; you write const { name, age } = user; in one line. It makes code shorter and more expressive.
Appy Says…
Destructuring is one of those features that once you see it, you wonder how you ever lived without it. Instead of const name = user.name; const age = user.age;, you write one line: const { name, age } = user;. Clean, fast, modern.
What is Destructuring?
Destructuring is a syntax that lets you unpack values from arrays or properties from objects into individual variables in one expression.
- •Object destructuring:
const { name, age } = user; - •Rename:
const { name: username } = user;→ variable isusername - •Default value:
const { bio = 'No bio' } = user; - •Array destructuring:
const [first, second] = array; - •Skip items:
const [, second, , fourth] = array; - •Swap variables:
[a, b] = [b, a]; - •In function params:
function greet({ name, age }) { ... }
Think of it like unpacking a Roblox gift crate
When you open a gift crate in a game, you get a sword, a shield, and coins — each goes to its own slot automatically. Destructuring unpacks an object or array and puts each value straight into the variable you named, no manual slot-by-slot assignment needed.
How It Works
- •1.
const { a, b } = obj— creates varsaandbmatching keys inobj - •2.
const [x, y] = arr— creates vars from positions 0 and 1 - •3. Unmatched keys/positions become
undefined - •4. Default values fill in when the key is
undefined:{ a = 0 } - •5. Rename syntax:
{ key: newName }— key is what you look for, newName is the variable - •6. Nested:
const { address: { city } } = user;
Real-World Examples
- •React props:
function Button({ label, onClick, disabled = false }) { ... } - •API response:
const { data, error, status } = await fetchUser(); - •
useStatereturn:const [count, setCount] = useState(0); - •Coordinates:
const [lat, lng] = gpsCoordinates; - •Express route params:
const { id, slug } = req.params;
Key Facts
- •Destructuring is purely syntactic sugar — it compiles to the same old property access under the hood
- •React's
useState,useReducer, and custom hooks all return arrays designed for destructuring - •You can destructure function return values inline:
const { width, height } = getSize(); - •Nested destructuring can go as deep as needed but becomes hard to read beyond 2–3 levels
Watch Out!
Destructuring a null or undefined value throws a TypeError. Always check first: const { name } = user ?? {}; or use optional chaining. This commonly happens when an API response returns null and you try to destructure it immediately.
Remember
Object destructuring matches by name; array destructuring matches by position. Use defaults (= value) for optional properties.
What You Learned
- •Destructuring unpacks objects by key and arrays by position into variables
- •Supports renaming, defaults, skipping, and nested unpacking
- •Unlocks: clean React props, concise API parsing, swap-without-temp-var tricks
Key Facts
- →Destructuring is purely syntactic sugar — it compiles to the same old property access under the hood
- →React's
useState,useReducer, and custom hooks all return arrays designed for destructuring - →You can destructure function return values inline:
const { width, height } = getSize(); - →Nested destructuring can go as deep as needed but becomes hard to read beyond 2–3 levels
Real-World Examples
Remember
Object destructuring matches by name; array destructuring matches by position. Use defaults (= value) for optional properties.
Quick Quiz
const [a, b] = [1, 2] sets?