3 min read

Destructuring in JavaScript

Destructuring in JavaScript is a way to unpack values from arrays or properties from objects into distinct variables. It simplifies working with complex data structures and makes your code cleaner and easier to read.

In this blog, we'll explore destructuring for arrays, objects, and some advanced use cases. By the end, you'll be comfortable using destructuring to make your JavaScript code more concise and efficient.

What is Destructuring?#

Destructuring is a syntax that allows you to break down arrays or objects into individual variables in a single statement.

Example with an array:

javascript

const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // Output: 1 2 3

Example with an object:

javascript

const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name, age); // Output: Alice 25

Destructuring Arrays#

Array destructuring is straightforward because the values are assigned based on their position in the array.

Example: Basic Array Destructuring#

javascript

const fruits = ["apple", "banana", "cherry"];
const [first, second] = fruits;
 
console.log(first); // Output: apple
console.log(second); // Output: banana

Skipping Elements#

You can skip elements in an array by leaving the corresponding variable blank.

javascript

const fruits = ["apple", "banana", "cherry"];
const [, , third] = fruits;
 
console.log(third); // Output: cherry

Default Values#

If the array doesn’t contain enough values, you can assign default values.

javascript

const colors = ["red"];
const [primary, secondary = "blue"] = colors;
 
console.log(primary);   // Output: red
console.log(secondary); // Output: blue

Destructuring Objects#

Object destructuring is more flexible than array destructuring since it matches variables by property names instead of positions.

Example: Basic Object Destructuring#

javascript

const car = { brand: "Toyota", model: "Corolla" };
const { brand, model } = car;
 
console.log(brand); // Output: Toyota
console.log(model); // Output: Corolla

Renaming Variables#

You can assign the property values to variables with different names.

javascript

const car = { brand: "Toyota", model: "Corolla" };
const { brand: carBrand, model: carModel } = car;
 
console.log(carBrand); // Output: Toyota
console.log(carModel); // Output: Corolla

Default Values#

Just like arrays, you can assign default values if a property doesn’t exist.

javascript

const user = { username: "JohnDoe" };
const { username, age = 30 } = user;
 
console.log(username); // Output: JohnDoe
console.log(age);      // Output: 30

Nested Objects#

You can destructure properties from nested objects.

javascript

const user = {
    name: "Alice",
    address: {
        city: "New York",
        zip: 10001
    }
};
 
const { address: { city, zip } } = user;
 
console.log(city); // Output: New York
console.log(zip);  // Output: 10001

Using Rest with Destructuring#

The rest operator (...) allows you to collect the remaining elements or properties into a new array or object.

Example: Rest in Arrays#

javascript

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
 
console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest);   // Output: [3, 4, 5]

Example: Rest in Objects#

javascript

const user = { name: "John", age: 25, role: "admin" };
const { name, ...otherDetails } = user;
 
console.log(name);          // Output: John
console.log(otherDetails);  // Output: { age: 25, role: "admin" }

Combining Destructuring with Functions#

Destructuring is often used in function arguments to extract specific values directly from objects or arrays.

Example: Destructuring in Function Parameters#

javascript

function greet({ name, age }) {
    console.log(`Hello, ${name}! You are ${age} years old.`);
}
 
const user = { name: "Alice", age: 25 };
greet(user); // Output: Hello, Alice! You are 25 years old.

Example: Default Parameters with Destructuring#

javascript

function display([first = "default", second = "default"]) {
    console.log(first, second);
}
 
display(["value"]); // Output: value default

Destructuring with Loops#

You can use destructuring directly in loops to iterate over objects or arrays.

Example: Array Destructuring in Loops#

javascript

const fruits = ["apple", "banana", "cherry"];
 
for (const [index, fruit] of fruits.entries()) {
    console.log(`${index}: ${fruit}`);
}
// Output:
// 0: apple
// 1: banana
// 2: cherry

Example: Object Destructuring in Loops#

javascript

const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 }
];
 
for (const { name, age } of users) {
    console.log(`${name} is ${age} years old.`);
}
// Output:
// Alice is 25 years old.
// Bob is 30 years old.

Practice Code Snippet for You#

Live code runner

Destructuring

Open playground