JS & Three Dots …

Photo by NEXT Academy on Unsplash

With the introduction of ES6 (ES2015) it did ease our life to a greater extent with various features & one of them being referred by the three dots with two different use of it …

a. The Rest Params
b. The Spread Operator

The Rest Params { …rest }

The basic idea of Rest Params is to cumulate or collect elements of any entity & pack as a single unit !

const employeeDetails = {
 name : "John Doe", 
 address : "NY" , 
 phone: "123-xxx", 
 salary : "xxxxx" 
}
const {salary, ...restParams} = employeeDetails
console.log(restParams) 
//Output : {name: "John Doe", address: "NY", phone: "123-xxx"}
console.log(salary) 
//Output : "xxxxx"

So the above example clearly showed that we have destructured the employeeDetails and apart from the salary property we have pack the rest of the properties in a single entity (restParams) preceded by Three dots
Note : The single entity name can be any name , we have used name restParams just for reading convention purpose.
Also to keep in account , rest params should be last entity or last argument in any use.

In functions:-

In JavaScript, it’s possible to call a function with any number of arguments.
We can use the rest parameter when we don’t know how many arguments will be used or just want to collect some of them into an array.

Let’s try an example where we add together all the values sent into our function:

function sum(...args) {   
 let result = 0;    
 for (let arg of args) 
 {     
   result += arg;   
 }    
 return result 
}  
console.log(sum(4, 2)) // -> 6 
console.log(sum(3, 4, 5, 6)) // -> 18
Incorrect Use of Rest Params :-
 const {...restParams, salary} = employeeDetails
 //Output :- Error: Rest element must be last element
const {salary, ...restParams1, ...restParams2} = employeeDetails
//Output :- Error: Rest element must be last element
** ONLY A SINGLE USE OF REST PARAMS IS POSSIBLE IN AN EXPRESSION & IF USING THEN THAT SHOULD BE THE LAST OCCURANCE IN THE EXPRESSION**

The Spread Operator { …spread }

The spread operator basically is used to unpack elements from an entity , it does exactly the opposite to what REST params does.

In terms of Arrays :

const array1 = [1, 3, 2];
console.log(...array1); //Output : 1 2 3
Or to copy an Array,
const array1 = [1, 2, 3];
const array2 = [...array1]
console.log(array1) //Output : [1,2,3]
console.log(array2) //Output : [1,2,3]
To compose several values to one,
const array1 = [1, 2, 3];
const array2 = [0, ...array1, 4]
console.log(array2) //Output : [0, 1, 2, 3, 4]

In terms of Objects :

Copies properties:
const user = {   name: 'John Doe',   age: 25 };  
const clonedUser = { ...user };
console.log(clonedUser) //Output : { name: "John Doe", age: 25 }
Merge two entities:
const testTeam = {Batsmen : "Virat", Bowler: "Bumrah"};
const odiTeam = {Opener : "Rohit", Spinner: "Jadeja"};
const indianTeam = {...testTeam, ...odiTeam}
console.log(indianTeam)
//Output:- { Batsmen: "Virat", Bowler: "Bumrah", Opener: "Rohit", Spinner: "Jadeja" }

So we can draw the conclusion that , whenever we try to extract certain properties from an entity or certain values as function parameters …
REST Params comes in handy & whenever we try to deal with the entire set of entity to be used …SPREAD Operator comes in handy !!

JS in ❤ !!