You will be able to extract values from JavaScript arrays and objects in a single assignment, with renaming, defaults, and rest patterns.
What it is
Destructuring is an assignment pattern that pulls values out of arrays and objects in one step. Instead of writing const name = user.name;, you write const { name } = user;. For arrays, values are matched by position: const [first, second] = list;. Related terms include object destructuring, array destructuring, renaming, default values, and rest properties.
Why it matters
- It reduces repetitive property access in functions and components.
- It makes data flow explicit by naming the values you need.
- It supports defaults, so missing data does not become
undefined. - It can collect remaining items with
...without loops. - It works well with function parameters, such as
function greet({ name }).
Syntax or steps
For objects, use curly braces and property names. For arrays, use square brackets and positions. You can rename with property: variable, provide defaults with variable = fallback, and collect leftovers with ...rest.
const { name: userName = "anon" } = user;
const [first, second, ...others] = items;Example
const user = {
name: "Ada",
age: 36,
address: { city: "London" }
};
const { name, age, address: { city } } = user;
const colors = ["red", "green", "blue"];
const [first, second, ...rest] = colors;
const { nickname = "friend" } = user;
console.log(name, age, city, first, second, rest, nickname);Part by part:
const { name, age } = user;copies thenameandageproperties into variables with the same names.address: { city }reaches into the nested object and extractscity.const [first, second, ...rest] = colors;assigns the first two array items and puts the remaining items in an array.nickname = "friend"uses a default becauseuser.nicknameis missing.
Common mistakes
- Destructuring from
nullorundefined. This throws aTypeError. Use a fallback:const { name } = user ?? {};. - Using array syntax for objects.
const [name] = user;tries to iterate the object, not read a property. Use{ name }for objects. - Forgetting defaults for optional data. If a property may be missing, write
const { email = "" } = user;. - Reusing variable names in the same scope. If
namealready exists, rename it:const { name: userName } = user;.
When to use it
| Use destructuring when | Use direct access when |
|---|---|
| You need several properties or array items at once. | You need only one value and the object is already clear. |
| You want defaults, renaming, or rest values. | The key is dynamic, such as obj[key]. |
| You are unpacking function parameters. | Unused variables would make the code harder to read. |
Practice
Guided exercise: Given const product = { title: "Book", price: 12 };, destructure title and price, and give price a default of 0.
Challenge: From const nums = [1, 2, 3, 4];, extract the first two values, rename the first to primary, and collect the rest.
Hint: Use const { title, price = 0 } = product; and const [primary, second, ...rest] = nums;.
Quick check
What does const { total = 0 } = order; do if order.total is missing?
It assigns 0 to total.
Summary
Destructuring turns repetitive extraction into a compact assignment pattern. Use it when you need multiple values, defaults, or rest data, and prefer direct access when a single dynamic property is clearer.