Destructuring — Arrays & Objects

Destructuring pulls values out of arrays or objects into variables in one line. React props, API responses, and function parameters all use this pattern: const { name, email } = user.

Array destructuring

const colors = ['red', 'green', 'blue'];
const [first, second] = colors;
// first = 'red', second = 'green'

const [, , third] = colors;  // skip first two
// third = 'blue'

const [head, ...rest] = colors;
// head = 'red', rest = ['green', 'blue']

Object destructuring

const user = { id: 42, name: 'Alex', email: 'alex@toolliyo.com', role: 'student' };

const { name, email } = user;
const { role: userRole } = user;  // rename to userRole

// Default if missing
const { phone = 'N/A' } = user;

async function showProfile(response) {
  const data = await response.json();
  const { name, email, plan = 'free' } = data.user;

  return `${name} (${email}) — ${plan} plan`;
}

// Simulated API object:
showProfile({
  json: async () => ({ user: { name: 'Ravi', email: 'ravi@example.com' } })
});

Destructuring in function parameters

function printOrder({ orderId, items, total }) {
  console.log(`Order #${orderId}: ${items.length} items, ₹${total}`);
}

printOrder({ orderId: 'A100', items: [1, 2], total: 1498 });