JavaScript Destructuring Patterns

Destructuring extracts values from arrays and objects cleanly. Here's how to use it effectively.

Array Destructuring#

// Basic array destructuring
const colors = ['red', 'green', 'blue'];
const [first, second, third] = colors;
// first = 'red', second = 'green', third = 'blue'

// Skip elements
const [primary, , tertiary] = colors;
// primary = 'red', tertiary = 'blue'

// Rest pattern
const numbers = [1, 2, 3, 4, 5];
const [head, ...tail] = numbers;
// head = 1, tail = [2, 3, 4, 5]

// Default values
const sparse = [1];
const [a, b = 10] = sparse;
// a = 1, b = 10

// Swapping variables
let x = 1, y = 2;
[x, y] = [y, x];
// x = 2, y = 1

// From functions
function getCoordinates() {
  return [10, 20];
}
const [coordX, coordY] = getCoordinates();

Object Destructuring#

// Basic object destructuring
const user = { name: 'Alice', age: 30, email: 'alice@example.com' };
const { name, age } = user;
// name = 'Alice', age = 30

// Renaming variables
const { name: userName, age: userAge } = user;
// userName = 'Alice', userAge = 30

// Default values
const config = { host: 'localhost' };
const { host, port = 3000 } = config;
// host = 'localhost', port = 3000

// Rename with default
const { port: serverPort = 8080 } = config;
// serverPort = 8080

// Rest pattern
const { name: n, ...rest } = user;
// n = 'Alice', rest = { age: 30, email: 'alice@example.com' }

// Computed property names
const key = 'name';
const { [key]: value } = user;
// value = 'Alice'

Nested Destructuring#

// Nested objects
const company = {
  name: 'TechCorp',
  address: {
    city: 'San Francisco',
    country: 'USA',
  },
  employees: [
    { name: 'Alice', role: 'Engineer' },
    { name: 'Bob', role: 'Designer' },
  ],
};

const {
  name: companyName,
  address: { city, country },
} = company;
// companyName = 'TechCorp', city = 'San Francisco', country = 'USA'

// Nested arrays
const matrix = [[1, 2], [3, 4], [5, 6]];
const [[a, b], [c, d]] = matrix;
// a = 1, b = 2, c = 3, d = 4

// Mixed nesting
const {
  employees: [firstEmployee, secondEmployee],
} = company;
// firstEmployee = { name: 'Alice', role: 'Engineer' }

// Deep extraction
const {
  employees: [{ name: firstName }],
} = company;
// firstName = 'Alice'

Function Parameters#

// Object parameters
function createUser({ name, age, email = 'default@email.com' }) {
  return { name, age, email };
}

createUser({ name: 'Alice', age: 30 });

// With defaults for entire parameter
function greet({ name = 'Guest', greeting = 'Hello' } = {}) {
  return `${greeting}, ${name}!`;
}

greet(); // 'Hello, Guest!'
greet({ name: 'Alice' }); // 'Hello, Alice!'

// Array parameters
function sum([first, second, ...rest]) {
  return first + second + rest.reduce((a, b) => a + b, 0);
}

sum([1, 2, 3, 4]); // 10

// React component props
function UserCard({ name, avatar, role = 'User' }) {
  return (
    <div>
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <span>{role}</span>
    </div>
  );
}

Advanced Patterns#

// Multiple return values
function getMinMax(arr) {
  return {
    min: Math.min(...arr),
    max: Math.max(...arr),
  };
}

const { min, max } = getMinMax([1, 5, 3, 9, 2]);

// Optional chaining with destructuring
const data = { user: null };
const { user: { name } = {} } = data;
// name = undefined (no error)

// Destructuring in loops
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

for (const { id, name } of users) {
  console.log(`${id}: ${name}`);
}

// Map entries
const map = new Map([
  ['a', 1],
  ['b', 2],
]);

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

// Regex groups
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = regex.exec('2024-01-15');
const { groups: { year, month, day } } = match;

Practical Examples#

// API response handling
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const { data: user, meta: { timestamp } } = await response.json();
  return { user, timestamp };
}

// Event handling
document.addEventListener('click', ({ target, clientX, clientY }) => {
  console.log(`Clicked ${target.tagName} at (${clientX}, ${clientY})`);
});

// Module imports
import { useState, useEffect, useCallback } from 'react';

// Configuration objects
function initApp({
  port = 3000,
  host = 'localhost',
  debug = false,
  database: {
    url = 'mongodb://localhost',
    name = 'mydb',
  } = {},
} = {}) {
  console.log(`Starting on ${host}:${port}`);
  console.log(`Database: ${url}/${name}`);
  console.log(`Debug: ${debug}`);
}

initApp({
  port: 8080,
  database: { name: 'production' },
});

// React hooks
function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = ({ target: { name, value } }) => {
    setValues(prev => ({ ...prev, [name]: value }));
  };

  return { values, handleChange };
}

Combining with Spread#

// Clone and modify
const original = { a: 1, b: 2, c: 3 };
const { a, ...withoutA } = original;
const modified = { ...withoutA, d: 4 };
// { b: 2, c: 3, d: 4 }

// Merge with override
const defaults = { theme: 'light', lang: 'en' };
const userPrefs = { theme: 'dark' };
const { theme, lang } = { ...defaults, ...userPrefs };
// theme = 'dark', lang = 'en'

// Pick properties
function pick(obj, keys) {
  return keys.reduce((acc, key) => {
    if (key in obj) acc[key] = obj[key];
    return acc;
  }, {});
}

// Omit properties
function omit(obj, keys) {
  const keysSet = new Set(keys);
  return Object.fromEntries(
    Object.entries(obj).filter(([key]) => !keysSet.has(key))
  );
}

// Usage
const user = { id: 1, name: 'Alice', password: 'secret' };
const safeUser = omit(user, ['password']);
// { id: 1, name: 'Alice' }

Error Handling#

// Safe destructuring with defaults
function processData(data) {
  const {
    items = [],
    meta: { page = 1, total = 0 } = {},
  } = data || {};

  return { items, page, total };
}

// Handles: null, undefined, missing properties
processData(null); // { items: [], page: 1, total: 0 }
processData({}); // { items: [], page: 1, total: 0 }
processData({ items: [1, 2] }); // { items: [1, 2], page: 1, total: 0 }

// Try-catch for complex cases
function safeDestructure(obj, path, defaultValue) {
  try {
    const keys = path.split('.');
    let result = obj;
    for (const key of keys) {
      result = result[key];
    }
    return result ?? defaultValue;
  } catch {
    return defaultValue;
  }
}

TypeScript Destructuring#

// Typed destructuring
interface User {
  name: string;
  age: number;
  email?: string;
}

function greet({ name, age }: User): string {
  return `Hello ${name}, you are ${age}`;
}

// With defaults
function createUser({
  name,
  age,
  email = 'default@email.com',
}: Partial<User> & { name: string }) {
  return { name, age, email };
}

// Array types
function processCoords([x, y]: [number, number]): number {
  return x + y;
}

// Rest with types
function logAll({ name, ...rest }: User & Record<string, unknown>) {
  console.log(name, rest);
}

Best Practices#

Readability:
✓ Keep destructuring shallow when possible
✓ Use meaningful variable names
✓ Add defaults for optional values
✓ Break complex patterns into steps

Safety:
✓ Provide defaults for nested objects
✓ Use || {} for potentially undefined
✓ Consider optional chaining
✓ Validate before destructuring

Performance:
✓ Destructure only what you need
✓ Avoid repeated destructuring
✓ Use rest sparingly in hot paths
✓ Profile complex patterns

Avoid:
✗ Deeply nested destructuring
✗ Destructuring in loops (sometimes)
✗ Confusing rename chains
✗ Missing defaults for optional props

Destructuring makes code cleaner and more expressive. Use array destructuring for ordered data, object destructuring for named properties, and combine with defaults for safety. Keep patterns simple and readable, especially with nested structures.