JavaScript Destructuring
Destructuring is JavaScript syntax for taking properties from an object or items from an array and assigning them to variables with a pattern. It does not change the original object or array. We will use one order throughout:
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
Basic object destructuring
Names inside {} select properties with the same names from the value on the right. This creates two new constants while order remains unchanged.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest, drink } = order;
console.log(guest);
console.log(drink);
The output is lida and then tea. This is a shorter form of reading order.guest and order.drink; it does not remove either property from order.
Rename and provide a default
Write property: variable to choose a different variable name. A default after = is used only when the property value is undefined.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest: customer, size = "regular" } = order;
console.log(customer);
console.log(size);
customer receives lida. Because order has no size property, size receives regular. The rename does not create a variable named guest.
Read a nested property
A nested pattern follows the shape of nested objects. The inner { city } reads city from order.address.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { address: { city } } = order;
console.log(city);
The output is rasht. This pattern does not create an address variable. Important: if address is missing or undefined, trying to destructure city from it throws an error. Optional chaining is not syntax you can place inside this destructuring pattern; check or normalize the value first.
Array destructuring
Square brackets match items by position. The first variable receives index 0, and the second receives index 1.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const [firstExtra, secondExtra] = order.extras;
console.log(firstExtra);
console.log(secondExtra);
The output is mint and then lemon. The names are your choice; position determines the value. order.extras still contains both items.
Destructure a function parameter
A function can unpack the object it receives directly in its parameter list. The function below needs only guest and drink.
function label({ guest, drink }) {
return guest + " ordered " + drink;
}
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
console.log(label(order));
The call prints lida ordered tea. The parameter pattern runs when the function is called, so passing null or undefined would fail unless the function is designed to handle it.
Complete page demo
This page combines object, array, and parameter destructuring. It writes the required summary to the page.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>JavaScript Destructuring</title></head>
<body>
<p id="result"></p>
<script>
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
function summary({ guest, drink, extras }) {
const [firstExtra] = extras;
return guest + " / " + drink + " / " + firstExtra;
}
document.getElementById("result").textContent = summary(order);
</script>
</body>
</html>
The visible output is exactly lida / tea / mint. The function reads what it needs and leaves order unchanged.
include_try
Try renaming drink to beverage, then add a default for a missing table property. Before using a nested pattern, try an order without address and add a safe check.
mistakes
Do not confuse the source property with a renamed variable, expect defaults to replace null, or assume a nested object always exists. Remember: {} matches object properties, [] matches array positions, and destructuring copies references or values into variables without mutating the source. Rest and spread belong to the next spread-rest session.
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top