Destructuring: Arrays & Objects
Destructuring in JavaScript is a short and elegant way to extract values from arrays and objects into individual variables. It helps make your code cleaner, easier to read, and reduces repetition.
What Is Destructuring?
Before ES6, you’d typically extract data from arrays or objects like this:
let numbers = [10, 20, 30];
let a = numbers[0];
let b = numbers[1];
let c = numbers[2];
console.log(a, b, c); // Output: 10 20 30That works — but it’s verbose. With destructuring, you can do the same thing in one line:
let [a, b, c] = [10, 20, 30];
console.log(a, b, c); // Output: 10 20 30This is array destructuring. Similarly, we can do it with objects — that’s called object destructuring.
Array Destructuring
Array destructuring lets you unpack values from arrays into variables easily.
Basic Example
const colors = ["red", "green", "blue"];
const [first, second, third] = colors;
console.log(first); // "red"
console.log(second); // "green"
console.log(third); // "blue"Skipping Items
You can skip elements by leaving gaps (commas):
const numbers = [1, 2, 3, 4];
const [first, , third] = numbers;
console.log(first, third); // Output: 1 3Default Values
If an element doesn’t exist, you can set a default value:
const fruits = ["apple"];
const [first, second = "banana"] = fruits;
console.log(first, second); // Output: apple bananaSwapping Variables
One of the coolest uses of destructuring is swapping variables without using a temporary one:
let x = 5;
let y = 10;
[x, y] = [y, x];
console.log(x, y); // Output: 10 5Object Destructuring
Object destructuring allows you to extract properties from an object and assign them to variables with the same name as the keys.
Basic Example
const person = {
name: "Abhinav",
age: 22,
city: "Delhi"
};
const { name, age, city } = person;
console.log(name); // Abhinav
console.log(age); // 22
console.log(city); // DelhiHere, the variable names (name, age, city) must match the property names in the object.
Assigning to New Variable Names
If you want to use different variable names, you can rename them using a colon :.
const user = {
username: "riya_01",
email: "[email protected]"
};
const { username: userName, email: userEmail } = user;
console.log(userName); // riya_01
console.log(userEmail); // [email protected]Now username is stored in userName, and email in userEmail.
Default Values in Object Destructuring
You can also set default values for missing properties.
const settings = {
theme: "dark"
};
const { theme, fontSize = 16 } = settings;
console.log(theme); // dark
console.log(fontSize); // 16If fontSize doesn’t exist in the object, it defaults to 16.
Nested Destructuring
You can destructure objects inside other objects or arrays — this is called nested destructuring.
Example: Nested Objects
const user = {
name: "Abhinav",
address: {
city: "Delhi",
zip: 110001
}
};
const { name, address: { city, zip } } = user;
console.log(name); // Abhinav
console.log(city); // Delhi
console.log(zip); // 110001Note: When destructuring nested objects,
addressitself won’t be available as a variable — unless you extract it separately.
Example: Nested Arrays
const numbers = [1, [2, 3]];
const [a, [b, c]] = numbers;
console.log(a, b, c); // Output: 1 2 3Combining Arrays and Objects
You can even mix destructuring of arrays and objects!
const users = [
{ name: "Abhinav", age: 22 },
{ name: "Riya", age: 21 }
];
const [firstUser, secondUser] = users;
console.log(firstUser.name); // Abhinav
console.log(secondUser.age); // 21
// Or directly destructure the object properties
const [{ name: user1Name }, { name: user2Name }] = users;
console.log(user1Name, user2Name); // Abhinav RiyaFunction Parameter Destructuring
Destructuring can also be used directly in function parameters to make code cleaner.
Example: Object Parameter Destructuring
function displayUser({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
const user = { name: "Riya", age: 21 };
displayUser(user); // Output: Name: Riya, Age: 21You can also combine this with default values:
function greet({ name = "Guest" }) {
console.log(`Hello, ${name}!`);
}
greet({ name: "Abhinav" }); // Output: Hello, Abhinav!
greet({}); // Output: Hello, Guest!Destructuring with the Rest Operator (...)
You can use the rest operator (...) to collect remaining elements or properties into a new array or object.
Example with Arrays
const [first, ...rest] = [10, 20, 30, 40];
console.log(first); // 10
console.log(rest); // [20, 30, 40]Example with Objects
const { name, ...details } = { name: "Abhinav", age: 22, city: "Delhi" };
console.log(name); // Abhinav
console.log(details); // { age: 22, city: "Delhi" }