Rest & Spread Operators0%
Closures Introduction

Rest & Spread Operators

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Rest and Spread Operators (...)

The three dots (...) in modern JavaScript are used for two distinct, powerful features depending on context: the Rest Parameter (collecting items into an array) and the Spread Operator (unpacking items from an iterable).

1. Rest vs. Spread: The Core Difference

Visual Architecture Blueprint
+-----------------------------------------------------------------------------+
| REST PARAMETER (Collects multiple items into ONE single array)              |
| Context: In function parameter lists or destructuring patterns              |
| Example: function sum(...numbers) { ... }                                  |
+-----------------------------------------------------------------------------+
                                     vs.
+-----------------------------------------------------------------------------+
| SPREAD OPERATOR (Expands ONE array/object into individual elements)         |
| Context: In function calls, array literals, or object literals             |
| Example: Math.max(...numbers)  |  [...arr1, ...arr2]                       |
+-----------------------------------------------------------------------------+

2. The Spread Operator in Action

A. Combining and Cloning Arrays (Shallow Copy)

JavaScript
const frontend = ["HTML", "CSS", "JS"];
const backend = ["Node.js", "Express", "MongoDB"];
 
// Combining arrays cleanly:
const fullStack = [...frontend, ...backend, "Git"];
console.log(fullStack);
// ["HTML", "CSS", "JS", "Node.js", "Express", "MongoDB", "Git"]
 
// Cloning an array (avoids mutating original):
const clonedFrontend = [...frontend];
clonedFrontend.push("React");
console.log(frontend); // ["HTML", "CSS", "JS"] (Untouched!)

B. Spreading into Function Arguments:

JavaScript
const scores = [88, 94, 72, 99, 81];
 
// Math.max expects numbers, not an array:
console.log(Math.max(...scores)); // 99 (Unpacked into 88, 94, 72, 99, 81)

C. Spreading and Merging Objects:

JavaScript
const defaultSettings = { theme: "dark", notifications: true, fontSize: 14 };
const userPreferences = { fontSize: 16, notifications: false };
 
// Merge: userPreferences override defaultSettings!
const finalConfig = { ...defaultSettings, ...userPreferences };
console.log(finalConfig);
// { theme: "dark", notifications: false, fontSize: 16 }

3. The Rest Parameter in Action

A. Gathering Remaining Function Arguments:

JavaScript
function awardMedals(gold, silver, ...bronzeRunners) {
console.log(`🥇 Gold: ${gold}`);
console.log(`🥈 Silver: ${silver}`);
console.log(`🥉 Bronze Runners:`, bronzeRunners);
}
 
awardMedals("Sumit", "Neha", "Aarav", "Rahul", "Pooja");
// Bronze Runners: ["Aarav", "Rahul", "Pooja"]

B. Rest in Array and Object Destructuring:

JavaScript
// Array Rest:
const [first, second, ...remaining] = [10, 20, 30, 40, 50];
console.log(remaining); // [30, 40, 50]
 
// Object Rest:
const student = { id: 1, name: "Sumit", marks: 95, city: "Delhi" };
const { id, ...details } = student;
console.log(details); // { name: "Sumit", marks: 95, city: "Delhi" }
Interactive Quiz

Practice Quiz

Question 1
What is the primary difference between the Rest operator and the Spread operator?
Question 2
How do you create a shallow copy of an array original using Spread?
Question 3
Where must the Rest parameter (...rest) be placed in a function's parameter list?
Question 4
If const obj1 = { a: 1, b: 2 }; const obj2 = { b: 99, c: 3 }; const merged = { ...obj1, ...obj2 };, what is the value of merged.b?
Question 5
What does [..."MSK"] evaluate to?
Next Lesson

Closures Introduction

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Arrow Functions AdvancedClosures Introduction

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext