Spread & Rest
Expand iterables with spread (...) and collect arguments with rest
Free tier: read the explanation here. Upgrade to Pro for Drills, Speed challenges & Mastery badges.
UpgradeKnowledge Debt detected
You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.
Explanation
The ... operator has two uses depending on context.
Spread — expands an iterable (array, string, object) into individual elements: ``javascript const a = [1, 2, 3]; const b = [...a, 4, 5]; // [1, 2, 3, 4, 5] const obj1 = { x: 1 }; const obj2 = { ...obj1, y: 2 }; // { x: 1, y: 2 }
Shallow copy with spread:
javascript const original = [1, 2, 3]; const copy = [...original]; // new array, not the same reference
Spread into function calls:
javascript Math.max(...[3, 1, 4, 1, 5]) // 5
Rest parameters — collect remaining function arguments into an array: ``javascript function sum(...nums) { return nums.reduce((a, b) => a + b, 0); } sum(1, 2, 3, 4); // 10
Rest must be the last parameter. You can combine named and rest: ``javascript function log(level, ...messages) { console.log(level, messages); } log('INFO', 'Server started', 'Port 3000'); // 'INFO' ['Server started', 'Port 3000']
Key difference: spread is used at call sites / in literals; rest is used in function definitions.
Examples
Merge arrays
Spread makes concatenation clean without .concat()
const front = ['a', 'b'];
const back = ['c', 'd'];
const all = [...front, 'x', ...back];
console.log(all); // ['a', 'b', 'x', 'c', 'd']Spread to clone and override object
Later keys override earlier ones — great for config merging
const defaults = { theme: 'dark', lang: 'en', fontSize: 14 };
const userPrefs = { lang: 'pt', fontSize: 18 };
const config = { ...defaults, ...userPrefs };
console.log(config);
// { theme: 'dark', lang: 'pt', fontSize: 18 }How well did you understand this?
Next in JavaScript Core
Template Literals