5 Uses for the Spread Operator
Tags: javascript, webdev, productivity, learning
Published: 2019-07-10 12:44:54

---
title: 5 Uses for the Spread Operator
published: true
description: JavaScript has a bunch of syntax that aims to make your life easier as a developer. The spread operator is a particularly popular option, so let's see what you can do with it!
tags: javascript, webdev, productivity, learning
cover_image: https://thepracticaldev.s3.amazonaws.com/i/57pfamxr4cm7unq65j0x.png
canonical_url: https://tenmilesquare.com/5-uses-for-the-spread-operator/
---

The spread operator is a favorite of JavaScript developers. It's a powerful piece of syntax that has numerous applications.

So many, in fact, that it's often hard to keep track of them all. In this post we're going to review 5 of the most common uses for the spread operator.

# Copying an array

This is one of the most common uses of the spread operator. Taking the contents of an array and "spreading it out" to fill another array.

```javascript
let arr = [1,2,3,4]
let copy = [...arr]
// copy is [ 1, 2, 3, 4 ]
```

Looked at in a different way, the spread operator is selecting each individual element inside the `arr` array and placing each of those elements in a new array structure.

Note that this is different than putting an array inside another array.
```javascript
let arr = [1,2,3,4]
let copy = [arr]
// copy is [ [1, 2, 3, 4] ]
```
That option gives you a multidimensional array. 

# Concatenate arrays

Building on the previous example, it turns out that you're able to take multiple arrays and spread them out in a new array. One after another.

```javascript
let arr1 = [1,2,3,4]
let arr2 = [5,6,7,8]
let concat = [...arr1, ...arr2]
// concat is [ 1, 2, 3, 4, 5, 6, 7, 8 ]
```
If we break it down as we did in the previous example, the spread operator is extracting each element in the initial arrays and placing it in the new array.

# Pass arguments as arrays

This is where the spread operator starts showing off its versatility. In this example, we're passing three arguments into a function. The spread operator is used in front of an array with three elements inside of it. 

```javascript
function dev(x, y, z) { }

var args = [0, 1, 2]

dev(...args) // call function
```

A good way to make sense of this is to look at our previous examples. What would happen if we used the spread operator on an array and never placed it inside a new array? 

Each element in the array would stand on its own. This is that intermediate transformation. Each element stands on its own and hasn't been placed in a new data structure. Therefore, all three elements can be passed in as arguments to the function individually.

# Copy an object 

Not only can the spread operator be used for arrays, it can be used for objects as well. Just like copying the array before, we can copy an object.

```javascript
let obj = {a: 1, b: 2, c: 3}
let copy = {...obj}
// copy is {a: 1, b: 2, c: 3}
```
In this example, the spread operator extracts each key-value pair from `obj` and places them in a new object, `copy`.

And just like the array example, it's worth noting that this is different than putting an object inside another object.

```javascript
let obj = {a: 1, b: 2, c: 3}
let copy = {obj}
// copy is { {a: 1, b: 2, c: 3} }
```

# Merge object

We can also merge two objects together using the spread operator.

```javascript
let obj1 = {a: 1, b: 2, c: 3}
let obj2 = {d: 4, e: 5, f: 6}

let merge = {...obj1, ...obj2}
// merge is {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}
```

Again, we're extracting all the key-value pairs from the initial objects and placing them in a new object data structure.

# Bonus - An Error!

Despite the fact that the spread operator works on both arrays and objects, you can't mix and match these data types.

```javascript
let obj = {a:1, b:2, c:3}
let copy = [...obj] // this won't work!
```
This makes sense if we think about it because when working on an array the spread operator is handling elements, and for an object, it's key-value pairs.

# And there you have it!

That's a whole lot of uses for the spread operator, and those aren't even all of them. If you're looking for a full set, take a look at the [mozilla docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax).

And if you're interested in other JavaScript syntax that can help you write clean code, check out these articles!

{% link https://dev.to/laurieontech/3-powerful-examples-of-destructuring-assignment-jlf %}

{% link https://dev.to/laurieontech/exports-and-imports-and-defaults-oh-my-fa3 %}

{% link https://dev.to/laurieontech/introducing-object-fromentries-1d5l %}