Rest vs Spread

In JavaScript, the rest and spread operators are both represented by three dots (...), but they serve different purposes based on the context in which they are used:

Rest Operator (...)

The rest operator collects multiple elements or properties and puts them into an array (for function arguments) or an object (for object properties).

In Function Parameters: It allows functions to accept an indefinite number of arguments as an array.

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

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

Here, ...numbers collects all the passed arguments into an array called numbers.

In Object Destructuring: It can be used to gather remaining properties into an object.

const user = { name: "John", age: 30, city: "New York" };
const { name, ...rest } = user;

console.log(name); // Output: John
console.log(rest); // Output: { age: 30, city: "New York" }

Spread Operator (...)

The spread operator is used to spread or unpack elements of an array or properties of an object into another array/object or into function arguments.

In Arrays: It allows you to expand the elements of an array.

const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];

console.log(moreNumbers); // Output: [1, 2, 3, 4, 5]

In Objects: It can be used to clone or merge objects.

const user = { name: "John", age: 30 };
const updatedUser = { ...user, city: "New York" };

console.log(updatedUser); // Output: { name: "John", age: 30, city: "New York" }

In Function Calls: It allows you to pass the elements of an array as individual arguments to a function.

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

Summary:

Rest (...) collects elements into an array or object.
Spread (...) expands elements from an array or object.
The distinction lies in whether you're collecting values (rest) or expanding them (spread).

can we say that rest and spread are vive-versa

Yes, you can say that rest and spread operators are "inverse" or "vice-versa" in a way because they perform complementary actions:

1. Rest (...) takes multiple individual elements and collects them into a single array or object.

2. Spread (...) takes an array or object and spreads its elements or properties into individual elements.

Example of Vice-Versa Use:

Rest Example:

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

sum(1, 2, 3); 
 // Collects arguments [1, 2, 3] into the "numbers" array

Spread Example:

const arr = [1, 2, 3];
sum(...arr);  // Spreads the array [1, 2, 3] into individual arguments (1, 2, 3)

In this way:

1. Rest is gathering multiple values into one structure (like an array).

2. Spread is taking a structure and expanding it into multiple values.

So, while they aren't exactly identical in behavior, they complement each other, and you can think of them as reverse operations of each other in many scenarios.

Trick to Rememmber:

Rest (...) is like a "Collector" and Spread (...) is like a "Distributor" of values

Rest is like many to one AND
spread is like one to many.