Object destructuring is a concise way to extract values from objects (or arrays) and assign them to variables using a syntax that mirrors the object’s structure. It was introduced in ES6 to make code cleaner and more readable.
What is Object Destructuring in JavaScript?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
The Core Idea
Object destructuring lets you extract specific properties from an object and assign them to variables in a single line. Instead of accessing each property individually, you can unpack multiple values at once using a clear and declarative syntax.
JAVASCRIPT
// Without destructuring
const user = { name: 'Alice', age: 25, city: 'Paris' };
const name = user.name;
const age = user.age;
// With destructuring
const { name, age } = user;
console.log(name); // 'Alice'
console.log(age); // 25
How it works
When you destructure an object, JavaScript matches variable names to property keys. If a key doesn’t exist in the object, its variable will be undefined.
You can also rename variables, set default values, and extract nested properties — all within the same expression.
Feature | Description | Example |
|---|---|---|
Basic Destructuring | Extracts properties directly into variables. |
|
Renaming Variables | You can rename a property while destructuring. |
|
Default Values | Provide defaults for missing properties. |
|
Nested Destructuring | Extract properties from nested objects easily. |
|
Combining with Rest | Capture remaining properties using the rest operator. |
|
JAVASCRIPT
// Nested and renamed destructuring example
const person = {
name: 'Bob',
location: { city: 'Berlin', country: 'Germany' },
age: 30
};
const { name: fullName, location: { city, country } } = person;
console.log(fullName); // Bob
console.log(city); // Berlin
Destructuring in Function Parameters
You can destructure objects directly inside function parameters. This makes your functions cleaner and self-documenting, especially when handling configuration objects or API responses.
JAVASCRIPT
function displayUser({ name, age, city }) {
console.log(`${name} is ${age} years old and lives in ${city}.`);
}
displayUser({ name: 'Alice', age: 25, city: 'Paris' });
// Output: Alice is 25 years old and lives in Paris.
Common Pitfalls
- Variable names must match property names unless you rename them explicitly.
- If you try to destructure
nullorundefined, it throws an error because they aren’t objects. - Always ensure the object exists before destructuring — or use default values to avoid runtime errors.
JAVASCRIPT
// Safe destructuring with default empty object
const data = null;
const { title = 'Untitled' } = data || {};
console.log(title); // 'Untitled'
Still so complicated?
Think of destructuring like unpacking a suitcase: instead of taking each item one by one, you open it once and pull out exactly what you need — all in one move.
Summary
- Object destructuring allows you to unpack values from objects easily.
- Supports renaming, default values, and nested extraction.
- Improves code readability and reduces repetition.
- Commonly used in React props, API data handling, and modern JS functions.
Similar questions
Guides