added Rest-and-spread-operators.md

Author: Varunyadavgithub

Medium/README.md

@@ -18,7 +18,7 @@ This section contains intermediate-level JavaScript interview questions. Click o
 14. [What is the difference between shallow copy and deep copy?](Shallow-vs-deep-copy.md) ✅
 15. [What are the different ways to iterate over an array in JavaScript?](Array-iteration-methods.md) ✅
 16. [How does destructuring assignment work in JavaScript?](Destructuring-assignment.md) ✅
-17. [What are rest and spread operators in JavaScript?](Rest-and-spread-operators.md)
+17. [What are rest and spread operators in JavaScript?](Rest-and-spread-operators.md) ✅
 18. [What is the difference between call, apply, and bind methods?](Call-apply-bind-methods.md)
 19. [How do you handle errors in JavaScript using try-catch?](Try-catch-error-handling.md)
 20. [What is the purpose of the `new` keyword in JavaScript?](Purpose-of-new-keyword.md)

Medium/Rest-and-spread-operators.md

@@ -0,0 +1,151 @@
+### **What Are Rest and Spread Operators in JavaScript ?**
+
+The **rest** and **spread** operators, both denoted by `...`, are powerful features introduced in ES6. Despite their similar syntax, they serve different purposes depending on how and where they are used.
+
+---
+
+### **1. The Rest Operator**
+
+The **rest operator** collects multiple elements or properties into a single variable. It is commonly used in functions, arrays, and objects.
+
+#### **Usage in Functions:**
+
+The rest operator is used to gather all remaining arguments into an array.
+
+```javascript
+function sum(...numbers) {
+  return numbers.reduce((total, num) => total + num, 0);
+}
+console.log(sum(1, 2, 3, 4)); // Output: 10
+```
+
+#### **Usage in Arrays:**
+
+It collects the remaining elements of an array into a new array.
+
+```javascript
+const [a, b, ...rest] = [1, 2, 3, 4, 5];
+console.log(a, b); // Output: 1 2
+console.log(rest); // Output: [3, 4, 5]
+```
+
+#### **Usage in Objects:**
+
+The rest operator collects remaining properties into a new object.
+
+```javascript
+const person = { name: "Alice", age: 25, country: "Wonderland" };
+const { name, ...details } = person;
+console.log(name); // Output: Alice
+console.log(details); // Output: { age: 25, country: 'Wonderland' }
+```
+
+---
+
+### **2. The Spread Operator**
+
+The **spread operator** expands an array or object into individual elements or properties. It is particularly useful for copying and merging arrays or objects.
+
+#### **Usage in Arrays:**
+
+**1. Expanding Arrays:**
+
+```javascript
+const arr = [1, 2, 3];
+console.log(...arr); // Output: 1 2 3
+```
+
+**2. Combining Arrays:**
+
+```javascript
+const arr1 = [1, 2];
+const arr2 = [3, 4];
+const combined = [...arr1, ...arr2];
+console.log(combined); // Output: [1, 2, 3, 4]
+```
+
+**3. Copying Arrays:**
+
+```javascript
+const original = [1, 2, 3];
+const copy = [...original];
+console.log(copy); // Output: [1, 2, 3]
+```
+
+#### **Usage in Objects:**
+
+**1. Expanding Objects:**
+
+```javascript
+const person = { name: "Alice", age: 25 };
+const clone = { ...person };
+console.log(clone); // Output: { name: 'Alice', age: 25 }
+```
+
+**2. Merging Objects:**
+
+```javascript
+const obj1 = { a: 1, b: 2 };
+const obj2 = { b: 3, c: 4 };
+const merged = { ...obj1, ...obj2 };
+console.log(merged); // Output: { a: 1, b: 3, c: 4 }
+```
+
+---
+
+### **3. Key Differences Between Rest and Spread**
+
+| **Aspect**        | **Rest Operator**                        | **Spread Operator**                     |
+| ----------------- | ---------------------------------------- | --------------------------------------- |
+| **Purpose**       | Collects multiple elements into one      | Expands elements into individual pieces |
+| **Usage Context** | Function parameters, array destructuring | Arrays, objects, and function arguments |
+| **Syntax**        | Appears on the left side of `=`          | Appears on the right side of `=`        |
+
+---
+
+### **4. Examples**
+
+#### **Rest with Functions:**
+
+```javascript
+function greet(greeting, ...names) {
+  return `${greeting}, ${names.join(" and ")}`;
+}
+console.log(greet("Hello", "Alice", "Bob")); // Output: Hello, Alice and Bob
+```
+
+#### **Spread with Function Calls:**
+
+```javascript
+const numbers = [1, 2, 3];
+console.log(Math.max(...numbers)); // Output: 3
+```
+
+#### **Combining Both:**
+
+```javascript
+function add(a, b, ...rest) {
+  const sumRest = rest.reduce((total, num) => total + num, 0);
+  return a + b + sumRest;
+}
+console.log(add(1, 2, 3, 4)); // Output: 10
+```
+
+---
+
+### **5. Use Cases**
+
+- **Rest Operator:**
+
+  - Handling variable-length arguments in functions.
+  - Collecting remaining properties during destructuring.
+
+- **Spread Operator:**
+  - Cloning and merging arrays or objects.
+  - Passing array elements as arguments to functions.
+
+---
+
+### **Conclusion**
+
+The **rest** and **spread** operators enhance the flexibility and readability of JavaScript code. While the rest operator is great for gathering values, the spread operator is ideal for spreading or copying them. Together, they simplify many common coding tasks.