Spread Operator — Shallow Merge That Killed User Settings

Every modern JavaScript codebase is full of three little dots — ... — and for good reason. Whether you're merging objects in a Redux reducer, passing dynamic arguments to a function, or cloning arrays without mutating the original, the spread and rest operators are doing the heavy lifting. They're not just syntactic sugar; they fundamentally change how you think about data flow in JavaScript.

Before ES6 introduced these operators, copying arrays meant using .slice(), merging objects required Object.assign(), and handling variable-length function arguments meant wrestling with the awkward arguments object. That code was verbose, error-prone, and frankly hard to read at a glance. The ... syntax replaced all of that with something readable enough that your intent is obvious the moment someone looks at your code.

By the end of this article you'll know the difference between spread and rest at a conceptual level (not just syntactically), you'll recognise the real-world patterns where each one shines, you'll understand the gotchas that trip up even experienced developers, and you'll be ready to answer the interview questions that separate candidates who 'know the syntax' from those who actually understand JavaScript.

Spread Operator: Unpacking Collections Where You Need Individual Items

The spread operator takes an iterable — an array, a string, a Set, or any object with a Symbol.iterator — and expands it in-place. Think of it as opening a bag and tipping everything out onto the table.

The most important word there is 'in-place'. Spread doesn't return anything on its own; it works by expanding values into the surrounding context. That context might be an array literal, a function call, or an object literal — and each context behaves slightly differently.

When you spread inside an array literal [...a, ...b], you're building a new array from the elements of both. This is a shallow copy — primitives are copied by value, but nested objects are still referenced. When you spread inside a function call Math.max(...scores), you're passing each element as a separate argument. When you spread inside an object literal { ...defaults, ...overrides }, later keys win, which makes it perfect for configuration merging.

The key insight: spread is about placement. You're deciding exactly where the unpacked values land, and that precision is what makes it so powerful for immutable update patterns.

/**
 * io.thecodeforge - Mastering the Spread Operator
 */

// 1. Combining arrays without mutating either original
const morningTasks = ['email', 'standup', 'code review'];
const afternoonTasks = ['pair programming', 'deploy', 'retrospective'];
const fullDaySchedule = [...morningTasks, 'lunch', ...afternoonTasks];

// 2. Passing array values as individual function arguments
const temperatures = [22, 19, 31, 28, 17, 25];
const hottest = Math.max(...temperatures);

// 3. Shallow-cloning an array (avoids accidental mutation)
const originalCart = [{ id: 1, name: 'Keyboard' }, { id: 2, name: 'Mouse' }];
const cartCopy = [...originalCart];
cartCopy.push({ id: 3, name: 'Monitor' });

// 4. Merging config objects — later keys override earlier ones
const defaultSettings = { theme: 'light', fontSize: 14, notifications: true };
const userSettings    = { theme: 'dark', fontSize: 16 };
const finalSettings = { ...defaultSettings, ...userSettings };

console.log(finalSettings);

Rest Parameters: Capturing 'Everything Else' Into One Clean Collection

Rest is the mirror image of spread. Where spread expands, rest collects. Its job is to gather up a variable number of values and bundle them into a real JavaScript array that you can then work with normally.

The critical word is 'real array'. Before rest parameters existed, functions used the arguments object to access extra arguments. arguments looks like an array but isn't — it has no .map(), no .filter(), no .reduce(). Developers constantly had to convert it. Rest parameters made that hack obsolete.

Rest must always be the last parameter in a function signature. Importantly, rest only collects arguments that don't have an explicit parameter waiting for them. Named parameters come first, then rest catches whatever remains.

/**
 * io.thecodeforge - Mastering Rest Parameters
 */

// 1. Basic rest parameter: collect unlimited arguments
function calculateOrderTotal(discountPercent, ...itemPrices) {
  const subtotal = itemPrices.reduce((sum, price) => sum + price, 0);
  const discount = subtotal * (discountPercent / 100);
  return (subtotal - discount).toFixed(2);
}

// 2. Rest in object destructuring — extract known keys, collect the rest
const { id, createdAt, ...publicProfile } = {
  id: 'usr_abc123',
  createdAt: '2023-06-01',
  username: 'jsmith',
  bio: 'Software engineer'
};

console.log(publicProfile);

The Senior Level: Forwarding and Higher-Order Patterns

In production, rest and spread are often used together to create 'Transparent Wrappers'. This pattern allows you to intercept a function call, add logic (like logging or timing), and then forward the exact original arguments to the underlying function without knowing what those arguments are.

/**
 * io.thecodeforge - Transparent Function Wrapping
 */
function withLogging(fn) {
  return function(...args) {
    console.log(`[FORGE-LOG] Calling ${fn.name} with:`, args);
    return fn(...args); // Forwarding args via spread
  };
}

const add = (a, b) => a + b;
const loggedAdd = withLogging(add);
loggedAdd(5, 10);

Performance and Memory: When Spread Costs You

Spread is elegant, but it's not free. Every ...array call allocates a new array and copies all elements. For small arrays it's negligible, but if you're spreading a 100k-item log array in a hot loop, you'll see GC pressure and jank.

Object spread is even more subtle: it calls Object.assign() under the hood and enumerates all own properties. If the object has getters or a heavy prototype chain, those getters execute during spread — leading to side effects you didn't expect.

V8 optimises spreads for simple cases, but the allocation still happens. For immutable updates in React, the framework relies on reference identity, so spreading every render can create new objects that trigger unnecessary re-renders if not memoised.

/**
 * io.thecodeforge - Measuring spread allocation cost
 */
// Simulate a large array spread
function processLargeLog(entries) {
  // This creates a new array copy every call
  const processed = [...entries, { timestamp: Date.now(), action: 'check' }];
  return processed;
}

// Better: push to existing array if memory is critical
function processLargeLogOptimized(entries) {
  entries.push({ timestamp: Date.now(), action: 'check' });
  return entries;
}

console.time('spread');
const large = Array(50000).fill(0).map((_, i) => ({ id: i }));
processLargeLog(large);
console.timeEnd('spread'); // ~2-3ms on typical hardware

Edge Cases: Sparse Arrays, Strings, and Iterables

Spread works on any iterable, but iterables aren't always arrays. Strings are iterable — [...'hello'] gives ['h','e','l','l','o']. Great for splitting. But emoji? [...'👍'] returns ['👍'] correctly because strings are Unicode-aware. That's better than .split('') which can break multi-byte characters.

Sparse arrays are tricky. Array(5).fill() creates a dense array, but Array(5) alone leaves holes. Spreading a sparse array preserves the holes as undefined? Actually, [...Array(5)] returns [undefined, undefined, undefined, undefined, undefined] — the holes become undefined. That's a change! If you need to preserve sparseness, use Array.from().

Another gotcha: arguments is not an iterable in strict mode? Actually arguments is iterable in ES2015+, but still not an array. Spread works: [...arguments]. But better to just use rest parameters.

/**
 * io.thecodeforge - Edge Cases of Spread
 */
// Unicode handling
const emojiString = '👋🌍';
console.log([...emojiString]); // ['👋', '🌍']
console.log(emojiString.split('')); // ['\uD83D', '\uDC4B', ...] broken!

// Sparse arrays
const sparse = Array(3);
console.log(sparse.length); // 3
console.log([...sparse]); // [undefined, undefined, undefined] (holes become undefined)

// Non-iterable object
const obj = { a: 1 };
// [...obj]; // TypeError: obj is not iterable

// Set
const set = new Set([1, 2, 3]);
console.log([...set]); // [1, 2, 3]