Javascript Spread Operator Alternative

Question

So I'm working with an old codebase that uses javascript es5, this means I cannot use the spread operator

          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
              ]
            }
          };

How can I spread " listOfItems " without using the spread operator as seen above ' ...listOfItems '

The listOfItems should be spread out to two separate arrays so essentially the result should be:

          var docDefinition = 
          {
            style: 'piecesTable',
            table: {
              widths: ['*', '*', '*'],
              body: [
                [
                  {text: 'Reference', style: 'tableHeader'}, 
                  {text: 'Alias', style: 'tableHeader'},
                  {text: 'Type', style: 'tableHeader'},
                ],
                ['item1', 'test', '1'],
                ['item2', 'test2', '2']
              ]
            }
          };

Answer 1

You can use concat() to merge into your body array

 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)

Answer 2

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)
};

Answer 3

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.

Answer 4

Alternatives to Spread operator, 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. concat method merge the two array and returns the new array , so it returns a single array with all the elements, more like spread operator. It wont 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

push method unlike concat would add new items to the end of the array , so it mutate 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 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 loop (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)