A Simple Guide to JavaScript Spread and Rest Operators

Both the spread and rest operators use the same syntax: ... (three dots). But they serve opposite purposes depending on how and where they're used.

Let’s break them down with real-life examples and clean code!

---

🌟 Spread Operator: Expanding Things

The spread operator is used to spread or unpack elements from arrays or properties from objects.

✅ Use Cases for Spread

1. Copying Arrays

const fruits = ['apple', 'banana'];
const moreFruits = [...fruits, 'mango'];
console.log(moreFruits); // ['apple', 'banana', 'mango']

2. Merging Arrays

const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b];
console.log(combined); // [1, 2, 3, 4]

3. Copying Objects

const user = { name: 'John' };
const userWithAge = { ...user, age: 25 };
console.log(userWithAge); // { name: 'John', age: 25 }

4. Merging Objects

const defaultSettings = { darkMode: false, layout: 'grid' };
const userSettings = { darkMode: true };
const settings = { ...defaultSettings, ...userSettings };
console.log(settings); // { darkMode: true, layout: 'grid' }

---

🌀 Rest Operator: Collecting Things

The rest operator is used to collect multiple values into a single array or object.

✅ Use Cases for Rest

1. Function Parameters

function sum(...nums) {
  return nums.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3)); // 6

2. Destructuring Arrays

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

3. Destructuring Objects

const { id, ...userInfo } = { id: 101, name: 'Alice', role: 'admin' };
console.log(id);       // 101
console.log(userInfo); // { name: 'Alice', role: 'admin' }

---

🧠 Quick Summary Table

---

🙏 Thank You!

Thank you for reading!

I hope you enjoyed this post. If you did, please share it with your network and stay tuned for more insights on software development. I'd love to connect with you on LinkedIn or have you follow my journey on HashNode for regular updates.

Happy Coding!
Mitesh Kukdeja