Destructuring Arrays and Objects0%
Default Parameters

Destructuring Arrays and Objects

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Destructuring Arrays and Objects in Depth

Destructuring is an expressive ES6 syntax that unpacks values from arrays or properties from objects into distinct variables. It significantly reduces boilerplate code and is ubiquitous in modern JavaScript and React development.

1. Object Destructuring

Object destructuring extracts properties by their matching key names:

JavaScript
const student = {
id: 101,
fullName: "Sumit Sharma",
city: "New Delhi",
role: "Instructor"
};
 
// Basic destructuring:
const { fullName, role } = student;
console.log(fullName); // "Sumit Sharma"
console.log(role); // "Instructor"

A. Renaming Variables During Destructuring:

Use the colon syntax (originalKey: newVariableName):

JavaScript
const { fullName: studentName, city: location } = student;
console.log(studentName); // "Sumit Sharma"
console.log(location); // "New Delhi"

B. Default Values:

Provide fallback values if the property is undefined:

JavaScript
const { score = 100, isGraduated = false } = student;
console.log(score); // 100 (Default applied!)

C. Nested Object Destructuring:

JavaScript
const user = {
id: 5,
profile: {
avatar: "sumit.png",
social: {
github: "sumit-msk"
}
}
};
 
const { profile: { social: { github } } } = user;
console.log(github); // "sumit-msk"

2. Array Destructuring

Array destructuring extracts elements based on their numerical position (index):

JavaScript
const coordinates = [28.6139, 77.2090];
 
// Destructure by position:
const [latitude, longitude] = coordinates;
console.log(`Lat: ${latitude}, Lng: ${longitude}`);

A. Skipping Elements:

Use commas without variable names to skip unwanted positions:

JavaScript
const rgb = [255, 128, 0];
const [red, , blue] = rgb; // Skips green at index 1!
console.log(`Red: ${red}, Blue: ${blue}`);

B. Swapping Variables Without a Temporary Variable:

One of the most elegant tricks in JavaScript:

JavaScript
let a = 1;
let b = 2;
 
// In-place swap using array destructuring:
[a, b] = [b, a];
 
console.log(a); // 2
console.log(b); // 1

3. Destructuring in Function Parameters (React Pattern)

In React and modern JavaScript libraries, functions destructure props directly in the parameter signature:

JavaScript
// Clean parameter destructuring with default fallback:
function renderUserBadge({ name, tier = "Standard", badgeColor = "#38bdf8" }) {
console.log(`[${tier.toUpperCase()}] ${name} (Color: ${badgeColor})`);
}
 
renderUserBadge({ name: "Neha", tier: "Gold" });
// [GOLD] Neha (Color: #38bdf8)
Interactive Quiz

Practice Quiz

Question 1
In object destructuring, how do you assign property name to a new variable called studentName?
Question 2
What is the value of b after: const [a, , b] = [10, 20, 30, 40];?
Question 3
How can two variables x and y be swapped in one clean line without using a third temporary variable?
Question 4
What happens if you destructure a property that does not exist on an object and has no default value?
Question 5
What is the benefit of destructuring an options object directly in function parameters?
Next Lesson

Default Parameters

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Template LiteralsDefault Parameters

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext