What is the spread operator and rest parameters?

Question

Accepted Answer

Spread ( ... in an expression position) and rest ( ... in a binding position) use the same three-dot syntax but do opposite things. Spread expands an iterable or object into its parts; rest collects remaining parts into a single container. Spread — unpacking values Spread turns an iterable or object into individual elements or properties in array literals, object literals, and function calls. // Arrays const a = [1, 2, 3]; const b = [0, ...a, 4]; // [0, 1, 2, 3, 4] // Function calls Math.max(...a); // 3 // Shallow object copy const user = { name: "Ada" }; const updated = { ...user, role: "admin" }; // Convert iterables to arrays [..."hi"]; // ["h", "i"] [...new Set([1,1,2])]; // [1, 2] Rest — collecting values Rest appears in parameter lists and destructuring patterns to gather whatever is left. function sum(...nums) { return nums.reduce((a, b) => a + b, 0); } sum(1, 2, 3); // 6 const [head, ...tail] = [10, 20, 30]; // head = 10, tail = [20, 30] const { id, ...details } = { id: 1, name: "Ada", age: 28 }; // details = { name, age } Key differences Spread is used in expressions (calls, literals); rest is used in declarations (parameters, patterns). A rest parameter must be the last parameter; there can be only one. Spread works on anything iterable for arrays ( Array , String , Map , Set , generators). Object spread works on any object but copies only own enumerable properties. Replacing older APIs Spread and rest have largely replaced Array.prototype.concat , Object.assign , and the arguments object in modern code. // Old const merged = Object.assign({}, a, b); function log() { console.log(Array.from(arguments)); } // Modern const merged = { ...a, ...b }; function log(...args) { console.log(args); } Shallow copy caveat Both array and object spread create shallow copies. Nested objects are still shared by reference, so mutating them affects the original. Use structuredClone() or a deep-clone utility when you need true isolation. Context determines behavior: ... in definition = rest (collects), ... in usage = spread (expands). The shallow copy limitation is important. Object merge with last-wins for conflicts. Math.max(...array) is the classic spread example.