Three dots, two meanings: spread unpacks; rest collects. Position decides which.
Spread — expand into pieces
const merged = [...arr1, ...arr2];
const copy = [...arr]; // shallow copy
const updated = { ...user, city: "Chennai" }; // clone + override — React state!
Math.max(...numbers);
const chars = [..."hello"]; // ["h","e","l","l","o"]
const unique = [...new Set(arr)]; // dedupe one-linerRest — collect the leftovers
function sum(...nums) { return nums.reduce((a,b) => a+b, 0); }
const [first, ...others] = list;
const { password, ...safeUser } = user; // omit a field — send safeUser to the clientThe trap: shallow means shallow
const copy = { ...student };
copy.marks.cn = 0; // ⚠️ ALSO changes student.marks.cn!
// nested objects are shared references. Deep copy:
const deep = structuredClone(student);Interview one-liner: "spread in calls/literals unpacks; rest in parameters/destructuring gathers — and both copy only one level deep." Full lesson: Spread & Rest.