A Guide to Rest and Spread: Part 2
Tags: javascript, es6, beginners, webdev
Published: 2019-06-21 18:48:43

---
series: What does ... mean in JavaScript? 
title: A Guide to Rest and Spread: Part 2
published: true
description: A dive into the spread operator and its use cases
tags: javascript, es6, beginners, webdev 
---

In Part 1, we briefly explained the difference between the rest parameter and the spread operator, and took a deep dive into the rest parameter. This post will continue on to take a dive into the spread operator. Here are the quick explanations from part 1 for a quick concept refresher:  

**Rest parameter:** collects all remaining elements or arguments into an array.

**Spread operator:** allows iterables such as arrays and strings to be expanded into single arguments or elements. Object expressions will be expanded into another object.  

  

## Dive into the spread operator 
In the previous post we saw the rest operator took some individual elements or arguments and collected them into one array. The spread operator essentially has the opposite function. It takes an iterable and expands it into multiple individual elements or arguments. Lets look at what this looks like in code and situations in which it is helpful to use. 

### Using the spread operator with:
- **a string** will give you the individual characters of the string 
```javascript
let aString = "spread string"
console.log(...aString) // s p r e a d  s t r i n g

```
- **an array** will give you the individual elements in the array 
```javascript
let anArray = ["puppies", "kittens", 5, null]
console.log(...anArray) // puppies kittens 5 null
```
- **an object** will give you 
```javascript
let anObject = {"name": "Angelika",
                "hairColor": "purple"}
console.log(...anObject) // Whoops we get a TypeError because anObject is not an iterable
console.log({...anObject}) // but we can spread it into another object and get
// {"name": "Angelika", "hairColor": "purple"}
```

Now that we understand the basics of what the spread operator does, lets look into how we would actually use it in our code. 

### Spread Operator Use Cases:
 
#### Copying arrays
If we want to make a copy of an array we can spread the array into another array literal like so:

```javascript
let anArray = ["puppies", "kittens", 5, null]
let copyOfAnArray = [...anArray]
console.log(copyOfAnArray) // ["puppies", "kittens", 5, null]
```

#### Combining arrays
We can use the spread operator to combine arrays into a new array of all the individual elements like so:

```javascript
let dogs = ["beagle", "corgi", "labrador", "poodle"]
let cats = ["persian", "ragdoll", "munchkin", "siamese"]
let animals = [...dogs, ...cats] 
console.log(animals) // ["beagle", "corgi", "labrador", "poodle", "persian", "ragdoll", "munchkin", "siamese"]
```
If we didn't use the spread operator here we would get an array of two arrays. 
```javascript
animals = [dogs, cats]
console.log(animals)
// [["beagle", "corgi", "labrador", "poodle"], ["persian", "ragdoll", "munchkin", "siamese"]]
```


#### Passing elements of an array as arguments to a function 
If we have an array of elements and we want to use those elements as the arguments to a function we can use the spread syntax instead of using the `apply` method. In the fruits function below we have 3 parameters describing types of fruits. We have an args array whose elements we want to use as the arguments to the function. By using the spread operator on the args array, the elements will be passed in as the arguments to the function instead of the whole array as one argument. 

```javascript
function fruits(citrusFruit, stoneFruit, berry) {}
var args = ["lemon", "plum", "strawberry"]
fruits(...args) 
// this is equivalent to calling fruits like so: 
// fruits("lemon", "plum", "strawberry")
fruits(args)
// this is equivalent to calling fruits like so:
// fruits(["lemon", "plum", "strawberry"])
// which is not what we want
```
Using the above knowledge we can see how this can be useful with Math functions

```javascript
let numbers = [10, 99, 5, 23, 4]
Math.min(...numbers) // 4
Math.max(...numbers) // 99
```

#### Object Spread

We can use spread to create a shallow copy of an object in another object and add a property to it without changing the original object. In the example below we have an object `primitiveTypes` that has some examples of primitive types as key value pairs. We then create a  new object `dataTypes` that uses the spread operator to spread all the properties in `primitiveTypes` into dataTypes, and we also add one more property. 

```javascript
const primitiveTypes = { "number" : 4, 
                         "string": "pizza",
                         "boolean" : true,
                         "null": null,
                         "undefined" : undefined, 
                        };              

const dataTypes = {...primitiveTypes, 
                   "array": ["stuff", "things"]
                   };

/* dataTypes object will be:
 { "number" : 4, 
   "string": "pizza",
   "boolean" : true,
   "null": null,
   "undefined" : undefined, 
   "array": ["stuff", "things"]
}
*/
```

We can also merge two objects together easily using spread like so:
```javascript
const obj1 = {"one": 1, "two" : 2}
const obj2 = {"three": 3, "four": 4}
const mergedObj = {...obj1, ...obj2}
// mergedObj will be
/* {"one": 1, "two" : 2, "three": 3, "four": 4} */
```

However we have to be careful when using spread with objects because we can override something we didn't mean to if we get the order wrong. Pay attention in the example below what happens to the value of the `citrus` key in `otherFruits` and `differentFruits` depending on where we use the spread operator to spread the original fruits object. 

```javascript
const fruits = {
                "citrus": "lemon",
                "stone": "plum"
                }
```
Order matters to determine if a key gets overridden! 

```javascript
const otherFruits = {
                     "citrus" : "lime",
                     "berry": "strawberry",
                     ...fruits
                    }
console.log(otherFruits) // {citrus: "lemon", berry: "strawberry", stone: "plum"}

const differentFruits = {
                         ...fruits, 
                         "citrus": "lime",
                         "berry": "strawberry"
                         }
console.log(differentFruits) // {citrus: "lime", stone: "plum", berry: "strawberry"}
```

Hopefully you have come away with a better understanding of what the spread operator does in JavaScript and some of its use cases. As always one of the best ways to get a better understanding of the concepts is to get some practice using them! 


If you have any questions, comments, or feedback - please let me know. Follow for new weekly posts about JavaScript, React, Python, and Django!