How to concatenate two arrays trough loop, Javascript?

Question

Let's say that I have this array.

const arr = [['grass', 'water'], ['fire', 'ground'], ['fairy', 'mage'], ['fighter', 'fire']];

So what I want is to concatenate arr[0] with arr[2], arr[1] with arr[3].

This has to be done trough some array method or loop, since I don't know how much of elements I will have.

Result should look like this

const arr = [['grass', 'water', 'fairy', 'mage'], ['fire', 'ground', 'fighter', 'fire']];

Answer 1

If you mod the current index with half the length of the array, then you would get corresponding index in the resultant array.

Index in original array

0 1 2 3 4 5

Index in resultant array

0 1 2 0 1 2  // After taking modulus with 3 i.e. half of the array length

Solution

1. I've used the Nullish coalescing operator to assign the res array with empty array if the desired position is empty.

2. Then push all the elements into this position and finally return the resultant.

NOTE: This solution only works for arrays of even length.

 const arr = [ ["grass", "water"], ["fire", "ground"], ["fairy", "mage"], ["fighter", "fire"], ["water", "ice"], ["ground", "rock"], ]; const result = arr.reduce( (r, el, i) => ( (r[i % (arr.length / 2)]??= []), r[i % (arr.length / 2)].push(...el), r ), [] ); console.log(result);

Answer 2

You can do something like this:

 const arr = [['grass', 'water'], ['fire', 'ground'], ['fairy', 'mage'], ['fighter', 'fire']]; const newArr = []; for (let i = 0; i < arr.length/2; i++){ newArr.push(arr[i].concat(arr[i + 2])); } console.log(newArr);

Answer 3

Here are few options that work for even numbered arrays.

No mutations

1. Iterate from the start to half the array.

2. Join the item at the current index with the one that is equal distance from the middle of the array:

   • Iteration 1:

    [0, 1, 2, 3] ^ ^

   • Iteration 2:

    [0, 1, 2, 3] ^ ^

3. Add each of these to a new array. The original and all its members are untouched.

With a loop

 function* slice(start, end, arr) { if (start < 0) start = arr.length + start; if (end < 0) end = arr.length + start; for (let i = start; i < end; i++) { yield arr[i]; } } const arr = [['grass', 'water'], ['fire', 'ground'], ['fairy', 'mage'], ['fighter', 'fire']]; const middle = arr.length / 2; const result = Array.from( slice(0, middle, arr), (first, i) => first.concat(arr[middle + i]) ); console.log(result);

With array methods

 const arr = [['grass', 'water'], ['fire', 'ground'], ['fairy', 'mage'], ['fighter', 'fire']]; const middle = arr.length / 2; const result = arr.slice(0, middle).map((first, i) => first.concat(arr[middle + i])); console.log(result);

Using a generator

To avoid intermediate arrays from .slice() you can use a generator function and pass it through Array.from() supplying a mapping function to generate an array:

 const arr = [['grass', 'water'], ['fire', 'ground'], ['fairy', 'mage'], ['fighter', 'fire']]; const middle = arr.length / 2; const result = arr.slice(0, middle).map((first, i) => first.concat(arr[middle + i])); console.log(result);

With mutations

1. Start before the middle of the array and go backwards.

2. Remove the last item in the array. Add its members to the item at the current index.

   • Iteration 1:

    [0, 1, 2, 3] ^ ^ remove last: 3 combine with: 1

   • Iteration 2:

    [0, 13, 2] ^ ^ remove last: 2 combine with: 0

   • End result:

    [02, 13]

3. This is all done in-place. Both arr and its members are modified.

 const arr = [['grass', 'water'], ['fire', 'ground'], ['fairy', 'mage'], ['fighter', 'fire']]; const middle = arr.length / 2; for (let i = middle - 1; i >= 0; i--) { const first = arr[i]; const second = arr.pop(); first.push(...second); } console.log(arr);