Merge two arrays in JavaScript (ES5 or below)

Question

I have 2 arrays that I need to merge in a particular order in javascript. Here is the sample..

var alphabets = [[["a"], ["b"]], ["c"], ["d"], [["e"], ["f"]]];
var numbers   = [[["1"], ["2"]], ["3"], ["4"], [["5"], ["6"]]];

var result    = [[["a", "1"], ["b", "2"]], ["c", "3"], ["d", "4"], [["e", "5"], ["f", "6"]]];

Need help here..

here is what I have tried so far

var res = [];

var i;
for (i = 0; i < cars.length; i++) {
  res.push(alphabets[i].concat(numbers[i]));
}

Try to figure it out first, do the research on how to do it, then show what you've tried and what you've discovered. — Emiel Zuurbier
– Emiel Zuurbier, Commented Mar 28, 2021 at 17:07
Look for recursion instead of a simple for loop.... I made a CodePen for you to check. ;) — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Mar 28, 2021 at 17:48
the answer was just mindblowing to me.. WOW!!!, I just can't thank you enough for that!!! @LouysPatriceBessette — towhid
– towhid, Commented Mar 28, 2021 at 18:02

Louys Patrice Bessette · Accepted Answer · 2024-11-10 00:05:43Z

4

For this quite fun "array merging" challenge... (I assume and hope this is a "minimal" example of something more complex). You definitely need a recursive function.

A simple for loop is not enought to make sure to loop throught any deep level of the arrays without loosing yourself in a mess of duplicate code lines.

Warning: the logic below ONLY works with two perfectly matching arrays, from the structure point of view.

What is a recursive function by the way? : freeCodeCamp tutorial ← Best short example I know.

So here is the CodePen demo I made for you in a couple minutes... I already knew about recursion and when to use it. But that is a wonderful example, so thanks to your question.

const alphabets = [[["a"], ["b"]], ["c"], ["d"], [["e"], ["f"]]];
const numbers   = [[["1"], ["2"]], ["3"], ["4"], [["5"], ["6"]]];

// Expected result
const expected  = [[["a", "1"], ["b", "2"]], ["c", "3"], ["d", "4"], [["e", "5"], ["f", "6"]]];

// A merging function
const merge = (arr1, arr2) => {
  
  return arr1.map((item, index) =>{
    
    // if the item contains arrays
    // do another recursion
    if (Array.isArray(item[0])){
      return merge(item, arr2[index])  // a recursion is a function calling itself.
    }
    
    // Otherwize, return a "merged" array
    return [item[0], arr2[index][0]]
  })
                         
}

const result = merge(alphabets, numbers)

console.log("Result:\n", JSON.stringify(result))
console.log("Expected:\n", JSON.stringify(expected))

CodePen

The only condition in that recursion is the string test... You may need more tests on your arrays. Be careful about any infinite loop... Causing a stack overflow!!! Have fun coding!

edited Nov 10, 2024 at 0:05

answered Mar 29, 2021 at 1:37

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

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

5 Comments

vanowm Over a year ago

Why do you test for string instead of array? Array.isArray(item[0])

Louys Patrice Bessette Over a year ago

Good point @vanowm ;) I edited... Thanks.

Chris Sharp Over a year ago

maybe you should update the syntax since the question asks for ECMA 5

Louys Patrice Bessette Over a year ago

@ChrisSharp: done.

Chris Sharp Over a year ago

@LouysPatriceBessette ECMA5 will only use var as a variable keyword. let and const won't work and neither will arrow functions

Collectives™ on Stack Overflow

Merge two arrays in JavaScript (ES5 or below)

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related