All 10 Destructuring, Spread & Rest questions
More in Destructuring, Spread & Rest
What does the spread operator (...) do when used on an array? How do you assign default values while destructuring? How does the rest parameter differ from the spread operator, even though they use the same '...' syntax? How do you use spread to shallow-copy and merge objects? Why must the rest element be the LAST element in a destructuring pattern? How can you use destructuring to swap two variables without a temporary variable? How do computed property names interact with object destructuring?
Advertisement
Back to results for “Destructuring”
JavaScript › Destructuring, Spread & Rest

How do you destructure nested objects and arrays in one statement?

Advanced

Answer

Destructuring patterns can be nested to match the shape of complex data, pulling deeply nested values into flat variables in a single expression.
const response = { data: { user: { name: 'Sam' } }, meta: { ids: [1, 2] } };
const { data: { user: { name } }, meta: { ids: [firstId] } } = response;
console.log(name, firstId); // 'Sam' 1
Real-world example Extracting a deeply nested field from a complex GraphQL or REST API response in one line.

Common follow-ups: What happens if an intermediate nested property is undefined during this kind of destructuring?

Error Handling
All 10 Destructuring, Spread & Rest questions