A question was asked in a conversation about ES6 recently, about the real use of the ES6 spread operator. This person wanted a slightly better explanation than they had seen previously, as they weren’t yet sure of where this new operator was really useful. 

There are several things that this new operator can do, but one of the most useful may be that you no longer need fn.apply in many cases.

It’s common to be given an array and need to pass that array as the list of arguments to a function. When you pass that array without any special code or syntax – just passing it as a parameter – the whole array gets assigned to the named argument within the function.

But what happens when you want the values in the array to be applied to each individual named argument within the function? In the past, this was handled with the .apply method on a function.

With this syntax, your array would be torn apart and put into each of the arguments. This is a really useful tool to have – and with ES6 and the spread operator, it gets even easier.

ES6 adds a new form of syntax where you can pass an array to a function and have it’s contents “spread” across the method’s arguments. This is done using a “…array” syntax – called the spread operator.

With this, the above call to the .apply method can be replaced in many cases.

These two chunks of code (the .apply version above, and this one) are almost equivalent – in many cases they are equivalent in result. But, there is a legitimate difference that needs to be understood: “this”.

With the call to .apply, the first parameter will always be used to set the value of “this” within the function. This value may not matter at all – when “this” is not used within the function – and passing “undefined” is a valid option.

If your function uses “this”, however, then you would run into a problem with “undefined” as the first parameter – “this” would be undefined.

To correct that, you need to include your expected “this” as the first parameter.

With the spread operator, though, you don’t need to adjust for “this”. Your function can be called with an array as the list of parameters, and the implied value of “this” is managed through the function invocation mechanism.

In this version, there is no need to specify the value of this, if the implicit “this” is what you want. The spread operator allows the “obj.foo()” call to keep “obj” as “this” inside of the function.

The usefulness of the spread operator extends far beyond the application of arrays over function arguments – but this is one of the big benefits that they provide. With this syntax, you can skip the call to .apply in many cases. It reduces the code a little, but more importantly it takes away an extra layer of required knowledge and complexity. 

However, the spread operator will not set “this” in any way other than the mechanics of calling the functions. If you need to explicitly set the value of “this”, the .apply call is still going to be valuable. Even with this limitation, having the spread operator available should reduce the amount of code requires to make calls to functions with an array as a list of arguments.