Rest vs spread in javascript

In javascript has lot of miss conception like spread and rest they look same or identical but there behaviour something different. Today in this articel we will discover what is the main dfferent between rest and spread.

Spread & Rest syntex...array

let array1 = [1,2]
let array2 = [3,4]
// we want to concat two array
// we can concat two way like

let array3 = [...array1, ...array2]
// another way 
let array3 = array1.concat(array2)

First example is concat through
spread operator you can use spread like you have 10 array you can concat via spread.

Second example is built-in javascript.

You can use it on string array.

let strArray = [..."developer life is tough"]
// output like devide all letter and space like array just try your self

The most important thing of array you can copy an array it called shallow copy.

Just keep in mind that this one only clone the first level. This work with primitive type, like number and string but not object

let arrToClone = [1,2,3,4,5,6,7,8]
let shallowCopy = [...arrToClone]

Let understand use of spread in object.

let obj1 ={
  age: 23,
  profession : 'developer'
}

let obj2 ={
  language: 'javascrip',
  girlfriend : false
}

let obj3 = {...obj1, ... obj2}
console.log(obj3)
// It will marge two object 

// we can shallow copy with object but conditions is obly first lavel like array 

let shallowCopyObj = {...obj1}

Last thing is Function.

In javascript function we can use it two way.

Rest

//this it rest
function exp(x,y,...other){
  return other;
}
// rest operator
exp(1,2,3,4,5,6,7,8,9)
// return [3,4,5,6,7,8,9]

Spread

function exp2(a,b,c){
  return a+b+c
}
let number = [1,2,3]

// spread operator
exp2(...number) 

Finally, we cover main different beetween rest and spread operations.

Summary

• when you use (...) on function parameter is called Rest

• when you use (...) on function argument is called Spread

• Spread operator help to merge object and array but conditionally.😄