Merging JavaScript arrays based on index without .concat

Question

I'm trying to combine two arrays and most of the answers relate to adding the second array to the end of the first. I need to merge index to index.

Here's example code:

let arr1 = ['golf', 'hockey', 'tennis'];
let arr2 = ['player1', 'player2', 'player3'];

Array.prototype.zip = function (arr) {
  return this.map(function (e, i) {
    return [ e, arr[i]];
  })
};
const arr3 = arr1.zip(arr2);
console.log(arr3);

The result should be:

['golf', 'player1', 'hockey', 'player2', 'tennis', 'player3']

The above code looks like it should work but doesn't. If it can be fixed, or exchanged for better that would be great.....

Okay, just to add - the end result I need is this ['golf', 'player1', 'hockey', 'player2', 'tennis', 'player3'] — Mark Hayden
– Mark Hayden, Commented Apr 19, 2018 at 3:48

Mohammad Usman · Accepted Answer · 2018-04-19 03:51:23Z

3

You can use .reduce() to zip both arrays:

let arr1 = ['golf', 'hockey', 'tennis'],
    arr2 = ['player1', 'player2', 'player3'];

let zip = (a1, a2) => a1.reduce((a, c, i) => (a.push(c, a2[i]), a), []);

console.log(zip(arr1, arr2));

Docs:

answered Apr 19, 2018 at 3:51

Mohammad Usman

39.6k20 gold badges99 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mark Hayden Over a year ago

I realised that I gave the wrong example object which massively affects the result. So i'm calling this answer correct because it's the first answer given that works according to the incorrect info I gave. I wrote a new question on stackoverflow link here - stackoverflow.com/questions/49921853/…

CertainPerformance · Accepted Answer · 2018-04-19 03:48:43Z

.map maps an array to another array one-to-one: if you have 3 elements in the original array, .map can only ever produce another array that has 3 elements. If you can't use concat, use .reduce instead of .map, that way you can push multiple elements in a single iteration:

const arr1 = ['golf', 'hockey', 'tennis'];
const arr2 = ['player1', 'player2', 'player3']

Array.prototype.zip = function (otherArr) {
  return this.reduce((accum, item, i) => {
    accum.push(item);
    accum.push(otherArr[i]);
    return accum;
  }, []);
};
const arr3 = arr1.zip(arr2)
console.log(arr3)

Of course, it would be much better not to change the built-in Array object. You could easily avoid that by using a standalone function instead:

const arr1 = ['golf', 'hockey', 'tennis'];
const arr2 = ['player1', 'player2', 'player3']

function zip(arr1, arr2) {
  return arr1.reduce((accum, item, i) => {
    accum.push(item);
    accum.push(arr2[i]);
    return accum;
  }, []);
};
const arr3 = zip(arr1, arr2);
console.log(arr3);

dandavis · Accepted Answer · 2018-04-19 05:25:38Z

0

A simple fix: Just flatten what you have now with a simple reduce():

let arr1 = ['golf', 'hockey', 'tennis'];
let arr2 = ['player1', 'player2', 'player3']

Array.prototype.zip = function (arr) {
      return this.map(function (e, i) {
          return [ e, arr[i]]
      }).reduce((a,b)=>a.concat(b)); // blink and you miss the change...
    };
const arr3 = arr1.zip(arr2)
console.log(arr3)

This approach preserves what you have and doesn't add a lot of complexity like extra method calls, temp arrays, etc; that's the beauty of the functional approach: you're one chain link away from what you need. I would also convert it to a stand-along method instead of modding the prototype, but that's aside the point...

answered Apr 19, 2018 at 5:25

dandavis

16.8k5 gold badges43 silver badges38 bronze badges

Comments

Sergio Reis · Accepted Answer · 2018-04-19 07:20:24Z

0

You can use temp array instead of direct input method.

let arr1 = ['golf', 'hockey', 'tennis'];
let arr2 = ['player1', 'player2', 'player3']

Array.prototype.zip = function (arr) {
    this.map(function (e, i) { this.splice(i*2+1, 0, arr[i]); }, this )
};
const arr3 = arr1.zip(arr2)
console.log(arr3)

edited Apr 19, 2018 at 7:20

answered Apr 19, 2018 at 3:56

Sergio Reis

3,3762 gold badges20 silver badges34 bronze badges

1 Comment

Sergio Reis Over a year ago

Oh, it looks more clean. Thanks.

Collectives™ on Stack Overflow

Merging JavaScript arrays based on index without .concat

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related