Spread Operator (...args) ♨ & Rest Operator (...args) 🧤 in JavaScript 😵

Have you ever seen ... notation in JavaScript and wondered what is this? 🤔... Well, that is Spread Operator or Rest Operator.

Spread Operator and Rest Operator both looks the same ...args but the differences arises in the application of each of them.

In this article we will understand what this ... mean and how ...args is implemented in the code and what is the difference between the Spread Operator and Rest Operator.

Let's start with the Spread Operator first.

Spread Operator ♨

As the name suggests Spread Operator spreads the variable.

It can be used on iterables like Array, Object, String

const numbers = [1, 2, 3, 4];

console.log(numbers);         // output [1, 2, 3, 4] 
console.log(...numbers);      // output 1 2 3 4

As we can see in the above example ...numbers spread the elements of the array.

Uses of Spread Operator

Add array of elements to an existing array.

let alpha = ["a", "b", "c", "d"];
let num = [1, 2, 3, ...alpha, 4];

console.log(num)  // output [1, 2, 3, "a", "b", "c", "d", 4]

Spreads the alpha array into num array

Copy array

let arr = [1, 2, 3, 4];
let arr2 = [...arr];

// the above code is different then the below code
let a1 = [1, 2, 3, 4];
let a2 = a1;

In the top code all the elements of arr are copied into arr2 but in the below code reference of a1 array is stored in a2 variable. So is something is changed in a1 it automatically gets changed in a2 as well.

Concat arrays

let array1 = [1, 2, 3, 4];
let array2 = [11, 12, 13, 14];

// array1 = array1.concat(array2);
array1 = [...array1, "Hello", ...array2];
console.log(array1);  // output [1, 2, 3, 4, "Hello", 11, 12, 13, 14]

Spread Operator as an argument in a function

function add(x, y, z) {
   console.log(x + y + z);
}

let addNum = [1, 2, 3];
add(...addNum); // output = 6
// this is similar to add(1, 2, 3);

// if there is 4th element also in the array then this function will ignore it
let extraNum = [1, 2, 3, 4];
add(...extraNum); // output 6

...addNum spreads the elements 1, 2, and 3 to x, y, and z but if an extra element is there in the array that will be ignored.

Spread Operator as objects

Copy Objects

const obj = {
  hello: "There",
  how: "are",
  you: "son",
};

const copyObj = { ...obj };
console.log(copyObj);  // output { hello: 'There', how: 'are', you: 'son' }

Merge Objects

const obj = {
  hello: "There",
  how: "are",
  you: "son",
};

const obj2 = {
  i: "am",
  good: "dad"
};

const copyObj = { ...obj, ...obj2 };
console.log(copyObj);  // output { hello: 'There', how: 'are', you: 'son', i: 'am', good: 'dad' }

Spread Operator as a string

We can manipulate strings similar to array

const str = "HelloJs";
console.log(...str);  // H e l l o J s

Concat string

let str1 = "Hello;
let str2 = "there;

// str1 = str1.concat(str2);
str1 = [...str1, ...str2];
console.log(str1); // output ['H', 'e', 'l', 'l', 'o', 't', 'h', 'e', 'r', 'e']

This was about Spread Operator

Now, let's understand Rest Operator

Rest Operator 🛌

As the name suggests Rest Operator includes Rest of the elements.

Rest operator allows a function to accept an indefinite number of arguments as an array.

In easy terms, Rest operator collects all the remaining elements and stores them into an array, this array can contain any number of elements and also this array is passed to a function as an argument.

Let us take an example for a better understanding

function display( ...argsArray) {
         console.log(argsArray)
}

display(1, 2, 3); // output [1, 2, 3]
display(1, 2, 3, 4); // output [1, 2, 3, 4]
display(1, 2, 3, 4, 5); // output [1, 2, 3, 4, 5]

As we can see in the above code ...argsArray collects all the arguments and stores it into an array called argsArray

Let's take one more example

function multiply(multiplier, ...argsArray) {
  return argsArray.map(function (element) {
    return multiplier * element;
  });
}

console.log(multiply(5, 1, 2, 3, 4, 5));  // outputs [5, 10, 15, 20, 25]

As we know ... (rest operator) combines the elements and stores it into an array thus array functions like map, filter, and reduce work on the argument (argsArray), and here as we are using .map function that returns an array.

Here we have two parameters multiplier and ...argsArray, so the first argument that we pass to the function multiply() will be assigned to the multiplier parameter and rest all will be passed to ...argsArray.

Some important points to keep in mind while working with Rest Operator

1. Always have the Rest Operator (...argsArray) as the last parameter while declaring the function.
2. it is not compulsory to name it ...argsArray, you can name it anything ...lol, literally anything.
3. ... will store all the remaining arguments, so make sure to pass the required parameters while declaring the function.

This was about Spread Operator and Rest Operator. 🤟

Summary:

• Spread Operator spreads the elements on an iterable
• Rest Operator collects elements and stores them into an array
• If ...argName is passed as an argument in a function then it is aRest Operator.
• If argName is an array and is passed into a function as ...argsName then it is a Spread Operator.

Hope this article added some value to your JavaScript knowledge and answered the question due to which you landed upon this article. 🤞

I have linked some resources to go in deep about Spread and Rest Operator.

1. Spread Operator
2. Rest Operator

Thank you for reading this article and keep reading and supporting !!! 😃