Tutorial

What's the Spread Operator Used For in JavaScript?

Updated on July 11, 2022
authorauthor

William Le and Madison Scott-Clary

What's the Spread Operator Used For in JavaScript?

Introduction

The spread operator is a feature of JavaScript introduced with ES6 that gives you access to the insides of an iterable object. An “iterable object” is anything you can iterate over item by item, such as arrays, objects literals, and strings. These kinds of JavaScript types can be traversed in some sequential fashion. For example, you can use a for loop on an array, or with JavaScript objects, you can use for...in loops.

The Basics of the Spread Operator

The spread operator effectively gives you access to all of the items inside these iterable objects. Let’s look an example to illustrate what that means:

const foo = [
  'hello',
  'bonjour',
  'konnichiwa'
];
const bar = [...foo];  // the three dots "..." are the spread operator syntax.

console.log(bar);

Running this in the console should print the following:

Output
['hello', 'bonjour', 'konnichiwa'];

The variable bar wound up an exact copy of the variable foo. The spread operator essentially ‘scooped’ out the insides of the foo array and spread the values across the new array in bar.

It’s important to note the brackets around the spread operator, [...foo]. The spread operator spreads these values within a new object of the same type; in this case, an array literal. Try running the code without the brackets:

const foo = [
  'hello',
  'bonjour',
  'konnichiwa'
];
const bar = ...foo;

console.log(bar);
Output
Uncaught SyntaxError: expected expression, got '...'

Now that we have a basic idea, let’s look at common tasks where the spread operator might be useful.

Duplicating Iterable Objects

As we saw earlier, the spread operator is one of the best ways for duplicating an iterable object. There are more complex ways to do this, but the conciseness of the spread operator makes it delightfully easy. Using the spread operator to duplicate object literals isn’t much different than for arrays. For example:

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {...foo};
console.log(bar);

This leads to the following:

Output
{ english: 'hello', french: 'bonjour', japanese: 'konnichiwa' }

Merging Iterable Objects

The spread operator can also be used to compose a single iterable object from several others.

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = ['gutentag', 'saluton'];
const baz = [...foo, ...bar];

console.log(baz);

This will output the contents of foo and bar which are now contained in baz:

Output
['hello', 'bonjour', 'konnichiwa', 'gutentag', 'saluton']

You can also place a spreaded array inside another array as you would any other item:

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = [...foo, 'gutentag', 'saluton'];

console.log(bar);

Now bar contains some additions to foo:

Output
['hello', 'bonjour', 'konnichiwa', 'gutentag', 'hello-ey']

A good way to think about it is that the spread operator just holds the items within the iterable object, rather the objects themselves.

How about object literals? It’s very similar to merging arrays:

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {
  german: 'gutentag',
  esperanto: 'saluton'
};
const baz = {...foo, ...bar};

console.log(baz);

As the spread operator for the two objects contains those objects’ internals, using them in the context of a new object literal will ensure that they have those contents as well.

Output
{ english: 'hello', french: 'bonjour', japanese: 'konnichiwa', german: 'gutentag', esperanto: 'saluton' }

This is a common task for Object.assign() but the spread syntax makes this far more concise.

Note: While you can merge iterable objects of different types using the spread operator, this may lead to some unwanted behaviors. For arrays and strings, you can think of them as objects where the keys are item or letter’s index in the array (e.g: {0: 'a', 1: 'b', 2: 'c'}. Should you use the spread operator for an array or string in the context of an object literal, your results will contain these key/value pairs. However, since objects have keys that are not numbers, you will not be able to use their values in an array context.

What happens when there are duplicate keys?

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {
  english: 'howdy',
  german: 'gutentag'
};
const baz = {
  ...foo,
  ...bar,
  esperanto: 'saluton',
  korean: 'annyeong'
};

console.log(baz);

Here, we’re merging two existing objects into a third, both of which contain an entry for english.

Output
{ english: 'howdy', french: 'bonjour', japanese: 'konnichiwa', german: 'gutentag', esperanto: 'saluton', korean: 'annyeong' }

The duplicate keys are overwritten in the order they’re applied. It’s important to take into consideration whether or not valuable data will be lost in the process of using the spread operator to merge iterable objects.

Feeding Arguments into Functions

The spread operator can be used in many instances where one might choose to use the apply method, which passes the values of a variable to a function in a similar way.

function calcVolume(width, height, depth) {
  return width * height * depth;
};

calcVolume(12, 30, 14);  // basic

// Passing arguments to the function from a variable:
const cube = [12, 30, 14];
calcVolume.apply(null, cube);  // using "apply"
calcVolume(...cube);     // using "spread operator"

The spread operator makes it easy to feed a series of arguments into functions in cases where apply may not be totally applicable.

Using the Spread Operator With Strings

Lastly, you can also use the spread operator with strings since they’re also considered an iterable object.

const foo = "jumanji";
const bar = [...foo];

console.log(bar);

This will break the string jumanji up into its individual characters.

Output
// [ "j", "u", "m", "a", "n", "j", "i" ]

Conclusion

The spread operator was a highly requested feature from several other languages like C++ and Python, and now it’s here in ES6! It makes some common programming tasks much easier to do, and with this tutorial, you learned practical ways you could use it. For more information on the spread operator, MDN has in-depth documentation available.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
William Le

author


Default avatar

Tech Writer at DigitalOcean


While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more