JavaScript Notes
Master the JavaScript rest operator: rest parameters in functions, object/array rest in destructuring, rest vs spread, variadic functions, and real-world patterns.
What is the Rest Operator?
The rest operator (...) collects multiple elements into a single array or object. It's the opposite of the spread operator — while spread expands, rest gathers.
Think of it like a "catch-all" basket: if a function expects specific arguments and you also want to capture "everything else", the rest operator gathers those extras into one container.
Rest in Function Parameters
Basic Rest Parameter
6 150 5
Mixed Parameters — Named + Rest
Order #ORD-001 [Shipped]: 1. Phone 2. Charger 3. Case 4. Screen Guard
Rest with No Extra Arguments — Returns Empty Array
function firstAndRest(first, ...rest) {
console.log("First:", first);
console.log("Rest:", rest);
console.log("Rest is array?", Array.isArray(rest));
}
firstAndRest("only-one");First: only-one Rest: [] Rest is array? true
Rest vs arguments Object
Before ES6, arguments was used to capture all arguments. Rest parameters are better in every way:
6 6
| Feature | arguments | Rest ...args |
|---|---|---|
| Type | Array-like object | Real Array |
| Array methods (map, filter…) | ❌ Not available | ✅ Available |
| Works in arrow functions | ❌ No | ✅ Yes |
| Named parameters alongside | ❌ Captures all | ✅ Captures remaining |
| ES version | All versions | ES6+ |
Rest in Object Destructuring
const employee = {
name: "Priya",
role: "Engineer",
age: 27,
city: "Bangalore",
company: "InnoTech"
};
const { name, role, ...details } = employee;
console.log(name);
console.log(role);
console.log(details);Priya
Engineer
{ age: 27, city: 'Bangalore', company: 'InnoTech' }Practical: Exclude Sensitive Fields
const userData = {
id: 101,
name: "Ravi",
email: "ravi@example.com",
password: "hashed_secret",
token: "jwt_token_here"
};
// Remove sensitive fields before sending to client
const { password, token, ...publicData } = userData;
console.log(publicData);
// Safe to send — no password or token{ id: 101, name: 'Ravi', email: 'ravi@example.com' }Rest in Array Destructuring
10 20 [ 30, 40, 50 ]
Practical: Head and Tail
First day: Monday Other days: [ 'Tuesday', 'Wednesday', 'Thursday', 'Friday' ]
Rest Must Be Last! (Rule)
// ❌ Wrong — rest is not last
function badFn(...first, last) { }
// SyntaxError: Rest element must be last element
// ✅ Correct — rest is always last
function goodFn(first, ...rest) { }
// ❌ Wrong — two rest params
const { a, ...x, ...y } = obj; // SyntaxError
// ✅ Correct — only one rest, at end
const { a, ...rest } = obj;Spread vs Rest — Full Comparison
| Spread | Rest | |
|---|---|---|
| Syntax | ... | ... |
| Direction | Expands (1 → many) | Collects (many → 1) |
| Used in | Function calls, literals | Parameters, destructuring |
| Result | Individual elements | Array or Object |
| Position | Anywhere | Must be last |
Real World Use Cases 🌍
1. Wrapper Function (Forward Extra Args)
[2026-06-12T...] [INFO] Server started port: 3000
[2026-06-12T...] [ERROR] DB connection failed { retries: 3, code: 'ECONNREFUSED' }2. Pick Properties from Object
{ id: 1, name: 'Anu', email: 'a@b.com' }3. Merge Multiple Config Objects
function mergeConfig(defaults, ...overrides) {
return Object.assign({}, defaults, ...overrides);
}
const base = { timeout: 3000, retries: 3, debug: false };
const env = { debug: true };
const custom = { timeout: 5000 };
console.log(mergeConfig(base, env, custom));{ timeout: 5000, retries: 3, debug: true }Common Mistakes ❌
1. Putting rest before other parameters
// ❌ SyntaxError
function fn(...rest, last) {}
// ✅ Rest must be last
function fn(first, ...rest) {}2. Confusing spread and rest
3. Thinking rest collects into an object in function params
Interview Questions 🎯
Q1. What is the rest operator in JavaScript? > The rest operator (...) collects multiple function arguments or remaining destructured elements into a single array or object. Introduced in ES6.
Q2. What is the difference between rest and spread operators? > Both use ... but opposite directions. Rest collects (many → one). Spread expands (one → many). Rest is used in definitions/destructuring; spread in calls/literals.
Q3. What does a rest parameter look like and where must it appear? > function fn(...args) — the ...args must be the last parameter. Only one rest parameter is allowed per function.
Q4. How is rest different from the arguments object? > arguments is an array-like object with no array methods, doesn't work in arrow functions, and captures ALL arguments. Rest creates a real array, works everywhere, and only captures the "remaining" arguments after named params.
Q5. Can you use rest in destructuring? > Yes — const { a, b, ...rest } = obj collects remaining properties into rest. And const [first, ...tail] = arr collects remaining array elements into tail.
Q6. What does rest return when no extra arguments are passed? > An empty array []. It never returns undefined.
Q7. What is a practical use of object rest in destructuring? > Removing sensitive fields: const { password, token, ...safeUser } = user — you get a clean safeUser object without the sensitive fields.
Key Takeaways 🏁
- Rest
...collects remaining arguments/properties into an array or object - Must always be the last item —
function fn(a, b, ...rest)✅ - Only one rest element per function signature or destructuring
- In functions, rest creates a real Array (unlike the old
argumentsobject) - In destructuring:
{ a, ...rest }collects remaining props;[first, ...tail]collects remaining elements - Very useful for removing specific properties from objects
- Works as a great pattern for variadic functions (functions accepting any number of args)
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for JavaScript Rest Operator (...) - Parameters, Destructuring & Complete Guide.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.
Search Terms
javascript-complete-guide, javascript master course, javascript, complete, guide, objects, rest, operator
Related JavaScript Master Course Topics