JavaScript Destructuring Explained — Arrays, Objects and Real-World Patterns

// ----- BASIC ARRAY DESTRUCTURING -----
const rgb = [255, 128, 0];

// Without destructuring — noisy and easy to get indices wrong
const redOld   = rgb[0];
const greenOld = rgb[1];
const blueOld  = rgb[2];

// With destructuring — one line, intent is obvious
const [red, green, blue] = rgb;
console.log(`RGB: ${red}, ${green}, ${blue}`);
// → RGB: 255, 128, 0


// ----- SKIPPING ELEMENTS WITH COMMAS -----
const coordinates = [40.7128, -74.0060, 10]; // lat, lng, altitude

// We only care about lat and lng — skip altitude with a trailing comma
const [latitude, longitude] = coordinates;
console.log(`Location: ${latitude}° N, ${longitude}° W`);
// → Location: 40.7128° N, -74.006° W


// ----- SKIPPING A MIDDLE ELEMENT -----
const topThreeScores = [980, 850, 720];

// Grab first and third — leave a gap for second
const [firstPlace, , thirdPlace] = topThreeScores;
console.log(`Gold: ${firstPlace}, Bronze: ${thirdPlace}`);
// → Gold: 980, Bronze: 720


// ----- REST OPERATOR — COLLECT REMAINING ITEMS -----
const playlist = ['Bohemian Rhapsody', 'Hotel California', 'Stairway to Heaven', 'Wonderwall'];

// First track plays now — everything else goes into a queue
const [nowPlaying, ...queue] = playlist;
console.log('Now playing:', nowPlaying);
console.log('Up next:', queue);
// → Now playing: Bohemian Rhapsody
// → Up next: ['Hotel California', 'Stairway to Heaven', 'Wonderwall']


// ----- SWAPPING VARIABLES — NO TEMP VARIABLE NEEDED -----
let playerOneScore = 42;
let playerTwoScore = 87;

// The right-hand side is evaluated first, then assigned
[playerOneScore, playerTwoScore] = [playerTwoScore, playerOneScore];
console.log(`P1: ${playerOneScore}, P2: ${playerTwoScore}`);
// → P1: 87, P2: 42


// ----- DEFAULT VALUES — SAFE UNPACKING -----
const userPreferences = ['dark']; // only theme is set, fontSize is missing

// 'md' is the fallback if the second element is undefined
const [theme = 'light', fontSize = 'md'] = userPreferences;
console.log(`Theme: ${theme}, Font: ${fontSize}`);
// → Theme: dark, Font: md

// ----- BASIC OBJECT DESTRUCTURING -----
const blogPost = {
  title: 'JavaScript Destructuring Explained',
  author: 'Jordan Lee',
  publishedAt: '2024-03-15',
  readTimeMinutes: 8
};

// Pull out only what we need — other keys are untouched
const { title, author, readTimeMinutes } = blogPost;
console.log(`"${title}" by ${author} — ${readTimeMinutes} min read`);
// → "JavaScript Destructuring Explained" by Jordan Lee — 8 min read


// ----- RENAMING ON EXTRACTION -----
// Imagine this came from a legacy API with snake_case keys
const apiUser = {
  user_id: 'u_8821',
  display_name: 'Alex Morgan',
  is_premium: true
};

// Rename: sourceKey: localVariableName
const { user_id: userId, display_name: displayName, is_premium: isPremium } = apiUser;
console.log(userId, displayName, isPremium);
// → u_8821 Alex Morgan true


// ----- DEFAULT VALUES WITH RENAMING -----
const serverConfig = {
  host: 'db.production.io'
  // port and timeout are missing — they might not always be sent
};

// Rename AND provide a fallback — colon renames, equals sets default
const {
  host: dbHost,
  port: dbPort = 5432,
  timeout: dbTimeout = 3000
} = serverConfig;

console.log(`Connecting to ${dbHost}:${dbPort} (timeout: ${dbTimeout}ms)`);
// → Connecting to db.production.io:5432 (timeout: 3000ms)


// ----- DESTRUCTURING IN FUNCTION PARAMETERS -----
// Before: you'd receive `options` and do options.width, options.height...
// After: your signature is self-documenting

function renderCard({ title, imageUrl, description = 'No description provided.', isPinned = false }) {
  // This function makes it immediately clear what shape of object it expects
  const pinLabel = isPinned ? '📌 ' : '';
  return `${pinLabel}${title}: ${description} [${imageUrl}]`;
}

const card = {
  title: 'Grand Canyon Sunset',
  imageUrl: 'https://cdn.example.com/gc-sunset.jpg'
  // description and isPinned are absent — defaults will apply
};

console.log(renderCard(card));
// → Grand Canyon Sunset: No description provided. [https://cdn.example.com/gc-sunset.jpg]


// ----- REST IN OBJECT DESTRUCTURING -----
const fullProfile = {
  id: 'p_4491',
  email: 'alex@example.com',
  bio: 'Engineer and coffee enthusiast',
  followers: 1204,
  following: 387
};

// Separate the identity fields from the stats — common when building a UI
const { id, email, ...profileStats } = fullProfile;
console.log('Identity:', id, email);
console.log('Stats:', profileStats);
// → Identity: p_4491 alex@example.com
// → Stats: { bio: 'Engineer and coffee enthusiast', followers: 1204, following: 387 }

// ----- NESTED OBJECT DESTRUCTURING -----
// Simulating a response from a weather API
const weatherResponse = {
  status: 'ok',
  location: {
    city: 'San Francisco',
    country: 'US',
    coordinates: { lat: 37.7749, lng: -122.4194 }
  },
  current: {
    tempCelsius: 18,
    condition: 'Partly Cloudy',
    humidity: 72
  }
};

// Reach two levels deep — city and tempCelsius — in one declaration
const {
  location: { city, country },
  current: { tempCelsius, condition }
} = weatherResponse;

console.log(`${city}, ${country}: ${tempCelsius}°C — ${condition}`);
// → San Francisco, US: 18°C — Partly Cloudy

// NOTE: 'location' and 'current' are NOT available as variables here.
// They're pattern keys, not bindings. This is a common gotcha!
// console.log(location); // undefined (or the window.location in browsers!)


// ----- COMBINING OBJECT AND ARRAY DESTRUCTURING -----
// A GitHub-style API response for a repository's top contributors
const repoData = {
  repoName: 'open-ui',
  stars: 4821,
  topContributors: [
    { username: 'chloe_dev', commits: 342 },
    { username: 'marco_eng', commits: 289 },
    { username: 'priya_codes', commits: 201 }
  ]
};

// Destructure the array of objects — grab top 2 contributors
const {
  repoName,
  topContributors: [
    { username: firstContributor, commits: firstCommits },
    { username: secondContributor }
  ]
} = repoData;

console.log(`${repoName} — Top contributor: ${firstContributor} (${firstCommits} commits)`);
console.log(`Runner up: ${secondContributor}`);
// → open-ui — Top contributor: chloe_dev (342 commits)
// → Runner up: marco_eng


// ----- PRACTICAL ALTERNATIVE: BREAK DEEP NESTING INTO STEPS -----
// This is EASIER to read and debug than going 3+ levels in one line

const apiResponse = {
  data: {
    user: {
      account: {
        plan: 'pro',
        renewalDate: '2025-01-15'
      }
    }
  }
};

// Step 1: get to the relevant level
const { data: { user: { account } } } = apiResponse; // two levels is our limit

// Step 2: destructure the part we care about
const { plan, renewalDate } = account;

console.log(`Plan: ${plan}, Renews: ${renewalDate}`);
// → Plan: pro, Renews: 2025-01-15


// ----- DESTRUCTURING IN A LOOP — REAL WORLD TABLE RENDERING -----
const transactions = [
  { id: 'txn_001', amount: 49.99, currency: 'USD', status: 'settled' },
  { id: 'txn_002', amount: 120.00, currency: 'EUR', status: 'pending' },
  { id: 'txn_003', amount: 8.50, currency: 'USD', status: 'settled' }
];

// Destructure each item inline in the for...of loop
for (const { id, amount, currency, status } of transactions) {
  const flag = status === 'settled' ? '✅' : '⏳';
  console.log(`${flag} ${id}: ${amount} ${currency}`);
}
// → ✅ txn_001: 49.99 USD
// → ⏳ txn_002: 120 EUR
// → ✅ txn_003: 8.5 USD