What's the Spread Operator in Javascript and How to Use it
Tags: javascript, webdev, beginners, codenewbie
Published: 2020-10-18 13:47:53

In this short tutorial, you will learn Spread Operators in JavaScript and how to use them.

ES6 introduced new features in JavaScript. One of the famous of them is the spread operator.
You can recognize when you see three dots in your code "`...`".

The spread operator is useful to extract elements from an iterable object.

## Use-cases

I listed five common use-cases with the spread operator in JavaScript ES6.
These examples will simplify your code and help you understand why you should use spread operators.

### Create a new array / Copy an array

```javascript
const girlNames = ["Jessica", "Emma", "Amandine"];

// The spread operator takes:
// - "Jessica"
// - "Emma"
// - "Amandine"
// and extracts them
// to a new array
const newGirlNames = [...girlNames];

console.log(newGirlNames);
// Output: ["Jessica", "Emma", "Amandine"]
```

In the above example, we have an array `girlNames`, and we create a new array using the spread operator.

The spread operator will go through all the array values ("Jessica", "Emma", "Amandine") and extract them inside of the `newGirlNames` array.

### Create a new object

```javascript
const user = {
  firstName: "John",
  lastName: "D",
  age: 25,
};

// The spread operator takes
// all the properties of the
// object:
// - firstName
// - lastName
// - age
// and extracts them to a new object.
// Then we overwrite the `firstName` of the
// previous object with a new one
// "John" becomes "Jane"
const newUser = {...user, firstName: "Jane"}

console.log(newUser);
// Output: {
//  firstName: "Jane",
//  lastName: "D",
//  age: 25,
//  jobName: "Developer"
//};
```

This example will follow the logic of the previous one.
We have an object `user`, and create a new object using the spread operator.

The spread operator will go through all the object's properties (`firstName`, `lastName`, and `age`) and extract them inside the `newUser` object.

In this example, I added a new `firstName: "Jane"` property to the `newUser` object to show you that you can create a new object and add properties to it.
Because an object has unique keys, we replace the `firstName` of the user object by the `firstName` of the newUser ("John" becomes "Jane").

### Merge objects

```javascript
const user = {
  firstName: "John",
  lastName: "D",
  age: 25,
};

const userJob = {
  jobName: "Developer"
}

const completeUser = { ...user, ...userJob };

console.log(completeUser);
// Output: {
//  firstName: "John",
//  lastName: "D",
//  age: 25,
//  jobName: "Developer"
//};
```

Thanks to the spread operator, merging objects is less complicated.

You can merge objects infinitely. You can try it by yourself! Create a new `userFamily` object with a `wifeName` property and merge it to `completeUser`.

> **Note:** Be careful of using unique keys in your object. If you merge two objects with the same key, only the last merged key will last.

### Merge arrays

```javascript
const girlNames = ["Jessica", "Emma", "Amandine"];
const boyNames = ["John", "Terry", "Alexandre"];

const namesWithSpreadSyntax = [...girlNames, ...boyNames];

console.log(namesWithSpreadSyntax);
// Output: ['Jessica', 'Emma', 'Amandine', 'John', 'Terry', 'Alexandre']
```

Now you know how to merge objects; you can merge arrays in JavaScript.

### String to array

As explained at the beginning of this tutorial, you can spread all iterable objects.
In this last use-case, you will split a string to array in javascript!

```javascript
const helloWorld = "Hello world!";

const helloArray = [...helloWorld];

console.log(helloArray);
// Output: ["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
```

Using the spread operator, you go through all the characters and extract them in an array.
The final result is an array of characters.

### Conclusion

Thank you for reading this article on spread operators in JavaScript!

---

If you want more content like this, you can [follow me on Twitter](https://twitter.com/gaelgthomas/), where I tweet about web development, self-improvement, and my journey as a fullstack developer!