Gaël Thomas for HereWeCode

Posted on Oct 18, 2020 • Updated on Dec 17, 2021 • Originally published at herewecode.io

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

#javascript #webdev #beginners #codenewbie

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"]

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

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.

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!

Top comments (14)

Médéric Burlet • Oct 19 '20 • Edited

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

Gaël Thomas • Oct 19 '20 • Edited

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?)