JS Spread Operator: How It Works and Why It's Useful
Tags: webdev, javascript, productivity, codenewbie
Published: 2020-11-30 03:29:01

The spread operator is a super useful piece of syntax, introduced with the ES6/ ES2015 version of Javascript.

**Main Function**
The spread operator allows an iterable (array expression or string) to be expanded. So what does that even mean?

**Basically, there are 3 places to use spread:**
1. function calls(executing a function)
2. array literals (making a new array)
3. object literals (making a new object)

##Function Calls
Lets say we have an array:
``` javascript
const emojis = ["sad face", "happy face", "heart", "sun"]
```
If I console.log, I would get back an array of strings.
``` javascript
console.log(emojis)
// => ["sad face", "happy face", "heart", "sun"]
```
What if I just wanted the content inside of the array? This is where the spread operator comes in.
``` javascript
console.log(...tvShows)
// => sad face happy face heart sun
```
The spread operator gives us the capability of extracting these values from the array.

Summary:
We can spread an iterable into separate arguments in a function call. 

##Array Literals
Quickly copy, add on, and create arrays based on existing arrays.

Let's say we have the following:
``` javascript
const dogs = ["Bud", "Champion"]
const cats = ["Stella", "Dolly"]
```
What if I want to join these 2 arrays? I could do something like this:
``` javascript
const pets = [dogs, cats]
// => [Array(2), Array(3)]
```
The return value would be a nested array.

What if I just want to get back one array?
``` javascript
const pets = [...dogs, ...cats]
// => ["Bud", "Champion", "Stella", "Dolly"] // YAY!
```
Note: order DOES matter. Because we put in dogs before cats, we got dogs first on the list.

**more examples:**
``` javascript
[...dogs,"Buddy","cats", "Chester"]
// =>["Bud", "Champion", "Buddy", "Stella", "Dolly", "Chester"]
```
##Copying Arrays(this works for objects too) 
Let's say we want to make copies of the following:
``` javascript
const colors = ["green","blue", "yellow"]
```
In Javascript, if you set a variable equal to an existing array, they are linked and will point to the same thing in memory.
``` javascript
const colorCopy = colors
colorCopy.push("white")

colorCopy
// => ["green","blue", "yellow", "white"]

colors // original array also got updated :(
// => ["green","blue", "yellow", "white"]
```
this updates our copy, but it ALSO updates our original. That's not what we want!

One good reason for using the spread operator is that it is non-destructive. Here's how we can make a copy of the original, without manipulating the original array:
``` javascript
const colorCopy = [...colors]
colorCopy.push("white")

colorCopy
// => ["green","blue", "yellow", "white"]

colors // original array
// => ["green","blue", "yellow"]
```
Note: spread only goes one level deep when copying an array.

**Conclusion**
Using the spread operator can be so useful! I hope this was a helpful breakdown.

###Resources
* [Colt Steele](https://www.youtube.com/watch?v=pYI-UuZVtHI)
* [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
* Photo by [Daria Shevtsova](https://www.pexels.com/@daria?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) from Pexels