# The Three Dots of JavaScript: Rest and Spread Operator

The ES2018 introduced us with the concept of the `rest` and `spread` operators. Though the ES2015 already introduced us the `spread` operator, ES2018 further expanded the syntax by adding spread properties to object literals. Both of them become very useful when we need to copy an array or object, or when we need to pass an indefinite amount of arguments into a function. Here, we'll discuss both the `rest` and `spread` operators.

## The Rest Operator 💆‍♂️

![](https://media.giphy.com/media/fdlcvptCs4qsM/giphy.gif)*Gif from [Giphy](https://giphy.com)*

ES2018 introduced us the concept of `rest` operator. The `rest` operator looks like any regular argument except that it has three dots(`...`) in front of it. The `rest` operator will gather all the elements passed in the function argument and will create an array with it. Let's see it in action. 

```javascript
function letsRest(...args) {
    console.log(args);
}

letsRest(1, 2, 3, 4); // [1, 2, 3, 4]
```

We are passing the arguments as rest parameters with the help of `...args` argument in the function definition. The parameters passed in the function will now create an array.

We can work with this array now. Any array methods can also be implemented in this array. And also, our function now can take an indefinite amount of arguments. Now, let's build a function with the help of rest parameters that will return the sum of all the arguments passed.

```javascript
function sumAll(...args) {
    let sum = 0;
    for(let arg of args){
        sum = sum + arg;
    }
    return sum;
}

sumAll(1, 2, 3); //6
sumAll(1, 2, 3, 4); //10
```

We are using the `rest` operator to pass arguments and using a `for-of` loop to loop through all the elements and adding them into a variable sum. We can also pass regular parameters along with `rest` parameters in a function.

```javascript
function iLove(name, ...items){
    console.log(`I am ${name}, and I love ${items}`)
}
iLove("nemo", "apple", "banana", "lemon") 
//I am nemo, and I love apple,banana,lemon
```

Here, we are combining normal parameters along with `rest` parameters.
One thing to keep in mind when working with `rest` operators is that the argument with `rest` operator has to be the last argument passed. Because its job is to collect all the remaining arguments passed. So, the above example will work perfectly. 
But in the below code, we are passing a third argument after the `rest` parameter. This will return an error `Uncaught SyntaxError: Rest parameter must be the last formal parameter`.

```javascript
function iLove(name, ...items, age){
    console.log(`I am ${name}, I am ${age} and I love ${items}`)
}
iLove("nemo", "apple", "banana", "lemon", 18);
```

## The Spread Operator 🧈

![](https://media.giphy.com/media/ZAqPc6fdwwo97X8HNP/giphy.gif)* Gif from [Giphy](https://giphy.com)*

As the name suggests, the `spread` operator spreads the elements. It looks exactly like the `rest` operator. But, it works like a complement to the `rest` operator. The `rest` operator is defined in the function definition. 

The `spread` operator will expand an array, string or object. Let's say, we want to clone all the values inside an array into a new one. Without the `spread` operator, we'll have to manually define all the values inside the new array like this,

```javascript
let arr = [1, 2, 3];
let arr2 = [arr[0], arr[1], arr[2], 4, 5, 6]
```

Do you think this is an efficient solution? This needs a hell lot of writing. The `spread` operator makes it much easy to do such an operation.

```javascript
let arr = [1, 2, 3];
let arr2 = [...arr, 4, 5, 6];

console.log(arr2); //[ 1, 2, 3, 4, 5, 6 ]
```

We can also copy an array by simply using,

```javascript
const arr3 = [...arr];
```

We can even clone an object with this syntax,

```javascript
let obj = {
    1: 👩,
    2: 👨,
    3: 🧑
}
const obj2 = {...obj};

console.log(obj2); //{ 1: 👩, 2: 👨, 3: 🧑 }
```

## Conclusion 🙇‍♂️

Both the `rest` and `spread` operator might seem confusing because both of them uses a ... syntax. So, how do we know where to use what? I remember it like this,

> Rest __Packs__ the Elements, Spread __Unpacks__ the Elements.

Depending on your use case, you can choose which one you need.

---

If you liked this article, leave a ❤ and a comment. You can also follow me on [twitter](https://twitter.com/Ami_Subha).