What’s the Spread Operator in Javascript and How to Use it

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

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 want to copy all the elements in 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

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,
//};

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

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

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!

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.

Thanks for reading. Let’s connect!

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. Join me on Twitter for more. 🚀🎒