Rest and Spread Operators in JavaScript- Simplified

What is a "spread" operator in JavaScript?

Both Rest and Spread operators in JavaScript add several great features which make working with arrays a lot easier.
Moreover, the Spread operator helps expand iterables (here we will mainly be talking about arrays) into single elements.

The spread operator is denoted by (...).

Spread literals can ONLY be effectively implemented on arrays, literals and function calls. This operator was introduced in JavaScript with ES6.

Okay! now coming to " WHAT DOES SPREAD OPERATOR DO?"!!

As the name suggests, the spread operator just spreads the values in the array or string.

Let's see an example of the same:

Suppose we want to concatenate 2 arrays. So the basic approach will be to use .concat() function to perform this operation

const a = [4,5,6];
const b = [7,8,9];
const c = a.concat(b);
console.log(c); // [4,5,6,7,8,9]

This method works absolutely fine but we have to remember the "Concat" function. And it's hard to learn about all the in-built functions in JavaScript

This can be done without using any other function with the spread operator.

const a = [4,5,6];
const b = [7,8,9];
const c=[...a,...b];
console.log(c); //[4,5,6,7,8,9]

Both methods will give out the same result.

Things to keep in mind while using the spread(...) operator:

1. The spread operator only works on the value of iterable objects only. Some examples of iterable objects are- array, string, map and set.

2. The spread operator cannot be used to copy the properties of objects.

What is the Rest operator in JavaScript?

The "REST" operator also uses (...) to denote itself. It was also introduced in JavaScript with ES6.

The main function of the rest operator highlights the value of the array that the user has to use by combining other values into an array and denoting it by (...rest).

The text 'rest', simply references the values that we have encased inside the array.

Let's see an example to understand rest better

 function personalnfo(fName,lName, ...otherInfo){
    return otherInfo;
}

//invoking the function
personalInfo("Niyati", "Nehal", "web developer", "crazy");

//output
["web developer","crazy"]

As the above example explains, the rest operator is used to store all the information that we do not need for a particular function.

This does not mean in any way that the information stored in 'rest' is junk information.

Conclusion

Here is a fun analogy to help you understand Rest and Spread.

We all love to travel right?

So, let's suppose you have to a very beautiful hill station, so you packed all your clothes and amazing accessories in 2 suitcases. But now you decide to go hiking (yes your friends forced you into it). So it's evident that you can't carry all those suitcases with you through the trek. So you decided to pack your essentials into a backpack. While packing your backpack, you will only keep whatever you will need during the trek.

This is how 'Rest' works too. It is like packing individual items - you can choose which items to pack in the suitcase and leave out the ones you don't need.

Now you came back from the trek and decided to explore the market. You decided to buy some things from the local shops. Then moved on to exploring some cafes and malls. You bought several snacks, accessories and souvenirs. This led to several small bags that you now have to pack.

So instead of packing each bag individually, you pack them together.
Spread operator does the work of combining everything into one large bag.

Hope this Analogy helps!