Rest Vs Spread Operator

What They Have in Common

Both Rest and Spread use the three dots (...) syntax.

But:

• 👉 Rest: Combines multiple values into one (used in function parameters or destructuring).
• 👉 Spread: Splits one value into multiple (used when calling functions or combining arrays/objects).

---

🧠 REST OPERATOR (...rest)

✅ Purpose: To gather remaining values into a single array.

It is mostly used in:

• Function parameters
• Object or array destructuring

🔹 Example 1: Rest in Function Parameters

function sum(...numbers) {
  console.log(numbers);
}

sum(1, 2, 3, 4); // Output: [1, 2, 3, 4]

✅ Explanation:

• ...numbers collects all arguments into an array.
• You can now loop through or reduce them.

🔹 Example 2: Rest in Array Destructuring

const [first, ...rest] = [10, 20, 30, 40];
console.log(first); // 10
console.log(rest);  // [20, 30, 40]

✅ Explanation:

• first takes the first item.
• ...rest grabs everything else in the array.

---

🚀 SPREAD OPERATOR (...spread)

✅ Purpose: To spread (unpack) elements out of an array or object.

It is mostly used in:

• Function calls
• Combining arrays
• Copying objects/arrays

🔹 Example 1: Spread in Function Call

const numbers = [1, 2, 3];
Math.max(...numbers); // 3

✅ Explanation:

• Math.max() needs separate numbers.
• ...numbers breaks [1, 2, 3] into 1, 2, 3.

🔹 Example 2: Combine Arrays

const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b]; // [1, 2, 3, 4]

✅ Explanation:

• Spreads elements from a and b into a new array.

🔹 Example 3: Copy and Extend Objects

const user = { name: "Darshan", age: 23 };
const updated = { ...user, city: "Kachchh" };
console.log(updated);
// { name: "Darshan", age: 23, city: "Kachchh" }

✅ Explanation:

• Spreads existing user object.
• Adds new city property.

---

⚖️ Quick Comparison Table

Feature	Rest (...)	Spread (...)
Used in	Function params, destructuring	Function calls, cloning, merging
Direction	Gathers into 1 item	Breaks into many items
Data Type	Converts into array	Expands from array/object
Common Use	Capture extra args	Clone/merge values

---

🔄 Mnemonic to Remember

• Rest = “Rest of the items” → puts them into an array.
• Spread = “Spread it out” → pulls out items from a collection.

---

Even though both Rest and Spread use ..., the meaning depends on where and how you’re using it in your code.

---

🧭 HOW TO TELL: Is it Rest or Spread?

Let’s break it into 2 simple rules:

---

✅ Rule 1: Location in the code decides its role

Situation	Is it Rest or Spread?	Why?
Inside function parameters	🟢 Rest	It’s collecting arguments
Inside array/object destructuring (left side of =)	🟢 Rest	It’s collecting leftover values
Inside function calls	🔵 Spread	It’s spreading elements as args
Inside array/object creation (right side of =)	🔵 Spread	It’s spreading to build new data

---

✅ Rule 2: Left side = Rest, Right side = Spread

You can use this simple shortcut:

jsCopyEdit// Rest (LEFT side)
const [first, ...rest] = [1, 2, 3];

// Spread (RIGHT side)
const arr = [1, 2];
const newArr = [...arr, 3];

---

🔍 Let’s look at some side-by-side examples:

✳️ Rest in function parameter:

function greet(...names) {
  console.log(names);
}
greet("Ram", "Shyam"); // ['Ram', 'Shyam']

• ✅ ...names is gathering multiple arguments → REST

---

✳️ Spread in function call:

const nums = [10, 20];
console.log(Math.max(...nums)); // 20

• ✅ ...nums is spreading array into separate arguments → SPREAD

---

✳️ Rest in destructuring:

const [head, ...tail] = [1, 2, 3];
console.log(tail); // [2, 3]

• ✅ ...tail is on the left side → gathers → REST

---

✳️ Spread in array construction:

const start = [1];
const final = [...start, 2, 3];
console.log(final); // [1, 2, 3]

• ✅ ...start is on right side → spreads → SPREAD

---

🧠 Final Shortcut

If you see ...:

• On left side of = ➜ REST
• In function parameter ➜ REST
• On right side of = or in function call ➜ SPREAD

---

🧪 Exercise: Identify and Explain Rest or Spread

Read the following code and answer these 3 things for each line that has ...:

1. Is it Rest or Spread?
2. Why is it used here?
3. What is the final output?

jsCopyEditfunction displayInfo(name, ...skills) {
  console.log(name);
  console.log(skills);
}

const mainSkills = ["HTML", "CSS", "JavaScript"];

displayInfo("Darshan", ...mainSkills);

const user = {
  name: "Darshan",
  age: 23,
};

const updatedUser = {
  ...user,
  city: "Kachchh",
};
console.log(updatedUser);

const [firstSkill, ...otherSkills] = ["React", "Node.js", "MongoDB"];
console.log(firstSkill);
console.log(otherSkills);

---

🎯 Your Tasks:

👉 For each of the ... in the code above, answer:

• ✅ Is it Rest or Spread?
• ✅ Why?
• ✅ What will be the printed output?

---

Thank You