Spread vs Rest Operators in JavaScript

Modern JavaScript introduces a powerful syntax using three dots (...) that serves two different purposes:

Spread Operator → Expands values Rest Operator → Collects values

Although both use the same syntax, their behavior depends entirely on the context. Understanding this distinction is essential for writing clean, efficient code and performing well in technical interviews.

🔹 What is the Spread Operator?

The spread operator (...) is used to expand elements from arrays or objects into individual values.

Example: const arr = [1, 2, 3];

const newArr = [...arr];

console.log(newArr); // [1, 2, 3]

In this example, ...arr expands the array into individual elements.

🔹 Using Spread with Arrays Combining Arrays const a = [1, 2]; const b = [3, 4];

const result = [...a, ...b];

console.log(result); // [1, 2, 3, 4] Adding Elements const arr = [2, 3];

const newArr = [1, ...arr, 4];

console.log(newArr); // [1, 2, 3, 4]

🔹 Using Spread with Objects const user = { name: "Parth", age: 21 };

const updatedUser = { ...user, city: "Delhi" };

console.log(updatedUser); // { name: "Parth", age: 21, city: "Delhi" }

🔹 Real-World Use Case

The spread operator is widely used for immutable updates, especially in modern frameworks like React.

const oldState = { name: "Parth", age: 21 };

const newState = { ...oldState, age: 22 };

🔹 What is the Rest Operator?

The rest operator (...) is used to collect multiple values into a single variable, usually in function parameters or destructuring.

🔹 Rest in Function Parameters function sum(...numbers) { return numbers.reduce((acc, curr) => acc + curr, 0); }

console.log(sum(1, 2, 3, 4)); // 10

Here, ...numbers gathers all arguments into an array.

🔹 Rest in Array Destructuring

const arr = [1, 2, 3, 4];

const [first, ...rest] = arr;

console.log(first); // 1 console.log(rest); // [2, 3, 4] 🔹 Rest in Object Destructuring const user = { name: "Parth", age: 21, city: "Delhi" };

const { name, ...rest } = user;

console.log(name); // Parth

console.log(rest); //

{ age: 21, city: "Delhi" }

Difference Between Spread and Rest Feature

Spread Operator Rest Operator Purpose Expands values Collects values Direction

One → Many Many → One Usage Arrays, Objects Functions, Destructuring Syntax ...array ...args

Easy Way to Remember Spread = Expand values Rest = Collect values

📌 Practical Use Cases

1. Copying Arrays const copy = [...arr];

2. Merging Objects const merged = { ...obj1, ...obj2 };

3. Handling Variable Arguments function log(...args) { console.log(args); }

4. Removing Properties from Objects const { password, ...safeUser } = user;

5. Updating State const updated = { ...user, age: 25 }; 🎯 Conceptual Understanding Spread Operator: Expands values [1, 2, 3] → 1, 2, 3 Rest Operator: Collects values 1, 2, 3 → [1, 2, 3] ⚠️ Common Mistake

❌ Incorrect:

function test(a, ...rest, b) {}

✅ Correct:

function test(a, b, ...rest) {}

The rest parameter must always be the last parameter.

Interview Tips The spread operator creates a shallow copy, not a deep copy The rest operator must always appear at the end Both operators use the same syntax, so context is crucial Spread is heavily used in React state management 🚀 Conclusion

Spread and Rest operators are essential features in modern JavaScript. By mastering them, you can:

Write cleaner and more maintainable code Work efficiently with arrays and objects Solve common interview problems with ease

Understanding when to expand and when to collect values is the key to using them effectively.