...Spread and ...Rest Operator
Tags: whatilearnedtoday, javascript, beginners, react
Published: 2021-02-18 02:49:55

Hello, today I will be talking about the Spread and Rest operator, and give sample situations where they are most commonly used. As a beginner is hard to tell which one is the right operator since they share the same syntax. However, these operators are complete opposites in the way they behave.

The first thing to understand about each of these operators is that the `...` **Spread operator expands** arrays, strings, and objects into single elements, and the `...` **Rest operator combines** elements into an array. This can be better understood in practice so let's dive right into each context where they are presented.

In the following examples, I will show where the Spread and Rest operators are used and show a reminder of how each of the following situations used to be done before the operators were implemented.

## Spread Operator
### Concatenate Arrays

```javascript
const names = ["Wade", "Samantha"];
const moreNames = ["Daito", "Helen"];

const allNames = [...names, ...moreNames];

console.log(allNames); // ["Wade", "Samantha", "Daito", "Helen"]
```
> Arrays can also be concatenated with `Array.prototype.concat()`.

### Copy Arrays

```javascript
const actions = ["run", "climb", "walk"];

const actionsCopy = [...actions];

console.log(actions); // ["run", "climb", "walk"]
console.log(actionsCopy); // ["run", "climb", "walk"]
```
> There are multiple ways to copy arrays like using the `Array.prototype.slice()` method.

### Merge Objects

```javascript 
const food = { dish: 'Sushi'};
const description = {type: "Japanese", servings: 8};

const dishInfo = {...food, ...description}; // fix

console.log(dishInfo); // {dish: "Sushi", type: "Japanese", servings: 8}
```
> Objects can also be merged or copied with `Object.assign()`.

### Expand Strings into Single Elements

```javascript
const place = "The Oasis"
const elements = [...place];
console.log(elements) // ["T", "h", "e", " ", "O", "a", "s", "i", "s"] 
```
> Strings can also be split with `String.prototype.split()`.

### Pass elements as arguments to a function

```javascript
const numbers = [10, 6, 3];
const multiplyNumber = (a, b, c) => {
  console.log(a*b*c);
};

multiplyNumber(...numbers); // 180
```
> Passing elements as arguments to a function can also be done with `Function.prototype.apply()`.

## Rest Operator
### Pass an indefinite amount of arguments to a function

```javascript
const getTotal = (...rest) => {
  console.log(rest); // [4, 5, 1, 8, 10]
  const total =  rest.reduce((acc, currentValue) => {
    return acc + currentValue;
  }, 0);
  console.log(total); // 28
};

getTotal(4, 5, 1, 8, 10);
```
> The `arguments` object can also be used when passing an indefinite amount of arguments to a function.

### Using rest with Destructuring

#### Arrays

```javascript
const [a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7];
console.log(rest); // Output: [3, 4, 5, 6, 7]
```
####Objects

```javascript
const { a, b, ...rest } = { a: 12, b: 43, c: 67, d: 17 };
console.log(a); // 12
console.log(b); // 43
console.log(rest); // {c: 67, d: 17}
```

Thank you for reading!😃 and let me know what other cool things the Spread and Rest operator can do. Happy Coding!!