Object Destructuring in Depth0%
Callbacks

Object Destructuring in Depth

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Object Destructuring in Depth in Modern JavaScript

Object destructuring is a powerful syntax introduced in ES6 that allows you to extract properties from objects and bind them to distinct variables. Mastering advanced destructuring techniques—including default values, aliasing, nested pattern matching, and function parameter destructuring—is fundamental for writing concise modern JavaScript.

1. Property Renaming (Aliasing)

When extracting a property, you can assign it to a variable with a different name using the syntax { propertyName: newVariableName }:

JavaScript
const apiResponse = {
usr_id: 'usr_9481',
fst_nm: 'Priya',
lst_nm: 'Sharma'
};
 
// Destructure and rename to clean camelCase variables
const {
usr_id: id,
fst_nm: firstName,
lst_nm: lastName
} = apiResponse;
 
console.log(id); // 'usr_9481'
console.log(firstName); // 'Priya'

2. Default Values with Fallbacks

You can specify fallback values that apply only if the extracted property is strictly undefined:

JavaScript
const userProfile = {
username: 'alex_code',
role: 'editor',
theme: undefined // Explicitly undefined
};
 
const {
username,
role = 'subscriber',
theme = 'system-default',
avatarUrl = '/images/default-avatar.png'
} = userProfile;
 
console.log(theme); // 'system-default' (Fell back because value was undefined)
console.log(avatarUrl); // '/images/default-avatar.png' (Key did not exist)
Note
Default values trigger only on undefined. Values of null, false, 0, or "" are considered defined and will not trigger the fallback default!

3. Combining Renaming and Default Values

You can rename a variable and supply a default value in the same statement:

JavaScript
const settings = {
max_retry: null,
timeout_ms: undefined
};
 
const {
timeout_ms: timeout = 3000,
max_retry: retries = 5
} = settings;
 
console.log(timeout); // 3000 (undefined -> fallback triggered)
console.log(retries); // null (null is defined -> NO fallback!)

4. Deep Nested Destructuring

Destructuring patterns can mirror complex nested structures to extract deeply nested values in a single step:

JavaScript
const enterpriseOrder = {
orderId: 'ORD-774',
customer: {
name: 'Apex Corp',
billingAddress: {
city: 'Seattle',
postal: '98101'
}
}
};
 
// Extract city directly from deep structure
const {
customer: {
billingAddress: { city, postal }
}
} = enterpriseOrder;
 
console.log(city); // 'Seattle'
console.log(postal); // '98101'
// Note: 'customer' and 'billingAddress' variables are NOT created!

5. Function Parameter Destructuring with Defaults

Destructuring function parameters creates self-documenting APIs with named arguments and default configurations:

JavaScript
// Clean options configuration pattern
function createDatabaseConnection({
host = 'localhost',
port = 5432,
database,
ssl = true
} = {}) { // '= {}' prevents error if no argument is passed!
console.log(`Connecting to ${database} at ${host}:${port} (SSL: ${ssl})`);
}
 
// Usage:
createDatabaseConnection({
database: 'analytics_prod',
ssl: false
});
// Connecting to analytics_prod at localhost:5432 (SSL: false)
 
// Calling with no arguments uses all defaults safely:
createDatabaseConnection();
// Connecting to undefined at localhost:5432 (SSL: true)
Interactive Quiz

Practice Quiz

Question 1
In const { status: code } = response;, what variable name is created in scope?
Question 2
When does a default value in object destructuring (const { port = 8080 } = config;) trigger?
Question 3
What is the output of const { name = 'Anonymous' } = { name: null }?
Question 4
Why is = {} added to function configure({ timeout = 5000 } = {})?
Question 5
In nested destructuring const { user: { email } } = account;, which variable is declared in scope?
Next Lesson

Callbacks

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Spread in ObjectsCallbacks

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext