Maybe just a simple `for... i` loop that checks each array for an item in position `i`





    var input = [["one","two","three"],["uno","dos"],["1","2","3","4"],["1st","2nd","3rd"]]

    var output = []
    var maxLen = Math.max(...input.map(arr => arr.length));

    for (i=0; i < maxLen; i++) {
      input.forEach(arr => { if (arr[i] !== undefined) output.push(arr[i]) })
    }

    console.log(output)



Simple, but predictable and readable

-----

### Avoiding For Each Loop

If you need to avoid `forEach`, here's a similar approach where you could: get the [max child array length][0], [build a range of integers][1] that would've been created by the for loop (`[1,2,3,4]`), map each value to pivot the arrays, [flatten the multi-dimensional array][2], and then [filter][3] out the empty cells.

First in discrete steps, and then as a one liner:



    var input = [["one","two","three"],["uno","dos"],["1","2","3","4"],["1st","2nd","3rd"]];

Multiple Steps:



    var maxLen = Math.max(...input.map(arr => arr.length));
    var indexes = Array(maxLen).fill().map((_,i) => i);
    var pivoted = indexes.map(i => input.map(arr => arr[i] ));
    var flattened = pivoted.flat().filter(el => el !== undefined);


One Liner:



    var output = Array(Math.max(...input.map(arr => arr.length))).fill().map((_,i) => i)
                   .map(i => input.map(arr => arr[i] ))
                   .flat().filter(el => el !== undefined)



[0]: https://stackoverflow.com/q/4020796/1366033
[1]: https://stackoverflow.com/a/33457557/1366033
[2]: https://stackoverflow.com/q/10865025/1366033
[3]: https://stackoverflow.com/a/42194793/1366033

I'm trying to use `reduce()` combine a set of arrays in a "collated" order so items with similar indexes are together. For example:

    input = [["one","two","three"],["uno","dos"],["1","2","3","4"],["first","second","third"]]
    
    output = [ 'first','1','uno','one','second','2','dos','two','third','3','three','4' ]

It doesn't matter what order the items with similar index go as long as they are together, so a result of `'one','uno','1'...` is a good as what's above. I would like to do it just using immutable variables if possible.

I have a way that works: 

		const output = input.reduce((accumulator, currentArray, arrayIndex)=>{
            currentArray.forEach((item,itemIndex)=>{
                const newIndex = itemIndex*(arrayIndex+1);
                accumulator.splice(newIndex<accumulator.length?newIndex:accumulator.length,0,item);
            })
            return accumulator;
        })

But it's not very pretty and I don't like it, especially because of the way it mutates the accumulator in the forEach method. I feel there must be a more elegant method.

I can't believe no one has asked this before but I've tried a bunch of different queries and can't find it, so kindly tell me if it's there and I missed it. Is there a better way? 

To clarify per question in comments, I would like to be able to do this without mutating any variables or arrays as I'm doing with the `accumulator.splice` and to only use functional methods such as `.map`, or `.reduce` not a mutating loop like a `.forEach`.


