Spread vs Rest Operator in JavaScript

1// SPREAD — one array becomes many arguments
2const nums = [1, 5, 3];
3Math.max(...nums);              // → 5   (same as Math.max(1, 5, 3))
4
5// REST — many arguments become one array
6function max(...values) {
7  return Math.max(...values);   // ← rest collecting, then spread expanding
8}
9max(1, 5, 3);                   // → 5

1const [first, ...others] = [1, 2, 3, 4];
2//              ^^^^^^^^ REST — left of =, collects
3// first → 1, others → [2, 3, 4]
4
5const combined = [0, ...others];
6//                   ^^^^^^^^ SPREAD — right of =, expands
7// → [0, 2, 3, 4]

1// Copy an array
2const copy = [...original];              // → new array, same elements
3
4// Merge arrays
5const all = [...a, ...b];                // → [1, 2, 3, 4]
6
7// Copy + override an object
8const updated = { ...user, name: "Arun" };
9
10// Turn a string into characters
11[..."hey"];                              // → ["h", "e", "y"]
12
13// Convert a Set back to an array
14[...new Set([1, 1, 2])];                 // → [1, 2]   (dedupe idiom)

1const original = { name: "Arun", address: { city: "Chennai" } };
2const copy = { ...original };
3
4copy.name = "Divya";
5console.log(original.name);          // → "Arun"     ✅ top level is safe
6
7copy.address.city = "Bengaluru";
8console.log(original.address.city);  // → "Bengaluru" ❌ nested is SHARED

1// Spread each level you care about
2const copy = { ...original, address: { ...original.address } };
3
4// Or clone the whole structure (Node 17+, all modern browsers)
5const deep = structuredClone(original);
6deep.address.city = "Bengaluru";
7console.log(original.address.city);  // → "Chennai"  ✅

1// Arrays — positional
2const [winner, runnerUp, ...rest] = ["a", "b", "c", "d"];
3// winner → "a", runnerUp → "b", rest → ["c", "d"]
4
5// Objects — by key. The idiomatic way to omit a field:
6const { password, ...safeUser } = user;
7// safeUser → every property except password

function f(...nums, last) {}
// → SyntaxError: Rest parameter must be last formal parameter

const [...a, ...b] = [1, 2, 3];
// → SyntaxError: Rest element must be last element

1function log(level, ...messages) {
2  console.log(`[${level}]`, messages.join(" "));
3}
4
5log("warn", "disk", "almost", "full");
6// → [warn] disk almost full
7
8log("info");
9// → [info]        (messages is [], never undefined — a real empty array)

1// Wrap any function without knowing its signature
2function withTiming(fn) {
3  return function (...args) {          // REST — collect whatever comes in
4    const start = performance.now();
5    const result = fn(...args);        // SPREAD — pass it straight through
6    console.log(`${fn.name} took ${performance.now() - start}ms`);
7    return result;
8  };
9}
10
11const timedSort = withTiming(sortUsers);
12timedSort(users, "name");
13// → sortUsers took 0.42ms

1function old() {
2  return arguments.map(n => n * 2);
3}
4old(1, 2);            // → TypeError: arguments.map is not a function
5
6const modern = (...nums) => nums.map(n => n * 2);
7modern(1, 2);         // → [2, 4]
8
9const broken = () => arguments;
10broken(1, 2);         // → ReferenceError (or the outer scope's arguments)

1// REST — take the props you handle, forward the rest untouched
2function Button({ variant, children, ...rest }) {
3  return <button className={variant} {...rest}>{children}</button>;
4  //                                  ^^^^^^^ SPREAD — onClick, disabled, aria-*…
5}
6
7// SPREAD — immutable state updates
8setUser(prev => ({ ...prev, name: "Arun" }));
9setItems(prev => [...prev, newItem]);
10// → a new object and a new array each time, so React sees the change

1const nums = [1, 5, 3];
2
3Math.max.apply(null, nums);   // → 5   (pre-ES6: null is the "this" you don't need)
4Math.max(...nums);            // → 5   (same thing, no fake "this" argument)
5
6// apply also had a hard argument-count ceiling; spread is subject to the
7// engine's stack limit too, so for very large arrays use reduce instead:
8nums.reduce((m, n) => Math.max(m, n), -Infinity);   // → 5, safe at any size

1// Conditionally include a property
2const body = { name, ...(isAdmin && { role: "admin" }) };
3// → { name } when false; { name, role } when true
4
5// Conditionally include array items
6const steps = ["start", ...(verbose ? ["log"] : []), "finish"];
7
8// Default options, caller overrides
9function init(options) {
10  const config = { retries: 3, timeout: 5000, ...options };
11}
12
13// Replace one item immutably by index
14const next = [...items.slice(0, i), updated, ...items.slice(i + 1)];
15
16// Swap two variables
17let [a, b] = [b, a];
18
19// Shallow-compare-friendly React update
20setFilters(prev => ({ ...prev, page: 1 }));

1// Both convert an iterable to an array
2[...new Set([1, 2])];          // → [1, 2]
3Array.from(new Set([1, 2]));   // → [1, 2]
4
5// Only Array.from handles array-LIKES (length + indices, not iterable)
6Array.from({ length: 3 });     // → [undefined, undefined, undefined]
7[...{ length: 3 }];            // → TypeError: object is not iterable
8
9// And only Array.from takes a map function
10Array.from({ length: 3 }, (_, i) => i * 2);   // → [0, 2, 4]