DEV Community

Cover image for What's the Spread Operator in Javascript and How to Use it
Gaël Thomas for HereWeCode

Posted on • Updated on • Originally published at herewecode.io

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

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

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"]
Enter fullscreen mode Exit fullscreen mode

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

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"
//};
Enter fullscreen mode Exit fullscreen mode

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"
//};
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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", "!"]
Enter fullscreen mode Exit fullscreen mode

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, where I tweet about web development, self-improvement, and my journey as a fullstack developer!

Discussion (14)

Collapse
crimsonmed profile image
Médéric Burlet • Edited on

I think you could have added an example on changing properties when copying an object:


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

const newUser = {...user, firstName: "Jane"}

console.log(newUser);
// Output: {
//  firstName: "Jane",
//  lastName: "D",
//  age: 25,
//  jobName: "Developer"
//};
Enter fullscreen mode Exit fullscreen mode
Collapse
gaelgthomas profile image
Gaël Thomas Author • Edited on

Hello,
Thank you for the feedback! I added your suggestion to the article.
It's a good example that can help people to understand better how to create or copy objects! (I think you wanted to write about objects, not arrays?)

Collapse
crimsonmed profile image
Médéric Burlet

Oh yes object haha didn't see the typo

Thread Thread
gaelgthomas profile image
Gaël Thomas Author • Edited on

Haha no problem! 😃 👍

Collapse
breadandwater profile image
Adrian Paniagua Sanchez

Really good explication of spread operator. Really clear and easy to understand! Thanks for that!

Collapse
gaelgthomas profile image
Gaël Thomas Author

Thank you for your amazing feedback! 😃

Collapse
merkrynis profile image
Julien Bouvet

Nice, quick and easy, thanks a lot :)

Collapse
gaelgthomas profile image
Gaël Thomas Author

Thank you, I'm glad you like it! 😁

Collapse
kiraniyerdev profile image
Kiran Iyer

Amazing thread. Now I know how to use spread operator. Bring it on! lol

Collapse
gaelgthomas profile image
Gaël Thomas Author

Hey, thank you! It's so cool, have fun using them!

Collapse
juanccq profile image
Juan Carlos Choque Quispe

Thanks for the post.

Collapse
gaelgthomas profile image
Gaël Thomas Author

😁😁

Collapse
psargedev profile image
psargedev

Thanks. This was clear and concise!

Collapse
gaelgthomas profile image
Gaël Thomas Author

Thank you for this feedback! 😊