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

Syntax

javascript

const [item1, item2] = array;
const { property1, property2 } = object;
const { property: alias = defaultValue } = object;

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

// Declare the constant `user`, set to `{ name: "Sam", age: 30 }`
// Declare the constant `user`, set to `{ name: "Sam", age: 30 }`
const user = { name: "Sam", age: 30 };
// Destructure {name, age} out of `user`
// Destructure {name, age} out of `user`
const { name, age } = user;
// Print `name, age` to the console
// Print `name, age` to the console
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

// Destructure {name = "Guest"} out of `{}`
// Destructure {name = "Guest"} out of `{}`
const { name = "Guest" } = {};
// Print `name` to the console
// Print `name` to the console
console.log(name);
// Destructure `[5]` into array elements a = 1, b = 2
// Destructure `[5]` into array elements a = 1, b = 2
const [a = 1, b = 2] = [5];
// Print `a, b` to the console
// Print `a, b` to the console
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

// Declare the constant `user`, set to `{ name: "Sam", address: { city: "Delhi" } }`
// Declare the constant `user`, set to `{ name: "Sam", address: { city: "Delhi" } }`
const user = { name: "Sam", address: { city: "Delhi" } };
const { name: userName, address: { city } } = user;
// Print `userName, city` to the console
// Print `userName, city` to the console
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

// Destructure `[1, 2, 3, 4]` into array elements first, ...rest
// Destructure `[1, 2, 3, 4]` into array elements first, ...rest
const [first, ...rest] = [1, 2, 3, 4];
// Print `first, rest` to the console
// Print `first, rest` to the console
console.log(first, rest);
// Destructure {id, ...others} out of `{ id: 1, name: "Sam", age: 30 }`
// Destructure {id, ...others} out of `{ id: 1, name: "Sam", age: 30 }`
const { id, ...others } = { id: 1, name: "Sam", age: 30 };
// Print `id, others` to the console
// Print `id, others` to the console
console.log(id, others);

Live Example

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