JavaScript Spread Vs Rest vs Set Vs Map - #Amazing Facts & Cheat code

To Understand the above concepts we need to know what are Arrays ?

We can simply say that Array is a bag that contains different elements.

JavaScript uses three dots (...) for both the rest and spread operators. But these two operators are not the same

Let's Understand Spread Operator(...args) :

• Spread :

What the spread operator basically does is spread out array elements. In cases where we require all the elements of an iterable or object to help us achieve a task, we use a spread operator. It allows us to quickly copy all or part of an existing array or object into another array or object.

Let's take an example: if we want to combine two different arrays without using .concat() method.

Let's Understand Rest Operator(...args) :

• Rest :

The Rest operator is the exact opposite of the Spread Operator. The rest parameter syntax allows a function to accept an indefinite number of arguments as an array. It basically used to pack individual elements into an array. In functions when we require to pass arguments but were not sure how many we have to pass, the rest parameter makes it easier.

Let's take an example: We want to add numbers but we don't know how many of them are in this case we use the rest operator. In the following example, we can see that we can add unlimited numbers.

Let's Understand Set() :

• Set() :

A JavaScript Set is a collection of unique values. Each value can only occur once in a Set. A Set can hold any value of any data type & it is always unique.

In the above example, we observed that Array2 is only returning unique elements present in Array1 as use Set() in it. The syntax for a set is simple, we just need to use new keyword before calling a set.

Let's understand the Commonly used Methods in Sets :

Let's deep dive into the above example :

First, we declare an Array of repeating elements and use Set() to create a new Array2 with unique elements from Array1.

.add(): To add a new element to an Array

.delete(): To delete an existing element from an Array

.has(): To check if the element is present in an Array or not, returns True if yes else returns False

Let's move to Map() Operator :

• Map() :

The Map object holds key-value pairs and remembers the original insertion order of the keys. We can create a Map using new keyword

from the above example, we can observe that Map() can also be created by using new keyword like it was used in Set().

Using .set() method we can create Map() elements where in first is key and 2nd is the value associated with it.

First, we assigned a to apple, b to ball and c to cat using .set() method. Using the .get() method we get the value associated with a specific keyword. Using .delete() we deleted the key: value pair.

Hence here conclude this article on Javascript Spread, Rest, Set and Map Operator in-depth. If you feel I have missed something feel free to comment on it.

If you took the time to read this article, I won't mind if you follow me. It only serves as inspiration for me to write another new article for you. Thank You !