Advanced Array and Object Destructuring Guide

An advanced guide to JavaScript destructuring. Goes beyond basics to cover nested destructuring, default values, skipping elements, mixed array/object patterns, destructuring in function parameters, iterables, and powerful real-world patterns for API payloads and configuration objects.

JavaScriptintermediate

RuneHub Team

March 2, 2026

13 min read

RuneHub Team

Mar 2, 2026

13 min read

Destructuring is one of ES6's most expressive features. Beyond basic variable extraction, it supports nested patterns, default values, rest elements, mixed array/object shapes, and elegant function parameter contracts. This guide covers the full power of destructuring for writing concise, readable JavaScript.

Quick Foundations

javascript

// Array destructuring
const [a, b, c] = [10, 20, 30];
// a=10, b=20, c=30
 
// Object destructuring
const { name, age } = { name: "Alice", age: 30 };
// name="Alice", age=30

These are the basics. Everything beyond them is the subject of this guide.

Default Values

Defaults apply when the destructured value is undefined:

javascript

// Array defaults
const [x = 0, y = 0, z = 0] = [10, 20];
// x=10, y=20, z=0 (default used)
 
// Object defaults
const { width = 100, height = 200, color = "blue" } = { width: 300 };
// width=300, height=200 (default), color="blue" (default)
 
// Default can be any expression
const { timeout = Date.now(), retries = Math.max(1, 3) } = {};
// Evaluated lazily — only when needed
 
// null does NOT trigger defaults (only undefined does)
const { a = "default" } = { a: null };
// a = null — NOT "default", because null !== undefined

Renaming Variables During Destructuring

Using a colon to extract with a different local name:

javascript

const { name: userName, age: userAge } = { name: "Bob", age: 25 };
// userName="Bob", userAge=25 — name and age are NOT created as variables
 
// Combine renaming with defaults
const { status: code = 200, body: content = "" } = response;

For a dedicated, deep-dive article on this pattern, see renaming variables during JS destructuring.

Skipping Elements in Arrays

Use commas to skip array positions:

javascript

const [first, , third, , fifth] = [10, 20, 30, 40, 50];
// first=10, third=30, fifth=50 (20 and 40 are skipped)
 
// Skip to the last element
const [,,,, last] = [1, 2, 3, 4, 5];
// last=5
 
// Swap variables without temp variable
let p = 1, q = 2;
[p, q] = [q, p]; // p=2, q=1

Rest Elements

...rest captures remaining elements:

javascript

// Array rest
const [head, ...tail] = [1, 2, 3, 4, 5];
// head=1, tail=[2, 3, 4, 5]
 
// Object rest
const { name, age, ...rest } = { name: "Alice", age: 30, role: "admin", active: true };
// name="Alice", age=30, rest={ role: "admin", active: true }
 
// Omit specific fields
const { password, ...safeUser } = user; // Remove sensitive field

Nested Destructuring

Destructure objects inside objects:

javascript

const user = {
  id: 1,
  name: "Alice",
  address: {
    city: "New York",
    country: "USA",
    zip: "10001",
  },
  role: {
    name: "admin",
    permissions: ["read", "write", "delete"],
  },
};
 
const {
  name,
  address: { city, zip },       // Nested object destructuring
  role: { name: roleName },     // Nested with rename
} = user;
 
// name="Alice", city="New York", zip="10001", roleName="admin"
// Note: "address" and "role" are NOT bound as variables here

Nested Array Destructuring

javascript

const matrix = [[1, 2], [3, 4], [5, 6]];
const [[r1c1, r1c2], [r2c1], [, r3c2]] = matrix;
// r1c1=1, r1c2=2, r2c1=3, r3c2=6
 
// Coordinates
const [
  [startX, startY],
  [endX, endY]
] = [[10, 20], [80, 90]];
// startX=10, startY=20, endX=80, endY=90

Mixed Array/Object Destructuring

Real-world data often mixes arrays and objects:

javascript

const apiResponse = {
  status: 200,
  data: {
    users: [
      { id: 1, name: "Alice", scores: [85, 92, 78] },
      { id: 2, name: "Bob",   scores: [70, 88, 95] },
    ],
    pagination: { page: 1, total: 100 },
  },
};
 
const {
  status,
  data: {
    users: [
      { name: firstName, scores: [score1] }, // First user's first score
      { name: secondName },                   // Second user's name
    ],
    pagination: { page, total },
  },
} = apiResponse;
 
// status=200, firstName="Alice", score1=85, secondName="Bob", page=1, total=100

Destructuring in Function Parameters

Function parameter destructuring is extremely common for option objects and API responses:

javascript

// Object destructuring in params
function createUser({ name, email, role = "user", active = true }) {
  return { name, email, role, active, id: Math.random().toString(36) };
}
 
createUser({ name: "Alice", email: "alice@example.com" });
// role="user", active=true from defaults
 
// With rename in params
function display({ firstName: name, score: points = 0 }) {
  return `${name}: ${points} pts`;
}
 
// Array destructuring in params
function swap([a, b]) { return [b, a]; }
swap([1, 2]); // [2, 1]
 
// Nested in params
function processItem({ id, metadata: { tags = [], priority = "low" } = {} }) {
  return { id, tags, priority };
}

Destructuring Iterable Objects

Destructuring works with any iterable, not just arrays:

javascript

// String (iterable)
const [first, second, ...rest] = "Hello";
// first="H", second="e", rest=["l","l","o"]
 
// Set
const [a, b, c] = new Set([10, 20, 30]);
// a=10, b=20, c=30 (insertion order)
 
// Map entries
const map = new Map([["x", 1], ["y", 2]]);
for (const [key, value] of map) {
  console.log(key, value); // "x" 1, then "y" 2
}
 
// Generator
function* range(start, end) {
  for (let i = start; i <= end; i++) yield i;
}
const [first3, , third3] = range(1, 10);
// first3=1, third3=3

Real-World Patterns

Extracting from API Responses

javascript

async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const { data: { user }, status, errors = [] } = await response.json();
 
  if (errors.length) throw new Error(errors[0].message);
  return user;
}

Configuration With Defaults

javascript

function connect({
  host = "localhost",
  port = 5432,
  database,
  ssl = false,
  pool: { min = 2, max = 10 } = {},
} = {}) {
  console.log(`Connecting to ${host}:${port}/${database} (SSL: ${ssl})`);
  console.log(`Pool: ${min}-${max} connections`);
}
 
connect({ database: "mydb" });
// Uses all defaults except database

The = {} at the end of the parameter means the function can be called with no arguments at all.

Rune AI

Key Insights

Defaults fire only on undefined, not null: const { x = 10 } = { x: null } gives x = null — only an absent or undefined property triggers the default
Nested destructuring skips binding intermediate names: const { a: { b } } = obj binds b but NOT a — intermediate paths are navigation syntax, not variable declarations
Rest in destructuring collects the remainder: [...rest] in arrays and { ...rest } in objects gather remaining elements — useful for omitting sensitive fields or splitting option objects
Function parameter destructuring replaces options abuse: Declaring ({ timeout = 5000, retries = 3 } = {}) in a parameter makes defaults declarative and self-documenting
Works with any iterable: Destructuring is powered by the iterator protocol — arrays, strings, Sets, Maps, and generators are all valid right-hand sides

Frequently Asked Questions

What happens when destructuring undefined or null?

Destructuring `undefined` throws a `TypeError` ("Cannot destructure property X of undefined"). Destructuring `null` also throws. Use default values or optional chaining: `const { x } = value ?? {}` to safely handle `null`/`undefined`.

Can I destructure in a for...of loop?

Yes. `for (const { name, id } of users)` is idiomatic and very common. `for (const [key, value] of Object.entries(obj))` is standard for iterating object entries.

Does destructuring create copies or references?

Destructuring extracts bindings to the same values. For primitives, you get copies. For objects and arrays, you get references to the same memory — mutating the destructured variable mutates the original.

Can destructuring be used in catch clauses?

No — `catch` requires a simple identifier: `catch (e)`. You can destructure inside the catch body: `const { message, code } = e;`.

Conclusion

Advanced destructuring dramatically reduces the boilerplate of extracting values from complex data structures. Default values, renaming, nesting, skipping, rest collection, and parameter destructuring combine to handle real-world data cleanly. The most powerful applications are function parameter contracts (avoiding options.timeout || 5000 chains) and extracting deeply nested API response data in a single declaration. Pair this with renaming variables during destructuring for the complete picture on naming control.

Advanced Array and Object Destructuring Guide

Quick Foundations

Default Values

Renaming Variables During Destructuring

Skipping Elements in Arrays

Rest Elements

Nested Destructuring

Nested Array Destructuring

Mixed Array/Object Destructuring

Destructuring in Function Parameters

Destructuring Iterable Objects

Real-World Patterns

Extracting from API Responses

Configuration With Defaults

Rune AI

Frequently Asked Questions

What happens when destructuring undefined or null?

Can I destructure in a for...of loop?

Does destructuring create copies or references?

Can destructuring be used in catch clauses?

Conclusion

Tags

More in this topic

OffscreenCanvas API in JS for UI Performance

Advanced Web Workers for High Performance JS

JavaScript Macros and Abstract Code Generation

Stay Updated