JS Destructuring

Think of unpacking a gift basket, instead of carrying the whole basket around, you take out the specific items you need, the cheese here, the crackers there, each going straight to its own spot. Destructuring in JavaScript does that unpacking for arrays and objects, pulling out specific values directly into their own named variables in a single, compact statement, instead of accessing each piece individually. Real code leans on destructuring constantly, from unpacking a tutorial's title and language together to handling function results cleanly across a project like cookiescursor.com.

In this page:

Array Destructuring
Object Destructuring
Default Values
Renaming and Nested Destructuring
The Rest Operator in Destructuring

Array Destructuring

Array destructuring assigns elements to variables based purely on their position, the first variable receives the first element, the second receives the second element, and so on.

Note: Use a comma with nothing between them to intentionally skip an element you don't need during array destructuring.

Warning: Array destructuring order matters directly, swapping two variable names in the pattern swaps which values they each receive.

Example: Array Destructuring

javascript

const [first, second] = [10, 20];
console.log(first, second);

Object Destructuring

Object destructuring assigns values to variables based on matching property names, not position, letting you pull out exactly the properties you need regardless of their order in the object.

Note: Object destructuring variable names must match the object's actual property names, unless you explicitly rename them.

Warning: Destructuring a property that doesn't exist on the object simply produces undefined, it does not throw an error.

Example: Object Destructuring

javascript

const user = { name: "Sam", age: 30 };
const { name, age } = user;
console.log(name, age);

Default Values

Both array and object destructuring support default values, which apply automatically whenever the corresponding source value is undefined, providing a fallback without extra conditional code.

Note: Default values in destructuring only apply when the value is undefined, not for other falsy values like 0 or an empty string.

Warning: A default value defined in a destructuring pattern is silently ignored if the source data actually provides null explicitly, since null is not undefined.

Example: Default Values

javascript

const { name = "Guest" } = {};
console.log(name);
const [a = 1, b = 2] = [5];
console.log(a, b);

Renaming and Nested Destructuring

Object destructuring lets you rename a variable while extracting it, using property: newName, and can reach into nested objects directly, extracting deeply buried values in a single statement.

Note: Renaming during destructuring is especially useful when a property name would otherwise clash with an existing variable in your current scope.

Warning: Nested destructuring assumes the intermediate structure actually exists, attempting to destructure a nested property from undefined throws an error.

Example: Renaming and Nested Destructuring

javascript

const user = { name: "Sam", address: { city: "Delhi" } };
const { name: userName, address: { city } } = user;
console.log(userName, city);

The Rest Operator in Destructuring

The rest operator ... inside a destructuring pattern gathers all remaining, unmatched values or properties into a new array or object, letting you separate the parts you need explicitly from everything else.

Note: The rest operator must always come last in a destructuring pattern, JavaScript needs to know it's collecting whatever remains afterward.

Warning: Using the rest operator with objects requires modern browser support, which is now universal, but it's a slightly newer addition than array rest destructuring.

Example: The Rest Operator in Destructuring

javascript

const [first, ...rest] = [1, 2, 3, 4];
console.log(first, rest);
const { id, ...others } = { id: 1, name: "Sam", age: 30 };
console.log(id, others);

Common Mistakes

Mixing up array destructuring's positional order with object destructuring's name-based matching, they follow very different rules.
Forgetting that a missing property during object destructuring simply becomes undefined rather than throwing an error.
Overcomplicating deeply nested destructuring patterns, when accessing the value directly might actually be clearer.

Chapter Summary

Array destructuring pulls values out based on their position, while object destructuring pulls values out based on matching property names.
Default values can be provided for any destructured variable in case the source value is missing.
Destructuring can rename variables, work on nested structures, and use the rest operator to capture remaining values.

Browser Support

Array and object destructuring have been supported in every major browser since 2015 and are a fully standard part of modern JavaScript.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Type Conversion Next Lesson → JS Arrow Functions

JS Destructuring

Array Destructuring

Object Destructuring

Default Values

Renaming and Nested Destructuring

The Rest Operator in Destructuring

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code