What are the improvements that the Spread Operator implementation will bring to the javascript?

Question

What are the improvements that the Spread Operator implementation will bring to the javascript?

Navigation

#1 by (9 votes)

11

I'm taking a look at new features of EcmaScript6 and saw that Spread Operator was implemented.

It looks very similar to variadic function of PHP (which also uses Spread Operator ).

Here's an example of how the difference between current and Ecmascript6 will be:

Before:

var max = Math.max.apply(null, [1, 2, 3]);

Then:

var max = Math.max(...[1, 2, 3]);

And also in the declaration of functions:

Before:

 function myFunc(name) {      
    var args = [].slice.call(arguments, 1);
    // faça o restante
 }

Then:

  function myFunc(name, ...args)
  {
     // faça o restante
  }

In PHP, the implementation of variadic function brought some things as improvements:

Do not have to use call_user_func_array
Do not have to use func_get_args .

I would like to know that in javascript, what will be impacting with this Spread Operadators implementation?

javascript ecmascript-6

asked by anonymous 03.02.2016 / 16:30

1 answer

Save and send selected item id in dropdowlinst What is and how to implement a Listener in Java?

score 9 · Accepted Answer

The question itself already brings two of these improvements, right? Well, almost. In fact, the second example is quite different from the first.

The first example shows what is called the spread operator (*): It comes to the left of a list (a # , usually an array) and spreads or "unfolds" its contents into distinct variables. In your example, the list items are distributed as arguments at the time of the function call:

var max = Math.max(...[1, 2, 3]);  // equivale a Math.max(1, 2, 3)

In ES5, as you noticed, this is only possible with apply , which is much less readable.

The second example has the opposite semantics: in the parameter list of a function, ... does not distribute a list in values, but instead collects the values in a list:

function myFunc(name, ...args) { } // args coleta todos os argumentos passados depois de name

This is often called rest parameters , or other parameters. At the signature of the function, they can only appear at the end. Regardless of the name, it is clearly a syntax improvement because it eliminates the need for slice.call(arguments, n) within the function, which would be required in ES5.

Returning to the spread operator , it has other uses than what you showed in the first example. In literal arrays, it allows you to concatenate and interpolate arrays:

let umaArray = [3, 4];
let outraArray = [6, 7];
let combo = [1, 2, ...umaArray, 5, ...outraArray];
// combo = [1, 2, 3, 4, 5, 6, 7]

It can also be used on the left side of a destructor operation ( destructuring , very interesting feature, a bit like the list of PHP, but more powerful):

[a, ...outros] = [1,2,3,4];
// a = 1
// outros = [2, 3, 4]

Finally, it still allows you to do something that required some juggling in ES5, a kind of apply combined with new :

new Date(...[2015,7, 31]);

The equivalent in ES5 was this "beauty" here:

new (Date.bind.apply(Date, [null, 2015, 7, 31]));

References

(*) In the specification this is neither listed as an operator; the grammar of the language treats ... literally, and distinguishes the semantics of the spread and the rest according to the context.