10 Common JavaScript Destructuring Pitfalls and How to Avoid Them

JavaScript's destructuring assignment, introduced in ES6, is a handy feature for extracting values from arrays or objects, but it hides many pitfalls.

1. Destructuring an undefined object

// This code will throw an error
const { name, age } = userData;

If userData is undefined or null, the code throws a "Cannot destructure property 'name' of 'userData' as it is undefined" error.

Avoidance: Use default values or conditional checks.

// Method 1: Default to an empty object
const { name, age } = userData || {};

// Method 2: Optional chaining
const name = userData?.name;
const age = userData?.age;

2. Confusion when renaming variables

const obj = { a: 1, b: 2 };
const { a: x, b } = obj;

console.log(a); // ReferenceError: a is not defined
console.log(x); // 1

During renaming, the left side of the colon is the original property name and the right side is the new variable name; mixing the order leads to errors.

3. Readability trap of nested destructuring

const { user: { profile: { firstName, lastName }, account: { id } } } = response;

Deeply nested destructuring can greatly reduce readability and make maintenance harder.

Avoidance: Use nested destructuring moderately or split into multiple steps.

const { user } = response;
const { profile, account } = user;
const { firstName, lastName } = profile;
const { id } = account;

4. Empty slots in array destructuring

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

Skipping array elements with empty commas can make code hard to read, especially when many gaps exist.

5. Mixing destructuring with function parameter defaults

Combining parameter defaults with destructuring defaults can be confusing when distinguishing between "parameter not provided" and "parameter provided with undefined value".

6. Accidentally using an object literal as the destructuring target

Correct approach is to destructure from an existing variable, not an inline object literal.

7. Rest element placed incorrectly in destructuring

const [first, ...rest, last] = [1, 2, 3, 4];
// SyntaxError: Rest element must be last element

The rest element must be the final element in the pattern; otherwise a syntax error occurs.

8. Return value of a destructuring expression

The value of a destructuring assignment is the right‑hand side object itself, not the set of extracted variables—a common misconception.

9. Conflict between object property names and existing variables

If a destructured property name matches an existing variable, the original variable gets overwritten, potentially causing unexpected behavior.

10. Performance issues when destructuring large objects

Frequent destructuring of large or deeply nested objects can incur performance overhead, especially in critical code paths.

Avoidance: Destructure only the needed properties and avoid unnecessary operations.

// Bad: destructure everything
const { a, b, c, ...rest } = hugeObject;

// Good: only destructure what you need
const { a } = hugeObject;

Feel free to add more examples.