Breaking Down ES6: Spread Operator
Tags: javascript, beginners, codenewbie, webdev
Published: 2019-06-25 22:03:37

---
title: Breaking Down ES6: Spread Operator
published: true
description: A description of JavaScripts spread operator.
tags: javascript, beginners, codenewbie, webdev
series: Breaking Down ES6
---

Last week I started this blog series to break down the new tools introduced in ES6 by writing about `let` and `const`. This week I am going to jump into the spread operator, which is expressed by three consecutive dots: `…`. 

This tool serves many purposes and I’ll be covering a few of the important ones. For the purpose of this post, however, I will not be discussing the use of the spread operator on objects, as that was not introduced until ES9.

So, let’s go ahead and jump on in.

## Concatenating Arrays

In JavaScript, we use the `concat()` method to combine two or more arrays together. Using this method does not change the existing arrays but returns a new array. 

```javascript
let languages = ["JavaScript", "Ruby", "SQL"]
let frameworks = ["React", "Rails"]
let myStack = languages.concat(frameworks)

console.log(myStack) // ["JavaScript", "Ruby", "SQL", "React", "Rails"] 
```

We can mirror this method and receive the same results by utilizing the spread operator instead of `concat()`. 

```javascript
let languages = ["JavaScript", "Ruby", "SQL"]
let frameworks = ["React", "Rails"]
let myStack = [...languages, ...frameworks]

console.log(myStack) // ["JavaScript", "Ruby", "SQL", "React", “Rails"]
```

*Note: Using the spread operator in this case is not recommended, as using `concat()` is faster comparatively.*

## Copying an Array

When it comes to copying one array into another, aka assigning the value of a new array to an existing array, the spread operator is an awesome tool to use. Before ES6 and the introduction of the spread operator, you could accomplish this but there was one tiny snag. If you attempted to alter the new array, it also affected the original array.

```javascript
let myStack = ["JavaScript", "Ruby"]
let myStack2 = myStack

console.log(myStack2) // ["JavaScript", "Ruby"]
myStack2.push("SQL")
console.log(myStack) // ["JavaScript", "Ruby", "SQL"]
```  

With the spread operator, this issue is eliminated. You can safely alter the new array without changing the original array. 

```javascript
let myStack = ["JavaScript", "Ruby"]
let myStack2 = [...myStack]

console.log(myStack2) // ["JavaScript", "Ruby"]
myStack2.push("SQL")
console.log(myStack) // ["JavaScript", "Ruby"]
```

## Expanding an Array

In order to expand an array, aka inserting one array into another at any given location, and keep the resulting array flat, we want to use the spread operator. Before ES6, if you expanded an array, you would end up with a nested array. 

```javascript
let myStack = ["JavaScript", "Ruby"]
let techLanguages = ["Python", myStack, "Java"]

console.log(techLanguages) // ["Python", ["JavaScript", "Ruby"], “Java"]
```

Luckily for us, the spread operator makes it easy to expand an array without creating a nested array. 

```javascript
let myStack = ["JavaScript", "Ruby"]
let techLanguages = ["Python", ...myStack, "Java"]

console.log(techLanguages) // ["Python", "JavaScript", "Ruby", “Java"]
```

## String to Array

One neat little thing about the spread operator is that you can turn a string into an array. I can’t think of any great use cases for it off the top of my head, but I thought I’d include this little tidbit for fun.

```javascript
let ruby = "Ruby"
let char = [...ruby]

console.log(char) // ["R", "u", "b", “y"]
``` 

## Math

The spread operator makes it possible to place an array in `Math` object methods. Without using the spread operator, the output would be `NaN`. 

```javascript
let nums = [1, 2, 5, 9]

Math.max(nums) // NaN
```

When using the spread operator, it allows the contents of the array to be read as a list of numbers instead of an array.

```javascript
let nums = [1, 3, 5, 7, 9, 11, 13]

Math.max(…nums) // 13
```

### Final Thoughts

While I have not covered every single aspect of the spread operator, I did cover a few of the most popular use cases of it. For those of you reading this, please feel free to expand on the discussion and mention other purposes of the spread operator. 

#### Sources
[JavaScript | Spread Operator](https://www.geeksforgeeks.org/javascript-spread-operator/)
[6 Great Uses of the Spread Operator](https://davidwalsh.name/spread-operator)
[A Simple Guide to Restructuring and ES6 Spread Operator](https://codeburst.io/a-simple-guide-to-destructuring-and-es6-spread-operator-e02212af5831)
[JavaScript ES6 - The Spread Syntax (…)](https://codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754)
[Spread Syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
[[ECMAScript - Object Rest/Spread Properties in ES2018 (ES9)](https://nitayneeman.com/posts/object-rest-and-spread-properties-in-ecmascript-2018/)