Spread Operator and Rest Operator

In modern JavaScript, there are two important operators you should be aware of, they are the Rest and the Spread operators. Let's start by talking about the Spread operator. Let's say you want to implement a pattern where you want to add a new array to an existing array but you don't want to alter the existing array. This is actually a common pattern called "immutability".

Using the Spread operator will create a new array by copying the old array in addition with the array you just added. The idea behind this is that we avoid errors because we always have this clear approach of copying or editing objects and don't want to edit existing objects which might lead to an unreadable code. Well, you might be wondering where the Slice array method come into play here. Let's write some codes to show how the slice and spread operator work.

Slice Method:

const courses = ['JavaScript', 'bootstrap', 'html', 'css', 'js'];

const copyCourses = courses.slice();

console.log(copyCourses);  // ["JavaScript", "bootstrap", "html", "css", "js"]

Let's assume we have this code:

const copyCourses = [courses];

console.log(copyCourses); [ ["JavaScript", "bootstrap", "html", "css", "js"] ]

This gives us a a new array where the old array is a nested array but not a copy. So, the outer array has only one element which is the inner array. We just created a nested array and that may not be want you want.

Spread Operator:

The spread operator syntax is adding three dots in front of an array or an object. They three dots take the array or object after the operator, pull out all the elements of an array or all the properties of an object and put it to whatever is around that spread operator. Let me show you how it works by writing some codes.

const courses = ['JavaScript', 'bootstrap', 'html', 'css', 'js'];

const copyCourses = [...courses];

console.log(copyCourses);  // ["JavaScript", "bootstrap", "html", "css", "js"]

We can also have it this way:

const copyCourses = ['Node', 'GraphQl',...courses];

console.log(copyCourses); // ["Node", "GraphQl", "JavaScript", "bootstrap", "html", "css", "js"]

Enough of examples with array, let's try another one with objects.

const courses = {
    name: 'JavaScript',
    age: 25,
    hobby: 'I love Learning spread and rest operator'
};

const copiedCourse = {...courses};

console.log(copiedCourse);  // {name: "JavaScript", age: 25, hobby: "I love Learning spread and rest operator"}

Now we have no nested array, we now have a copy of the old array plus the new array we added without altering the old array, I'm sure that makes sense.

The Rest Operator:

This operator works as an argument in a function. It is used to merge multiple arguments into an array in a function. Let me explain further by using codes as an example.

const restTesting = ( arg1, arg2, arg3, arg4) => {
    return [arg1, arg2, arg3, arg4];
}
console.log(restTesting(2,4,6,8)); // [2, 4, 6, 8]

This syntax is totally not flexible. What if we want to pass more arguments when calling the restTesting function, you will realize that it doesn't get added because we only passed four arguments in the function. This is where the Rest Operator comes into action.

const restTesting = (...args) => {
    return args;
}
console.log(restTesting(2,4,6,8,10,12));  // [2, 4, 6, 8, 10, 12]

The rest operator copies all the arguments in the called function, no matter how many we've passed and it will bundle them in an array for us.

In conclusion, the Rest Operator works just like the Spread Operator with three dots, but the place where you use it defines how you will call it. When you use it to pull elements/properties out of arrays/objects, it will be called the spread operator, while when you use it to merge multiple arguments in a function, then it is called the rest operator.

Thank you for taking your time to read my blog, don't forget to show some love and drop comments