JavaScript Destructuring & Spread

Extract values from arrays/objects and merge them easily.

Array Destructuring

let [a, b, c] = [1, 2, 3];       // a=1, b=2, c=3
let [first, , third] = [1, 2, 3]; // skip: first=1, third=3
let [head, ...tail] = [1, 2, 3];  // head=1, tail=[2, 3]
let [x = 10, y = 20] = [1];       // x=1, y=20 (default)

Tip: Use defaults to handle missing values gracefully.

Object Destructuring

let { name, age } = { name: "John", age: 25 };

// Rename variables
let { name: userName, age: userAge } = { name: "John", age: 25 };

// Default values
let { name, age, city = "NYC" } = { name: "John", age: 25 };

// Rest pattern
let { name, ...details } = { name: "John", age: 25, city: "NYC" };
// details = { age: 25, city: "NYC" }

Spread (Arrays)

let arr1 = [1, 2, 3];
let arr2 = [...arr1];             // copy
let merged = [...arr1, ...arr2];  // merge
let chars = [..."hello"];         // string → array

Spread (Objects)

let defaults = { theme: "light", language: "en" };
let userSettings = { theme: "dark" };
let settings = { ...defaults, ...userSettings };
// { theme: "dark", language: "en" }

Remember: Later properties override earlier ones with the same key.

Complete Example: Data Transformation

let users = [
  { name: "John", city: "NYC" },
  { name: "Jane", city: "LA" }
];

// Destructure directly in callbacks
let names = users.map(({ name }) => name);
// ["John", "Jane"]

// Group by city
let grouped = users.reduce((groups, { city, ...rest }) => {
  if (!groups[city]) groups[city] = [];
  groups[city].push(rest);
  return groups;
}, {});

Complete Example: Array Utilities

// Remove duplicates
let unique = ([...new Set([1, 2, 2, 3])]); // [1, 2, 3]

// Chunk array
function chunk(arr, size) {
  let chunks = [];
  for (let i = 0; i < arr.length; i += size) {
    chunks.push(arr.slice(i, i + size));
  }
  return chunks;
}

chunk([1, 2, 3, 4, 5], 2); // [[1, 2], [3, 4], [5]]

Best Practices

1. Use destructuring for extraction — cleaner code
2. Use spread for copying — avoids mutation
3. Use rest for remaining — collect leftovers
4. Use defaults — handle missing values

Common Mistakes

1. Forgetting {} for objects — array destructuring uses []
2. Not handling undefined — use defaults
3. Mutating original — use spread to copy
4. Overcomplicating — keep it readable