Alternative to array spread syntax in JavaScript

Alternatives to spread syntax, seems like we have several options. But do we really have? Well it depends on the situation - lets focus on concat and push

concat

Pretty straight forward and a clean way as many suggests. The concat method merges the two array and returns the new array, so it returns a single array with all the elements, more like using spread. It won't affect the existing arrays since it returns new array, thus we can use it very easily. Let us see that in action:

var listOfItems = [ ['item1', 'test', '1'], ['item2', 'test2', '2'] ];

var docDefinition = 
{
  style: 'piecesTable',
  table: {
    widths: ['*', '*', '*'],
    body: [
      [
        {text: 'Reference', style: 'tableHeader'}, 
        {text: 'Alias', style: 'tableHeader'},
        {text: 'Type', style: 'tableHeader'},
      ],

    ].concat(listOfItems)
  }
};

console.log(docDefinition)

push

The push method unlike concat would add new items to the end of the array, so it mutates our base array to add new elements. The method would update the length of the array and will return the new length. In our case listOfItems is an array of arrays, not just array of elements, if we directly apply push it will push the array of arrays, that might be desirable in some situation but may not be in some other. Lets take a look at that :

var listOfItems = [ ['item1', 'test', '1'], ['item2', 'test2', '2'] ];

var docDefinition = 
{
  style: 'piecesTable',
  table: {
    widths: ['*', '*', '*'],
    body: [
      [
        {text: 'Reference', style: 'tableHeader'}, 
        {text: 'Alias', style: 'tableHeader'},
        {text: 'Type', style: 'tableHeader'},
      ],

    ],
  }
};

docDefinition.table.body.push(listOfItems);
console.log(docDefinition)

Here as we can see entire array is appended, still if we wanna remove that we could use the flat method to remove the sub-arrays to a depth, but it might affect code readability.

Instead, we could push array elements to the destination array by using forEach (or some other array traversal method) and push each items to the destination array. Here also the original array is mutated:

var listOfItems = [ ['item1', 'test', '1'], ['item2', 'test2', '2'] ];

var docDefinition = 
{
  style: 'piecesTable',
  table: {
    widths: ['*', '*', '*'],
    body: [
      [
        {text: 'Reference', style: 'tableHeader'}, 
        {text: 'Alias', style: 'tableHeader'},
        {text: 'Type', style: 'tableHeader'},
      ],

    ],
  }
};

listOfItems.forEach(function(item){docDefinition.table.body.push(item)});
console.log(docDefinition)

Try with concat():

const listOfItems = [ ['item1', 'test', '1'], ['item2', 'test2', '2'] ];

const docDefinition = {
  style: 'piecesTable',
  table: {
  widths: ['*', '*', '*'],
  body: [
    [
      {text: 'Reference', style: 'tableHeader'}, 
      {text: 'Alias', style: 'tableHeader'},
      {text: 'Type', style: 'tableHeader'},
    ]
  ].concat(listOfItems)
};

If you're just trying to add an item to the front of a list, you can always use Array.prototype.unshift(), and for the back there's always Array.prototype.push(), or even Array.prototype.concat(). In general, though there is no polyfill for the spread operator, there are alternative ways of inserting items into arrays at different indices that you can use instead.