JavaScript: Object and Array Destructuring

Destructuring assignment is an ES6 syntax that allows you to unpack values from arrays, or properties from objects, into distinct variables. It makes extracting data heavily nested structures drastically cleaner.

How does destructuring work in JavaScript, and what are its most common use cases?

Interviewers look for your ability to extract properties, assign default values, use aliases (renaming variables), and handle nested data.

1. Object Destructuring

Object destructuring relies on property names (keys). The variable name you declare must match the key in the object.

Basic Extraction

const user = { name: "Alice", age: 28, role: "Engineer" };
 
// Instead of: const name = user.name; const age = user.age;
const { name, age } = user;
 
console.log(name); // "Alice"
console.log(age);  // 28

Aliasing (Renaming Variables)

If you want to extract a property but assign it to a variable with a different name, use a colon (:).

const user = { name: "Alice", role: "Engineer" };
 
const { name: fullName, role: jobTitle } = user;
 
console.log(fullName); // "Alice"
console.log(jobTitle); // "Engineer"

Default Values

If you try to destructure a property that doesn't exist, it evaluates to undefined. You can assign a fallback default value using =.

const user = { name: "Alice" };
 
const { name, status = "Offline", age = 18 } = user;
 
console.log(status); // "Offline" (default value applied)

Nested Destructuring

You can extract values from deeply nested objects by mirroring the structure.

const response = {
  data: {
    user: { id: 1, name: "Alice" }
  }
};
 
const { data: { user: { name } } } = response;
console.log(name); // "Alice"

2. Array Destructuring

Unlike objects, array destructuring relies on order/position, not keys.

Basic Extraction

const colors = ["Red", "Green", "Blue"];
 
const [primary, secondary] = colors;
 
console.log(primary);   // "Red"
console.log(secondary); // "Green"

Skipping Elements

You can skip elements in the array by leaving empty spaces between commas.

const colors = ["Red", "Green", "Blue", "Yellow"];
 
const [first, , third] = colors;
 
console.log(first); // "Red"
console.log(third); // "Blue"

Using the Rest Operator

You can gather the remaining elements into a new array using the Rest operator (...).

const scores = [98, 85, 72, 60];
 
const [highest, ...others] = scores;
 
console.log(highest); // 98
console.log(others);  // [85, 72, 60]

3. Function Parameter Destructuring

The most powerful use case for destructuring in modern frontend development (especially React) is unpacking function parameters directly in the signature.

// Without Destructuring
function printUser(user) {
  console.log(`${user.name} is ${user.age} years old.`);
}
 
// With Destructuring & Default Values
function printUser({ name, age = 18 }) {
  console.log(`${name} is ${age} years old.`);
}
 
printUser({ name: "Alice" }); // "Alice is 18 years old."

Senior-Level Interview Answer

Destructuring assignment provides a concise syntax for unpacking values from arrays and properties from objects into distinct variables. Object destructuring relies on matching property keys and allows for aliasing (key: newName) and defaulting (key = value). Array destructuring relies strictly on positional index and seamlessly integrates with the rest operator to capture trailing elements. Destructuring is heavily utilized in modern component architectures (like React) to cleanly unpack props and standard API JSON payloads directly within function signatures, drastically reducing boilerplate code and improving readability.

Common Interview Mistakes

❌ Confusing Object Aliasing with Default Values

Candidates often mix up : and = when destructuring objects.

• key: value renames the variable (Alias).
• key = value assigns a fallback if undefined (Default).

const { name: fullName = "Unknown" } = user; 
// Extracts 'name', renames it to 'fullName', defaults to 'Unknown' if undefined.

❌ Getting undefined when skipping array elements

If you destructure beyond the bounds of an array, you get undefined, not an error.

const [a, b, c] = [1, 2];
console.log(c); // undefined