JavaScript Spread Operator Explained (ES6)

Learn using the spread syntax with JS arrays, objects, and functions

The spread operator in JavaScript has first introduced with ES6 back in 2015 and using it can be helpful in our daily programming lives. In this post, you’re going to learn what the spread operator does, how to use it, and we will use it in some examples together with arrays, objects, and functions.

The Spread Syntax: Three Dots

The spread operator is represented with three dots (…) and is being used to take elements out of something like an array, or an object. By using the spread syntax, we can make some complex operations much easier.

Spread Operator with Arrays

Let’s take this array as an example:

const numbers = [1,2,3,4,5];
console.log(numbers);  // output: [1,2,3,4,5]

Here, when we want to log the elements of the array to the console, we get back the array object itself.

However, if we use the spread operator and put it right before our array:

console.log(...numbers);  // output: 1,2,3,4,5

We’ll see the elements again but this time without the array.

This is just the beginning. With the help of the spread operator, we can make some operations in JavaScript much easier. Let’s go through together with some examples…

You can also watch the tutorial for the examples below:

Merging Arrays

One good example can be given while merging arrays. Let’s say we want to merge these two arrays below:

const numbers = [1,2,3,4,5];
const moreNumbers = [6,7,8,9,10];

Normally in JavaScript, we had to use the concat() method to merge one or more arrays:

numbers.concat(moreNumbers);

Now instead of this, we can do the same much easier by using the spread operator:

const newArray = [...numbers, ...moreNumbers];

We can merge two or more arrays easily by taking their elements out and assigning them inside a new array, without the help of the concat() method.

Dividing a String

Another example can be given when we need to divide a string into characters.

const word = 'spread';

One way to do that is by using the split( ) method, which divides a string into characters and returns them inside an array:

let charArray = word.split("");
console.log(charArray);  // ['s','p','r','e','a','d']

Now instead of using the split method, we can basically just put our string inside the array and use the spread syntax which does exactly the same job:

charArray = [...word];
console.log(charArray);  // ['s','p','r','e','a','d']

Spread Operator for Functions Arguments

We can also use the spread syntax for function arguments.

Let’s go back to our numbers array and let’s say we want to find the minimum value of its elements. JavaScript provides a built-in method, the Math function, which we can use for this case.

const numbers = [1,2,3,4,5];
Math.min(numbers); // NaN

However, the Math function will not return the correct result when we directly pass the array as an argument, because it can’t access the elements of the array directly.

What we can do here instead is to use the JavaScript apply function and apply it to the math function:

Math.min.apply(Math, numbers);  // output: 1

But this usage is complicated, we can actually do the same much easier by using the spread operator:

Math.min(...numbers);  // output: 1

So as we can see, using the spread operator does the same job in a much cleaner way.

Spread Operator with Objects

Finally, we can also use the spread operator with objects.

Combining Objects

Like we did for arrays, we can also merge two objects easily by using the spread syntax. To do that, spreading two or more objects inside a new object will combine them:

const obj1 = {
  firstName: 'John',
  lastName: 'Doe'
};
const obj2 = {
  age: 25
};
const person = { ...obj1, ...obj2 };
console.log(person);

So as we can see, our new object is a combination of the other two:

I hope this post helps you to understand the usage of the JavaScript spread operator. If you want to learn more about web development, don’t forget to follow me also on Youtube :)

Thank you for reading!