Three dots "..." in JS - Spread and Rest explained
Tags: webdev, codenewbie, javascript, learning
Published: 2020-03-25 21:01:33

Three dots `...` is one of the favorites for JavaScript developers as it has a lot of use cases which makes their life easier.

Well, you can see this operator in JS concepts - spread, rest. Let me make one thing clear before we begin, the syntax is the same in both but use-cases are different.

As the syntax is the same it might be very confusing, especially in the interviews (as you might be tensed) when the interviewer tries to trick you on this. Believe me, I have made mistakes on this in my first JS interview 😅.

---

## spread

The spread operator will be used to split up array elements or object properties *(hence, the name spread, i.e. “spread the elements of an array/objects in a new array/objects”)*. Let's just understand what I just said.


```javascript
const newArray = [...oldArray, 1, 2]
const newObject = [...oldObject, newProp : 'a']
```

You can quickly check the examples below to understand it better

### - **arrays**


```javascript
const numbers = [1, 2, 3, 4]

const numbers_with_spread = [...numbers, 5, 6]

const numbers_without_spread = [numbers, 5, 6]

console.log(numbers_with_spread)

console.log(numbers_without_spread)
```

You'll get an output as 

```javascript
[1, 2, 3, 4, 5, 6]
[[1, 2, 3, 4], 5, 6]
```

### - **objects**
Now, let's check the same with objects

```javascript
const human = {
  name : "Kedar"
}

const human_age_with_spread = {
  ...human,
  age : '21'
}

const human_age_without_spread = {
  human,
  age : '21'
}


console.log(human_age_with_spread)
console.log(human_age_without_spread)
```

you get the output as

```javascript

[object Object] {
  age: "21",
  name: "Kedar"
}
[object Object] {
  age: "21",
  human: [object Object] {
    name: "Kedar"
  }
}
```

---

## rest

we can say it's a collection remaining elements *(hence, the name rest, i.e. “the rest of the elements”)* in an array. Its mainly used for merging a list of functional arguments into an array i.e. you can use this when you don't know how many arguments will be passed to your method

Let's have a look at an example

```javascript
const more_than_three = (...args) => {
  console.log(args)  /* lets see what's in args */
  return console.log(args.filter((x) => x > 3))
}

more_than_three(1,2,3,4,5,6,7,8)
```

You will receive output as 
```javascript
[1, 2, 3, 4, 5, 6, 7, 8]
[4, 5, 6, 7, 8]
``` 

---
### WOW! and there you have it

this was just to make things clear. of course, if you wanna deep dive docs [spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax),[rest](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) are the best options.

Hope you are clear with this now
Happy Learning!

--
Here are few of my other posts which may be helpful to you.

{% link https://dev.to/kedark/free-illustrations-resources-for-the-web-make-your-next-project-cooler-525c %} 

{% link https://dev.to/kedark/the-linux-guide-cheatsheet-commands-directories-etc-39k0 %}

{% link https://dev.to/kedark/creating-machine-learning-models-just-got-easy-h8j %}

{% link https://dev.to/kedark/things-to-consider-for-good-typography-on-the-web-22nm %}

>If my posts or resources I share has helped you in some way, please consider buying me a [coffee](https://www.buymeacoffee.com/puRIsFz). It will help me pay my tuition fee and encourage me to share amazing and useful stuff with you all.