Rest and Spread operators introduced in Es6. both have the same syntax ... rest operator and spread operator are prefixed with three dots (...)

Let's first take a look at the rest parameter(...)

Rest(...) 🫴

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array

Before the Es6 arguments object of a function is used, the arguments object is not like an array type, Therefore we can not use any array method on arguments objects

function getValue(){
console.log(arguments) // { 0: 1, 1: 2,2: 3, }
console.log(argurmets[0])  // 1
console.log(argurmets[1])  // 2 
console.log(argurmets[2])  // 3
}
getvalue(1,2,3)

Rest in function argument list ( ...arg)

Let's take look at the rest parameter of a function

rest parameter should be at last in a list of arguments cause it contains all remaining arguments rest(a, b, ...arg ) ✅, rest(a, ...rest, b)❌
In the argument more the one rest parameter is not allowed rest(...arg) ✅ ,rest( ...arg , ...arg) ❌

function getValue(...arg, a ,b ){
// error 
}
function getValue( a, ...arg ,b ){
// error 
}
function getValue(a, b, ...arg){
// correct
}

function rest(...arg){
console.log(arg.find(e=>e==2)); // 2
}
rest(1,2,3,3,4)

Destructuring using rest property

Destructuring is the most useful way to unpack values from arrays, or properties from objects, into distinct variables. let's see some examples of destructuring using the rest property

const arr =[ 1, 2, 3, 4] 
const [ one, two, ...rest ] = arr
console.log(one) //  1
console.log(two) //  2
console.log(rest) //  3

const obj={
one:  1, two: 2, three: 3, four: 4
}
const { one ,two, ...rest } = obj
console.log(one) // 1
console.log(two) // 2
console.log(three) // { three: 3, four: 4}

Destructuring has the same rules for rest property

rest property should be in the last of the array or object
can use only one rest property

...Spread operator

The spread operator is used to spread an array or object into a new array or object

array can be spread into array and object
plane object can't spread into an array but we can spread object into the object
only iterable objects can be spread in function parameters like array

const arr1= [1, 2, 2, 3]
const arr2 =[4,5,5 ]
const arr3 =[...arr1, ...arr2 ] // [1,2,2,3,4,5,5]

console.log({ ...arr})   // {0:1, 1:2, 2:2, 3:3 }

const obj = { one :1 ,two :2 ,three: 3}
console.log( ...obj)  //{ one :1 ,two :2 ,three: 3}  
console.log([...obj] ) // TypeError: obj is not iterable

function getValue(...args){
console.log(args)
}
getValue(1, 2, ...[3,4,5] ,6 ,7, true )

Deep copy using the spread operator

The spread operator makes deep copies of data if the data is not nested.


const arr = [1, 2, 3, 4, 5]
const deep = [...arr]
const shallow = arr

arr.pop()

console.log(arr) //  [1, 2, 3, 4,]  
console.log(deep)  //  [1, 2, 3, 4, 5]
console.log(shallow) //  [1, 2, 3, 4]

defining the variable which references the original array can update if I update the original array or by updating using reference ( in case of shallow, we don't have new memory for sharrow array )

using the spread operator to create the new arr [] or obj {}, creates the new array or object in memory, and copies each element of the original array or object into the memory( In the case of deep we have a new array in memory if I try to update the deep array, can see the change in only deep array )

click here for more information on deep and shallow copy

Conclusion

rest and spread operator both have the same syntax ...
rest operator used to collect all arguments in a single array
We can not apply array methods on arguments object but we can apply array methods on rest parameter
rest operator is also used in destructuring
spread operator I use to spread the object, array, and string. iterable objects, like Array, can be spread in array and function parameters
using the spread operator we can create a deep copy of an array of objects because the spread operator creates new memory from the array and objects

Mangesh Thakre's Blog