Spread vs Rest Operator in Javascript
If you have worked in javascript environment you have definitely seen one of them most probably spread operator. They are very similar syntax wise but they really differs in the functionality part. Let's understand both one by one and then compare both.
Spread Operator
Imagine you have a glass of water, and you just poured the water inside this glass to another glass. This is the functionality of spread operator. It spreads the value from one array or object to another.
Whenever you want to make copy of an array or object you can use spread operator their
Syntax
const arr1 = [1,2,3,4];
const arr2 = [...arr1];
console.log(arr2)
arr2[4] = 5
console.log(arr2)
console.log(arr1)
--------------------------------------------------------
OUTPUT:
[ 1, 2, 3, 4 ]
[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4 ]
See in this example, we have arr1 and we have spread arr1 into a new array arr2. Now this arr2 is the copy of arr1 you can clearly see this as we have updated arr2 arr1 is still same.
Where You will see Spread Operator
With Objects.
With Arrays.
With Strings.
With Functions arguments.
Real life implementation of Spread Operator
Copying Arrays: (Already Covered above)
Merging Arrays: You can simply spread two arrays in one and they will merge
const a = [1,2,3];
const b = [3,4,5];
const newMergedArray = [...a, ...b]
console.log(newMergedArray)
--------------------------------------------------------
OUTPUT:
[ 1, 2, 3, 3, 4, 5 ]
- Passing as arguments in functions call:
const a = [1,2,3];
console.log(Math.min(...a))
--------------------------------------------------------
OUTPUT:
1
Rest Operator
Imagine you have a 500ml glass filled with water you poured this water into another 300ml glass now you are left with 200ml. Rest Operator is used to collect and denote this rest/ left water inside 500ml glass.
Rest Operator is used for collecting values. You can see in above image we have de-structure first and second and named rest as rest you can name it as anything
Syntax
// With Arrays
const a = [1,2,3,4]
const [first, second, ...left] = a;
console.log(left)
//With Objects
const b ={name: "Negi", age: 21, gender: "Male"}
const {name, ...details} = b;
console.log(details)
--------------------------------------------------------
OUTPUT:
[ 3, 4 ]
{ age: 21, gender: 'Male' }
For Visualizing
If you are working with arrays rest operator will kind of pack the rest of the values inside arrays and similarly for objects it will pack values inside objects. You can clearly see this from the above example.
Where You will see Rest Operator
Functions parameters
Array de-structuring
Object de-structuring
Spread vs Rest
Till now you might have got an idea about the difference between Spread and Rest Operator. The very core difference is one is used to expand values and another is used to collect value.
Spread Operator spread the values whereas Rest Operator is used for combining or collecting value.
Real-World Use Case of Both Operator
You are making a functions in which you don't know the number of arguments which will be passed in that function. Or you know that their will be many arguments but first one is name rest all are the sports that person played in his life. In these scenario rest operator will really help you
function nameAndSports(name, ...sports){
console.log(`\({name} have played these sports \){sports}`)
}
nameAndSports("Atul", "Cricket", "Football", "Kabaddi", "Rugby")
--------------------------------------------------------
OUTPUT:
Atul have played these sports Cricket,Football,Kabaddi,Rugby
Spread Operator is generally used for copying purpose if you want to copy an object or array we can use spread operator their
[NOTE]: Spread operator creates a shallow copy of object or array, meaning it will not copy the nested part of the data. For creating a deep copy you can use structuredClone() function in javascript.
Conclusion
The spread operator expands, the rest operator collects—but mastering when and why to use each is what truly elevates your JavaScript skills.
