> ## Documentation Index
> Fetch the complete documentation index at: https://js.maxbraglia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Destructuring
> Extract values from objects and arrays into individual variables
## Why destructuring?
Destructuring lets you unpack values from objects and arrays into separate variables in a single line. Instead of writing `user.name`, `user.email`, `user.role` over and over, you extract them once.
```javascript theme={null}
const user = { name: "Sarah", email: "sarah@example.com", role: "admin" };
// ❌ Without destructuring — repetitive
const name = user.name;
const email = user.email;
const role = user.role;
// ✅ With destructuring — one line
const { name, email, role } = user;
console.log(name); // "Sarah"
console.log(email); // "sarah@example.com"
console.log(role); // "admin"
```
## Object destructuring
Pull specific properties out of an object by name:
Python mental model: object destructuring is like doing multiple `dict` lookups and assignments in one step (`name = user["name"]`, `email = user["email"]`) — but with a much shorter syntax.
```javascript theme={null}
const product = {
id: 42,
name: "Wireless Headphones",
price: 79.99,
category: "Electronics",
inStock: true,
};
// Grab only what you need
const { name, price, inStock } = product;
console.log(name); // "Wireless Headphones"
console.log(price); // 79.99
console.log(inStock); // true
// id and category are ignored
```
### Renaming variables
When the property name conflicts with an existing variable or you want a clearer name:
```javascript theme={null}
const apiResponse = { data: [...], error: null, status: 200 };
// Rename "data" to "users" and "status" to "httpStatus"
const { data: users, status: httpStatus } = apiResponse;
console.log(users); // [...]
console.log(httpStatus); // 200
```
### Default values
Set fallbacks for properties that might not exist:
```javascript theme={null}
const settings = { theme: "dark" };
const { theme, language = "en", fontSize = 14 } = settings;
console.log(theme); // "dark" (from the object)
console.log(language); // "en" (default — not in object)
console.log(fontSize); // 14 (default — not in object)
```
Python mental model: this is similar to `settings.get("language", "en")`. One key difference: destructuring defaults only apply when the property is `undefined` (missing). If the value is explicitly `null`, the default is **not** used.
### Nested destructuring
```javascript theme={null}
const order = {
id: "ORD-001",
customer: {
name: "Sarah Chen",
address: { city: "Portland", state: "OR" },
},
};
const { customer: { name, address: { city } } } = order;
console.log(name); // "Sarah Chen"
console.log(city); // "Portland"
```
Don't go more than two levels deep with nested destructuring. It quickly becomes unreadable. For deeply nested data, destructure in multiple steps or use dot notation.
## Array destructuring
Pull values out by position:
Python mental model: this is like tuple unpacking (`first, second = values`) — but JavaScript adds useful extras like skipping items and collecting "the rest" with `...remaining`.
```javascript theme={null}
const colors = ["red", "green", "blue"];
const [first, second, third] = colors;
console.log(first); // "red"
console.log(second); // "green"
console.log(third); // "blue"
```
### Skipping items
```javascript theme={null}
const scores = [95, 87, 72, 91, 88];
// Skip the first two
const [, , third] = scores;
console.log(third); // 72
// Get first and rest
const [best, ...remaining] = scores;
console.log(best); // 95
console.log(remaining); // [87, 72, 91, 88]
```
### Swapping variables
```javascript theme={null}
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1
```
## Where you'll use destructuring every day
### React's useState
You've already seen this — it's array destructuring:
```jsx theme={null}
const [count, setCount] = useState(0);
const [user, setUser] = useState(null);
const [isLoading, setIsLoading] = useState(false);
```
`useState` returns a two-element array: `[currentValue, setterFunction]`. Destructuring gives them meaningful names.
### React component props
```jsx theme={null}
// Without destructuring
function UserCard(props) {
return {props.name}
;
}
// With destructuring — cleaner
function UserCard({ name, email, role }) {
return (
);
}
```
### Function parameters
```javascript theme={null}
// Extract what you need in the parameter list
function displayOrder({ id, customer, total }) {
console.log(`Order ${id} for ${customer}: $${total}`);
}
displayOrder({ id: "ORD-001", customer: "Sarah", total: 149.99, items: [...] });
// "Order ORD-001 for Sarah: $149.99"
```
If you're coming from Python, this feels like writing `def display_order(order): ...` and immediately doing `id = order["id"]`, `customer = order["customer"]`, `total = order["total"]` at the top of the function.
### API responses
```javascript theme={null}
async function getUser(userId) {
const response = await fetch(`/api/users/${userId}`);
const { name, email, role } = await response.json();
return { name, email, role };
}
```
## Comparing to Python
```javascript theme={null}
// Object destructuring (no Python equivalent)
const { name, age } = user;
// Array destructuring
const [first, second] = [1, 2];
// In function params
function greet({ name, age }) {
return `${name} is ${age}`;
}
```
```python theme={null}
# No dict destructuring — must access individually
name = user["name"]
age = user["age"]
# Tuple unpacking (similar to array destructuring)
first, second = (1, 2)
# No param destructuring — access dict keys
def greet(user):
return f"{user['name']} is {user['age']}"
```
Object destructuring is one of the biggest syntax wins JavaScript has over Python. It's everywhere in React code.
## What's next?
Destructuring unpacks values *out of* objects and arrays. The spread operator does the opposite — it expands them *into* new structures.
Copy, merge, and expand arrays and objects