JavaScript Destructuring: Array, Object, and Nested Destructuring

JavaScript destructuring is an ES6 feature that allows you to extract values from arrays and properties from objects and assign them to variables. It provides a cleaner alternative to accessing each value individually.

Destructuring is commonly used when working with arrays, objects, function parameters, API responses, and modern JavaScript frameworks such as React.

In this tutorial, you will learn array destructuring, object destructuring, and nested destructuring with practical examples.

What Is Destructuring in JavaScript?

Destructuring is a JavaScript assignment syntax that extracts values from arrays or properties from objects into separate variables.

Without destructuring, you might access array elements using indexes or object properties using dot notation.

For example, without destructuring:

const colors = ["Red", "Green", "Blue"];

const first = colors[0];
const second = colors[1];

console.log(first);
console.log(second);

Output:

Red
Green

Using destructuring, you can write the same code more concisely:

const colors = ["Red", "Green", "Blue"];

const [first, second] = colors;

console.log(first);
console.log(second);

Output:

Red
Green

The variables first and second receive the first and second elements of the array.

Destructuring was introduced in ES6 and is widely used in modern JavaScript development.

Array Destructuring in JavaScript

Array destructuring allows you to extract elements from an array and assign them to variables using square brackets [].

The position of each variable determines which array element it receives.

Basic Array Destructuring

const fruits = ["Apple", "Banana", "Mango"];

const [first, second, third] = fruits;

console.log(first);
console.log(second);
console.log(third);

Output:

Apple
Banana
Mango

In this example, first receives "Apple", second receives "Banana", and third receives "Mango".

Array destructuring follows the order of elements rather than their names.

Skipping Array Elements

You can skip unwanted elements by leaving an empty position between commas.

const numbers = [10, 20, 30, 40];

const [first, , third] = numbers;

console.log(first);
console.log(third);

Output:

10
30

The second element is skipped because there is no variable between the commas.

This technique is useful when you need only specific values from an array.

Using Default Values in Array Destructuring

You can provide default values for variables when the corresponding array element is undefined or missing.

const colors = ["Red"];

const [first, second = "Blue"] = colors;

console.log(first);
console.log(second);

Output:

Red
Blue

The first variable receives "Red". Because the second array element is missing, second receives its default value, "Blue".

A default value is used only when the corresponding value is undefined, not when it is null.

Swapping Variables Using Array Destructuring

Array destructuring allows you to swap the values of two variables without creating a temporary variable.

let a = 10;
let b = 20;

[a, b] = [b, a];

console.log(a);
console.log(b);

Output:

20
10

This technique exchanges the values of a and b in a single assignment.

Object Destructuring in JavaScript

Object destructuring allows you to extract property values from an object and assign them to variables using curly braces {}.

Unlike array destructuring, object destructuring uses property names to identify which values to extract.

Basic Object Destructuring

const student = {
    name: "Alex",
    age: 22,
    city: "Hyderabad"
};

const { name, age, city } = student;

console.log(name);
console.log(age);
console.log(city);

Output:

Alex
22
Hyderabad

JavaScript matches each variable name with the corresponding property name in the object.

For example, name receives the value of student.name.

Renaming Variables During Object Destructuring

You can assign an object property to a variable with a different name using a colon (:).

const student = {
    name: "Alex",
    age: 22
};

const { name: studentName, age: studentAge } = student;

console.log(studentName);
console.log(studentAge);

Output:

Alex
22

Here, studentName receives the value of the name property, while studentAge receives the value of the age property.

The original object property names remain unchanged.

Using Default Values in Object Destructuring

You can assign default values to object properties that are missing or have the value undefined.

const user = {
    name: "Sarah"
};

const { name, country = "India" } = user;

console.log(name);
console.log(country);

Output:

Sarah
India

Because the object does not contain a country property, JavaScript uses the default value "India".

Destructuring Function Parameters

Object destructuring can also be used directly in function parameters.

function displayUser({ name, age }) {
    console.log(`Name: ${name}`);
    console.log(`Age: ${age}`);
}

const user = {
    name: "Alex",
    age: 25
};

displayUser(user);

Output:

Name: Alex
Age: 25

The function extracts name and age from the supplied object.

This pattern is particularly useful when a function accepts an object containing multiple settings or values.

Nested Destructuring in JavaScript

Nested destructuring allows you to extract values from arrays or objects that contain other arrays or objects.

It is useful when working with complex data structures, such as user profiles, product details, and API responses.

Nested Object Destructuring

Consider an object that contains another object as a property.

const user = {
    name: "Alex",
    address: {
        city: "Hyderabad",
        country: "India"
    }
};

const {
    address: { city, country }
} = user;

console.log(city);
console.log(country);

Output:

Hyderabad
India

The variables city and country receive values from the nested address object.

Notice that this syntax does not create a variable named address. It extracts the specified nested properties directly.

If you also need the entire address object, you can destructure it separately:

const {
    address,
    address: { city }
} = user;

console.log(address);
console.log(city);

Output:

{ city: 'Hyderabad', country: 'India' }
Hyderabad

Nested Array Destructuring

Nested arrays can also be destructured using square brackets.

const numbers = [10, [20, 30]];

const [first, [second, third]] = numbers;

console.log(first);
console.log(second);
console.log(third);

Output:

10
20
30

The second element of the outer array is itself an array. The nested pattern extracts its two elements into second and third.

Combining Object and Array Destructuring

You can combine object and array destructuring when an object contains an array.

const student = {
    name: "Sarah",
    marks: [85, 90, 95]
};

const {
    name,
    marks: [firstMark, secondMark, thirdMark]
} = student;

console.log(name);
console.log(firstMark);
console.log(secondMark);
console.log(thirdMark);

Output:

Sarah
85
90
95

This example extracts the student’s name and individual marks from the nested array.

Difference Between Array and Object Destructuring

Feature	Array Destructuring	Object Destructuring
Syntax	Square brackets `[]`	Curly braces `{}`
How values are matched	By position	By property name
Order matters	Yes	No, when selecting named properties
Skipping values	Leave empty positions	Omit unwanted properties
Renaming variables	Assign positions to differently named variables	Use `propertyName: newVariableName`
Common use cases	Lists, tuples, returned arrays	Objects, configurations, API data

Both techniques support default values and can be combined with nested structures.

Common Mistakes in JavaScript Destructuring

Using the Wrong Brackets

Array destructuring requires square brackets, while object destructuring uses curly braces.

const colors = ["Red", "Blue"];
const [first, second] = colors;

const user = { name: "Alex" };
const { name } = user;

console.log(first, second);
console.log(name);

Output:

Red Blue
Alex

Confusing Property Renaming with Assignment

In object destructuring, the colon renames a variable; it does not rename the property in the original object.

const user = { name: "Alex" };

const { name: userName } = user;

console.log(userName);
console.log(user.name);

Output:

Alex
Alex

Both refer to the same property value.

Destructuring a Missing Nested Object

Destructuring a nested property from undefined or null causes an error.

For example, if user.address does not exist, this pattern will fail:

const user = { name: "Alex" };

// This throws a TypeError if address is undefined.
const { address: { city } } = user;

When nested properties might be missing, check their existence first or use optional chaining to access them safely.

const user = { name: "Alex" };

const city = user.address?.city;

console.log(city);

Output:

undefined

Optional chaining prevents an error when address is missing, although it does not itself perform destructuring.

Frequently Asked Questions

What is destructuring in JavaScript?

Destructuring is an assignment syntax that extracts values from arrays or properties from objects and assigns them to variables.

What is the difference between array and object destructuring?

Array destructuring uses element positions, while object destructuring uses property names.

Can I use default values with destructuring?

Yes. You can assign default values that are used when the corresponding value is undefined.

What is nested destructuring?

Nested destructuring extracts values from arrays or objects contained inside other arrays or objects.

Can I rename variables while destructuring an object?

Yes. Use the syntax propertyName: newVariableName to assign a property value to a differently named variable.

Why is destructuring useful in React?

Destructuring makes it easier to extract values from component properties, state objects, and data returned by APIs. It can make React code more readable.

What to Learn Next

Continue learning modern JavaScript features with these topics: