14

Estou dando uma olhada nas new features do EcmaScript6 e vi que foi implementado o Spread Operator.

Ele parece bem semelhante ao variadic function do PHP (que também usa Spread Operator).

Aqui tenho um exemplo de como será a diferença entre as codificações atuais e Ecmascript6:

Antes:

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

Depois:

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

E também na declaração das funções:

Antes:

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

Depois:

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

No PHP, a implementação de variadic function trouxe como melhorias algumas coisas:

  • Não ter que usar call_user_func_array

  • Não ter que usar func_get_args.

Gostaria de saber que, no javascript, o que será impactante com essa implementação do Spread Operadators?

0

1 Resposta 1

12

A própria pergunta já traz duas dessas melhorias, certo? Bom, quase. Na verdade, o segundo exemplo é bem diferente do primeiro.

O primeiro exemplo mostra o que se costuma chamar de spread operator (*): ele vem à esquerda de uma lista (um Iterable, geralmente uma array) e espalha ou "desdobra" seu conteúdo em variáveis distintas. No seu exemplo, os itens da lista são distribuídos como argumentos no momento da chamada da função:

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

Em ES5, como você notou, isso só é possível com apply, que é bem menos legível.

O segundo exemplo tem a semântica oposta: na lista de parâmetros de uma função, o ... não distribui uma lista em valores, e sim coleta os valores em uma lista:

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

Isso costuma ser chamado de rest parameters, ou parâmetros restantes. Na assinatura da função, eles só podem aparecer no final. Independente do nome, claramente é uma melhoria de sintaxe, pois elimina a necessidade do slice.call(arguments, n) dentro da função, o que seria necessário em ES5.

Voltando ao spread operator, ele tem outros usos além do que você mostrou no primeiro exemplo. Em arrays literais, ele permite concatenar e interpolar arrays:

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

Ele também pode ser utilizado do lado esquerdo de uma operação de desestruturação (destructuring, recurso bem interessante, parecido um pouco com o list do PHP, mas mais poderoso):

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

Por fim, ele ainda permite fazer algo que exigia um certo malabarismo em ES5, uma espécie de apply combinado com new:

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

O equivalente em ES5 era essa "beleza" aqui:

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

Referências


(*) Na especificação isso nem é listado como um operador; a gramática da linguagem trata o ... literalmente, e distingue a semântica do spread e do rest conforme o contexto.

2
  • Gostei, bonita explicação :D Commented 4/02/2016 às 13:51
  • 1
    A parte que achei mais interessante é a do "combo". Não tinha pensando nesse uso. Commented 4/02/2016 às 13:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .