The ... syntax does one of two opposite things depending on where it's used: rest collects several values into one array, spread expands one array (or object) into several values.
Gathers any number of remaining arguments into a real array — a modern replacement for the older, array-like arguments object.
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0)
}
sum(1, 2, 3) // 6
sum(1, 2, 3, 4, 5) // 15const [first, ...rest] = [10, 20, 30, 40]
first // 10
rest // [20, 30, 40]
const { name, ...otherFields } = { name: 'Sam', age: 28, city: 'Delhi' }
otherFields // { age: 28, city: 'Delhi' }const a = [1, 2, 3]
const b = [4, 5, 6]
const combined = [...a, ...b]
// [1, 2, 3, 4, 5, 6]
Math.max(...a) // 3 — spreads the array into separate argumentsconst defaults = { theme: 'light', fontSize: 16 }
const userPrefs = { fontSize: 20 }
const settings = { ...defaults, ...userPrefs }
// { theme: 'light', fontSize: 20 } — later keys override earlier ones| Context | Meaning |
|---|---|
| ...args in a function parameter list | Rest — collects arguments into an array |
| ...arr inside an array or function call | Spread — expands an array into individual values |
| ...obj inside an object literal | Spread — copies an object's own properties |
Where this shows up next
Object spread ({ ...original, updatedField: value }) is the standard way to update state immutably in React and similar frameworks — worth being comfortable with this syntax before that course.