Loading...
See how JavaScript spread and rest syntax works with an interactive visualization. Watch spread expand arrays/objects, rest collect arguments, and rest in destructuring patterns.
Loading visualization...
The spread operator expands iterables into individual elements, while the rest syntax collects multiple elements into a single array or object, using the same three-dot notation in different contexts.
Spread syntax (...) expands an iterable (array, string, object) into individual elements. In arrays it unpacks elements; in objects it copies enumerable own properties into a new object.
Rest syntax (...) collects remaining elements or properties into an array or object. In function parameters it gathers extra arguments; in destructuring it captures leftovers.
Both use the same ... notation but serve opposite purposes: spread expands, rest collects. The context determines which operation occurs.
Interview framing: define Spread & Rest in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.
Object spread only copies top-level properties. Nested objects remain shared references, so mutating nested data affects the original.
Fix: Use structuredClone for deep copies, or manually spread nested levels when full independence is needed.
The rest parameter must be the last parameter in a function signature. Placing it elsewhere causes a SyntaxError.
Fix: Always declare rest as the final parameter: function fn(a, b, ...rest).
Spreading a number or boolean in an array context throws a TypeError because they are not iterable.
Fix: Only spread iterables (arrays, strings, Sets, Maps) in array contexts. Objects can only be spread in object literals.
Common interview prompts with concise model answers.
Spread expands elements in an array/object literal or function call. Rest collects elements in a function parameter or destructuring pattern. Same syntax, opposite direction.
// Spread: expands
const merged = [...arr1, ...arr2];
// Rest: collects
const [first, ...rest] = [1, 2, 3];Properties are copied left to right. If the same key appears in multiple spread sources, the last one wins.
const a = { x: 1, y: 2 };
const b = { y: 3, z: 4 };
const c = { ...a, ...b };
console.log(c); // { x: 1, y: 3, z: 4 }Rest parameters produce a real Array with all array methods. The arguments object is array-like but not a true Array, and does not work in arrow functions.
Yes, [...arr] creates a shallow copy. The new array has the same elements but is a separate array object, so pushing to the clone does not affect the original.
const original = [1, 2, 3];
const clone = [...original];
clone.push(4);
console.log(original); // [1, 2, 3]Continue with these concepts to strengthen your mental model.
const fruits = ["apple", "banana"];const vegs = ["carrot", "pea"];const all = [...fruits, ...vegs];const copy = [...fruits];copy.push("cherry");console.log(all);console.log(fruits);console.log(copy);empty
No output yet.