As mentioned in the title, the rest and the spread operator, despite being very similar, behaves very differently depending on the use case.
freeCodeCamp explanation of rest vs spread:
The main difference between rest and spread is that the rest operator puts the rest of some specific user-supplied values into a JavaScript array. But the spread syntax expands iterables into individual elements.
For this blog, I'll start with asking a question, demonstrating the use with an answer and then explaining what's really going on.
Note: It is absolutely necessary to use the 3 dots before the rest and spread operator variables. More Info
Rest operator:
Suppose we have an array ( let's name it dummyArr ) having values ["cat", "dog", "bear", "crow", ''giraffe"].
Question: Assign the value of the first 2 elements of the dummyArr in two different variables and store the rest of the elements in a third variable.
Ans:
let dummyArr = ["cat", "dog", "bear", "crow", "giraffe"];
// Classical way:
let name1 = dummyArr[0]
let name2 = dummyArr[1]
let otherNames = dummyArr.splice(2);
// Using the spread operator:
let [name1, name2, ...otherNames] = dummyArr;
console.log(name1); // "cat"
console.log(name2); // "dog"
console.log(otherNames); // [ 'bear', 'crow', 'giraffe' ]
Here, we are assigning the first 2 elements (cat & dog) from the dummyArr array to variables name1 and name2. The remaining elements in the dummyArr array (bear, crow, giraffe) are assigned to the otherNames variable. It is absolutely necessary to use the 3 dots (...) before the variable which you're going to use as the rest operator (here, ...otherNames).
Spread operator:
Question: Assign the value of the first 2 elements of the dummyArr in two different variables and skip the rest.
Ans:
let dummyArr = ["cat", "dog", "bear", "crow", "giraffe"];
// Classical way:
let name1 = dummyArr[0]
let name2 = dummyArr[1]
// Using the spread operator:
let [name1, name2] = [...dummyArr];
console.log(name1); //"cat"
console.log(name2); //"dog"
The spread operator spreads the elements of the array so that we can access each individual elements without the need of a for loop. Here, the elements of the dummyArr array was spread into individual entities and the required entities ( cat, dog ) were assigned to the new variables ( name1, name2).
Spread operator really shines when we are dealing with props in react!
Conclusion:
Although, I do realize that the examples that I have mentioned might not give the best possible explanation to the question, but it should be understood that the rest and the spread operator comes in very handy while dealing with large objects having n number of key-value pairs and similar.
While the spread operator enables us in accessing each individual element of an array/object, the rest operator on the other hand enables us to collect all the remaining elements and store them in a variable (similar to collecting toys and putting them in a toy bag ).
Resouces: