Copy, concat, prepend JavaScript arrays with ES6 spread

JavaScript ES6 (ECMAScript 6) introduced the spread operator. The syntax is three dots followed by the array (or iterable*). It expands the array into individual elements. So, it can be used to expand the array in a places where zero or more elements are expected.

Let us use these two arrays for this whole post:

const fruits = ["apple", "orange"];
const vegetables = ["carrot", "pottato"];

Shallow copy an array

Spread can be used to shallow copy an array as shown below. Basically, the fruits array is expanded as individual elements by the spread operator, which then is used by the bracket [] to construct the array the usual way.

// Shallow copy fruits into a new array plate1
const plate1 = [...fruits];
// ["apple", "orange"]

Append an array

Array.prototype.push() is used to append individual elements to an array. It takes one or more individual elements as argument. Spread operator can be used to expand the second array as individual elements so that they can be used as arguments to push.

// plate1 already has fruits. Now append vegetables
// ["apple", "orange", "carrot", "pottato"]


Merge two arrays creating a new one

Each array can be spread to create a new array using [].

// Copy fruits and vegetables into plate2 at one go
const plate2 = [...fruits, ...vegetables];
// ["apple", "orange", "carrot", "potato"]


Combine arrays and elements

Spread operator can be used anywhere inside the [] brackets along with other individual elements.

// Add 'bread', copy vegetables, add 'chicken' and add fruits
// to plate3
const plate3 = ['bread', ...vegetables, 'chicken', ...fruits];
// ["bread", "carrot", "potato", "chicken", "apple", "orange"]

Prepend an array

Spread operator can be used to prepend an array to another array.

// plate4 has 'Bagel'. Prepend fruits. It involves changing
// the array reference, so we declare using let
// instead of const
let plate4 = ['Bagel'];
plate4 = [...fruits, ...plate4];
// ["apple", "orange", "Bagel"]


*iterable – An object is iterable if it implements @@iterator method, it should have a property @@iterator which is a method as defined by the iterator protocol. It takes no argument and returns a method next(). next() returns an object with two properties i) done (boolean) and value (any type of value). Built-in iterables are string, array, TypedArray, Map, Set.

Here is an example of how spread operator works with string, which is a iterable.

const country = "USA";
// ["U", "S", "A"]
// Each character of the string is an element in the array.


The whole code in this post is available as a gist:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s