Rest and spread operator in javascript

 

Absolutely 👍 — here are several practical and clear examples of the rest operator (...) in JavaScript, covering functions, arrays, and objects 👇

---

🧮 1. Rest in Function Parameters

When you don’t know how many arguments a function will receive:

function multiply(factor, ...numbers) {
  return numbers.map(n => n * factor);
}

console.log(multiply(2, 1, 2, 3, 4)); 
// Output: [2, 4, 6, 8]

👉 factor gets the first argument (2), and ...numbers collects the rest into an array [1, 2, 3, 4].

---

🧑‍🤝‍🧑 2. Rest with Array Destructuring

You can collect remaining array elements into a variable:

const fruits = ["apple", "banana", "mango", "orange"];

const [first, second, ...others] = fruits;
console.log(first);  // "apple"
console.log(second); // "banana"
console.log(others); // ["mango", "orange"]

👉 The rest operator gathers all remaining elements after the first two.

---

🗃️ 3. Rest with Object Destructuring

You can extract specific properties and collect the rest into a new object:

const person = {
  name: "Ayush",
  age: 25,
  country: "Nepal",
  profession: "Teacher"
};

const { name, ...details } = person;
console.log(name);     // "Ayush"
console.log(details);  // { age: 25, country: "Nepal", profession: "Teacher" }

👉 Here, ...details contains all other key-value pairs except name.

---

🧑‍🏫 4. Rest in Arrow Functions

Useful in simple arrow functions that accept flexible parameters:

const sumAll = (...nums) => nums.reduce((a, b) => a + b, 0);

console.log(sumAll(5, 10, 15)); // 30

👉 The rest operator allows the function to accept any number of arguments.

---

🧩 5. Combining Named and Rest Parameters

Mixing normal parameters with rest:

function show(first, ...rest) {
  console.log("First:", first);
  console.log("Rest:", rest);
}

show("A", "B", "C", "D");
// Output:
// First: A
// Rest: ["B", "C", "D"]



🌟 1. Spread in Arrays
✅ a. Copying an Array
const fruits = ["apple", "banana", "mango"];
const copy = [...fruits];

console.log(copy); // ["apple", "banana", "mango"]

👉 The spread operator makes a shallow copy of the array (not just a reference).

✅ b. Merging Arrays
const a = [1, 2, 3];
const b = [4, 5];
const combined = [...a, ...b];

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

👉 It spreads elements of both arrays into one.

✅ c. Adding Elements Easily
const nums = [2, 3, 4];
const newNums = [1, ...nums, 5];

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

👉 You can insert elements before and after spreading.

🧮 2. Spread in Function Calls
When a function expects multiple arguments but you have them in an array.
const numbers = [10, 20, 30];

console.log(Math.max(...numbers)); // 30

👉 The array is expanded into individual arguments.

🧑‍🏫 3. Spread in Objects
✅ a. Copying an Object
const student = { name: "Ayush", age: 25 };
const copyStudent = { ...student };

console.log(copyStudent); // { name: "Ayush", age: 25 }

👉 Makes a shallow copy of an object.

✅ b. Merging Objects
const personal = { name: "Ayush", age: 25 };
const contact = { email: "ayush@mail.com", country: "Nepal" };

const profile = { ...personal, ...contact };
console.log(profile);
// { name: "Ayush", age: 25, email: "ayush@mail.com", country: "Nepal" }

👉 Combines properties from multiple objects into one.

✅ c. Overriding Properties
const user = { name: "Ayush", role: "student" };
const update = { role: "teacher" };

const newUser = { ...user, ...update };
console.log(newUser); // { name: "Ayush", role: "teacher" }

👉 Later properties overwrite earlier ones.

⚡ 4. Spread with Strings
You can spread a string into an array of characters.
const name = "Hello";
const letters = [...name];

console.log(letters); // ["H", "e", "l", "l", "o"]

👉 Each character becomes a separate element.

⚖️ Summary Table
Purpose
Example
Explanation
Copying
const arr2 = [...arr1]
Duplicates an array
Combining
[...a, ...b]
Joins arrays
Function arguments
Math.max(...nums)
Expands array into arguments
Objects
{...obj1, ...obj2}
Merges or copies objects
Strings
[...str]
Converts string to characters