ReviseAlgo Logo

Arrays & Iterables

Array Destructuring

Master JavaScript array destructuring. Learn basic index mapping, parameter skipping, nested destructuring, variable swapping, and rest operator patterns.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

Array Destructuring is an ES6 syntax that allows you to unpack values from arrays or iterables directly into distinct variables, matching elements by their index position.

2. Why It Matters

Destructuring simplifies code when working with functions that return multiple values (like React's useState hook) or when extracting coordinates and values from data arrays.

3. Real-World Analogy

Think of a Grocery Shopping Bag:

  • Traditional Access: Reaching into the bag, pulling out the first item (index 0), placing it on the counter, reaching back in for the second item, and repeating until empty.
  • Destructuring: Placing the bag on the counter and unpacking items directly into their designated spots in a single motion: "First item goes to the fridge, second goes to the pantry, and the remaining items stay in the bag" (Rest pattern).

4. How It Works

Array destructuring matches elements by their index position in the source array:

1. Basic Destructuring & Skipping:

Extract values sequentially, using commas to skip elements you don't need.

2. Variable Swapping:

Swap the values of two variables in a single statement without needing a temporary variable.

3. Nesting & Rest Patterns:

Extract values from nested arrays, and capture the remaining elements in a new array using the rest operator (...).

5. Practical Example

This script shows how to parse coordinate string data using destructuring:

6. Common Mistakes

  • Destructuring null or undefined: Attempting to destructure properties from null or undefined throws a TypeError. Always ensure the source value is defined, or provide an empty array default fallback.

7. Quick Quiz

Q1: How can you skip the second element when destructuring an array?

A) const [first, skip, third] = arr

B) const [first, , third] = arr

Answer: B — Leaving an empty slot between commas skips that element position during destructuring.

8. Scenario-Based Challenge

The CSV Row Parser:

An API processes CSV customer records: "Alice,Smith,30,London". Write a single destructuring statement to extract the first name, last name, and city into variables, skipping the age element.

9. Debugging Exercise

Explain why this attempt to swap values fails, and how to fix it:

let x = 10;
let y = 20;

[x, y] = [y, x] // missing preceding semicolon!
console.log(x); // crashes under certain environments! Why?
View Solution

Diagnosis: Without a preceding semicolon, the JavaScript engine interprets the code as trying to access properties on the value above the destructuring statement: let y = 20[x, y] = [y, x]. This triggers a runtime error.

Fix: Add a semicolon to complete the preceding statement before the destructuring assignment:

let x = 10;
let y = 20;


;[x, y] = [y, x];

10. Interview Questions

🟢 Q1: Explain how you can assign default values and use the rest operator together during array destructuring.

Answer:
• Default Values: You can assign a fallback value using the = syntax. If the element at that index is missing or evaluates to undefined, the variable is assigned the fallback value.
• Rest Operator (...): Placed at the end of the destructuring array, it captures all remaining elements into a new array. The rest operator must be the last item in the destructuring list.

11. Production Considerations

  • • Array Destructuring for Hooks: When designing custom hooks or helper functions that return multiple values, return an array if the caller needs to rename the variables (e.g. const [val, setVal] = useCustom()). Return an object instead if there are more than 3 return values to avoid positional arguments mistakes.