How the Spread operator works in ES6

The Spread operator is one of those concepts in JavaScript that, while you appreciate what it does, you just can't ever quite seem to find the right time to use it. Or maybe, we're just not thinking of it in the right manner. So today, we're going to dive into the spread operator. What it does, how it does it, and why it may or may not be useful to you.

Let's start off with a quick definition:

The spread operator is essentially a more compact way to apply multiple parameters to functions. The traditional route is the following:

function func1(param1, param2, param3, ..)
{
}

We are all pretty familiar with this syntax for the most part. If we need a parameter, we simply add it to the list. The spread operator changes things up a bit however and can instead let us do something like the following:

function func1(...args)
{
}

The parameters in this case will be added dynamically when we call the function with a given parameter list. Both the following examples would be valid in this case.

func1(1, 3, 4, 5);
func1(3, 4, 5, 6, 8, 9);

JavaScript will treat each entry as a given parameter, as oppose to in the first example above, in which it would simply ignore any arguments that it did not recognize from the parameter list. So this kind of tells us when we can begin to start using the spread operator. Perhaps in a scenario where we don't immediately know which parameters we are going to need. Perhaps a utility function of some kind.

Combining arrays

The spread operator can also be used surprisingly to combine multiple arrays into one.

let array1 = [1, 2, 3];
let array2 = [3, 4, 5];

let array3 = [...array1, ...array2];

While, the syntax seems cumbersome  in this example, it is important to note that the traditional method of combining arrays is the following:

let array1 = [1, 3, 5, 5, 5];
let array2 = [3, 4, 5, 6];
let array3 = [3, 4, 5];

let array4 = array1.concat(array2, array3);

I always found this syntax to be unclear, mainly because it involves that you reference the first array that you are combining in order to call the built-in concat function. Whereas, with the spread operator, you simply just list the arrays that you want to combine preceded with 3 dots.

Applying function parameters

The last use of the spread operator is the following. I've yet to find a use-case for this one. But perhaps, you might find it to be super beneficial to your particular work in coding JavaScript. But essentially, you can defined functions with parameter lists and in lieue of adding arguments one at a time, you can simply specify an array of values and JavaScript will split each item accordingly.

function func2(param1, param2, param3)
{
    return param1 + param2 + param3;
}

The typical way of calling this function and passing in values would be the following:

func2(1, 2, 3);

An alternative method would be to use the spread operator.

let array1 = [2, 3, 4];
func2(...array1);

Again, not really too sure how this syntax is beneficial or an improvement over the traditional way of passing in arguments, but it is there as an option in case you find yourself needing it.

Hopefully this post gives you some more insight into the somewhat new and somewhat powerful capabilities of the spread operator in ES6. Start using it today and if you find out how the 3rd option is beneficial, please let me know as I would love to see some use cases.