Destructuring And Spread

Modern JavaScript gives you two closely related features that change how you work with arrays and objects: destructuring and the spread operator. They show up constantly in real codebases — in React components, API responses, function arguments, and data transformations.

Once you understand them, you will wonder how you lived without them.

Array Destructuring

Destructuring lets you pull values out of arrays and objects into named variables. Instead of accessing items by index, you describe the shape you want and JavaScript fills in the values.

const colors = ["red", "green", "blue"];

// Old way
const first = colors[0];
const second = colors[1];

// Destructuring
const [primary, secondary, tertiary] = colors;

console.log(primary);   // "red"
console.log(secondary); // "green"
console.log(tertiary);  // "blue"

// Skip elements with commas
const [, , last] = colors;
console.log(last); // "blue"

// Default values when the array is shorter than expected
const [a, b, c, d = "yellow"] = colors;
console.log(d); // "yellow"

This is particularly useful when a function returns multiple values packaged as an array. Promise.all, coordinate pairs, and many utility functions follow this pattern.

Object Destructuring

Object destructuring works the same way but uses property names instead of positions. You write the keys you want inside curly braces, and JavaScript extracts them.

const user = {
  name: "Ada Lovelace",
  age: 36,
  role: "engineer",
  location: "London"
};

// Pull out specific properties
const { name, role } = user;
console.log(name); // "Ada Lovelace"
console.log(role); // "engineer"

// Rename while destructuring
const { name: fullName, age: yearsOld } = user;
console.log(fullName);  // "Ada Lovelace"
console.log(yearsOld);  // 36

// Default values
const { name: username, verified = false } = user;
console.log(verified); // false — not in the object, so default applies

// Nested destructuring
const config = {
  server: {
    host: "localhost",
    port: 3000
  }
};

const { server: { host, port } } = config;
console.log(host); // "localhost"
console.log(port); // 3000

Renaming is handy when variable names would collide, or when the original key names are not descriptive in context.

Destructuring In Function Parameters

One of the most common uses of destructuring is in function signatures. Instead of receiving an object and then accessing its properties manually, you destructure directly in the parameter list.

// Without destructuring
function greet(user) {
  return `Hello, ${user.name}! You are ${user.age} years old.`;
}

// With destructuring in parameters
function greetUser({ name, age, role = "member" }) {
  return `Hello, ${name}! You are ${age} years old and a ${role}.`;
}

const person = { name: "Grace Hopper", age: 85, role: "admiral" };
console.log(greetUser(person));
// "Hello, Grace Hopper! You are 85 years old and a admiral."

// Works with inline objects too
console.log(greetUser({ name: "Alan", age: 41 }));
// "Hello, Alan! You are 41 years old and a member."

This pattern is everywhere in React — component props are almost always destructured in the function signature.

The Spread Operator

The spread operator (...) does the opposite of destructuring. Instead of unpacking a collection into variables, it expands a collection into individual elements. It works with both arrays and objects.

// Spread with arrays
const fruits = ["apple", "banana"];
const moreFruits = ["cherry", "date"];

const allFruits = [...fruits, ...moreFruits];
console.log(allFruits);
// ["apple", "banana", "cherry", "date"]

// Copy an array without mutating the original
const original = [1, 2, 3];
const copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3] — unchanged
console.log(copy);     // [1, 2, 3, 4]

// Spread with objects
const defaults = { theme: "light", fontSize: 14, language: "en" };
const userPrefs = { fontSize: 18, language: "fr" };

// Merge objects — later keys override earlier ones
const finalSettings = { ...defaults, ...userPrefs };
console.log(finalSettings);
// { theme: "light", fontSize: 18, language: "fr" }

// Add new properties while spreading
const updatedUser = { ...defaults, showNotifications: true };
console.log(updatedUser);
// { theme: "light", fontSize: 14, language: "en", showNotifications: true }

Object spread is how you update state immutably in React and other frameworks — create a new object with existing values plus your changes, never mutating the original.

The Rest Operator

The same ... syntax used in a different position becomes the rest operator. Instead of spreading values out, it collects the remaining ones.

In arrays, rest collects everything after the named variables. In objects, it collects all properties not explicitly destructured.

// Rest in array destructuring
const [head, ...tail] = [10, 20, 30, 40, 50];
console.log(head); // 10
console.log(tail); // [20, 30, 40, 50]

// Rest in object destructuring
const { name, age, ...rest } = {
  name: "Linus",
  age: 54,
  country: "Finland",
  language: "C"
};
console.log(name); // "Linus"
console.log(rest); // { country: "Finland", language: "C" }

// Rest in function parameters — collects all arguments
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2, 3));        // 6
console.log(sum(10, 20, 30, 40)); // 100

Rest parameters replace the old arguments object and are far easier to work with because they are a real array.

Try It Yourself

You have an array of product objects from an API. Transform them using destructuring and spread to produce a clean summary list.

const products = [
  { id: 1, name: "Notebook", price: 4.99, stock: 120, category: "stationery" },
  { id: 2, name: "Pen Set", price: 9.99, stock: 0, category: "stationery" },
  { id: 3, name: "Desk Lamp", price: 34.99, stock: 15, category: "electronics" }
];

// Destructure each product and build a summary
const summaries = products.map(({ name, price, stock }) => ({
  name,
  price: `$${price.toFixed(2)}`,
  available: stock > 0
}));

console.log(summaries);

// Merge a price update into a specific product without mutating original
const priceUpdate = { price: 39.99 };
const updatedLamp = { ...products[2], ...priceUpdate };
console.log(updatedLamp);

// Split first product from the rest
const [featured, ...others] = products;
console.log("Featured:", featured.name);
console.log("Others:", others.map(({ name }) => name));

Try modifying the code: add a discount property to every product using spread, or destructure the category from each product and group them.

Key Takeaways

Array destructuring unpacks values by position; use commas to skip elements and = default for fallbacks
Object destructuring unpacks values by key name; use key: alias to rename and key = default for missing properties
Function parameter destructuring makes signatures self-documenting and eliminates repetitive options.x access patterns
Spread (...collection) expands arrays or objects into a new context — great for copying, merging, and adding properties immutably
Rest (...name on the receiving end) collects remaining elements — works in destructuring assignments and function parameters
Spread and rest use the same ... syntax but mean opposite things depending on where they appear
Object spread copies only the top level — nested objects are still shared references, not deep clones

Pro Tip: When merging objects with spread, order matters — later properties overwrite earlier ones. Put your defaults first and your overrides last: { ...defaults, ...userOptions }. This is the idiomatic way to write configurable functions that accept optional settings without requiring every key to be provided.