How to merge/combine two arrays in Javascript

Question

How can I merge or combine two arrays in this order.

var list1 = ["A", "B", "C"];
var list2 = ["X", "Y", "Z"];

 var i = 0;
 for (i = 0; i < list1.length && list2.length; i++) {
     var list3[i] = list1[i] + list2[i];
 }

The final result would be.

var list3 = ["AX", "BY", "CZ"];

@LuisfelipeDejesusMunoz, if he needs to support old browsers, `map` won't work with IE8 and below. — rodrigocfd, Mar 23 '18 at 14:33
@Rodrigo that would be a very weird case (usage of IE<11). But in that case, he would need to use a poly-fill — Luis felipe De jesus Munoz, Mar 23 '18 at 14:34

Mohammad Usman · Answer 1 · 2018-03-23T14:35:42.020

6

You can use map() like this:

let list1 = ["A", "B", "C"];
let list2 = ["X", "Y", "Z"];

let result = list1.map((c, i) => c + list2[i]);

console.log(result);

You can also use template literals:

let list1 = ["A", "B", "C"];
let list2 = ["X", "Y", "Z"];

let result = list1.map((c, i) => `${c}${list2[i]}`);

console.log(result);

Useful Resources:

edited Mar 23 '18 at 14:35

answered Mar 23 '18 at 14:28

Mohammad Usman

37,952
20
92
95

score 4 · Answer 2 · answered Mar 23 '18 at 14:26

4

If lengths are the same you can use map() method.

var list1 = ["A", "B", "C"];
var list2 = ["X", "Y", "Z"];

const merged = list1.map((e, i) => e + list2[i]);
console.log(merged)

answered Mar 23 '18 at 14:26

Nenad Vracar

118,580
15
151
176

gurvinder372 · Accepted Answer · 2018-03-23T14:33:42.870

Your code works fine, just need to declare list3 before loop rather than inside it

var list1 = ["A", "B", "C"];
var list2 = ["X", "Y", "Z"];

var i = 0;
var list3 = []; //observe this line here
for (i = 0; i < list1.length && list2.length; i++) {
     list3[i] = list1[i] + list2[i]; //var is removed
}

Edit

Also observe the change in for-loop condition as well

for (i = 0; i < list1.length && i < list2.length; i++) { // i needs to be less than list2.length as well
     list3[i] = list1[i] + list2[i]; //var is removed
}

Note

Above code will ensure that list3 has the length of Math.min (list1.length , list2.length)

score 3 · Answer 4 · answered Mar 23 '18 at 14:27

You were almost there:

var list1 = ['A', 'B', 'C'];
var list2 = ['X', 'Y', 'Z'];
var list3 = [];

for (var i = 0; i < list1.length; ++i) {
  list3[i] = list1[i] + list2[i];
}

Declare list3 outside the loop. And since both lists have the same size, you need to check just one.

Ele · Answer 5 · 2018-03-23T14:37:31.083

You can use the function map.

var list1 = ["A", "B", "C"];
var list2 = ["X", "Y", "Z"];

var result = list1.map((e, i) => e + list2[i])

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Or, you can concat the arrays, check for the length, and concatenate the elements:

var list1 = ["A", "B", "C"],
    list2 = ["X", "Y", "Z"],
    jump = list1.length, 
    result = [],
    arr = list1.concat(list2);
    
for (var i = 0; i < jump; i++) result.push(arr[i] + arr[i + jump]);
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

score 2 · Answer 6 · answered Mar 23 '18 at 14:27

Bit of Syntax issues:

Declare list3 as an empty array.
Don't use var to redeclare.

var list1 = ["A", "B", "C"];
var list2 = ["X", "Y", "Z"];
var list3 = [];
var i = 0;
for (i = 0; i < list1.length; i++) {
  list3[i] = list1[i] + list2[i];
}
console.log(list3);

Nina Scholz · Answer 7 · 2018-03-23T14:33:01.163

2

You need to declare list3 in advance and initialize with an empty array.

And you need to check if the index is smaller than the length of list2 for getting only values at the same index for result.

var list1 = ["A", "B", "C"],
    list2 = ["X", "Y", "Z"],
    list3 = [],
    i = 0;
    
for (i = 0; i < list1.length && i < list2.length; i++) {
    list3[i] = list1[i] + list2[i];
}

console.log(list3);

edited Mar 23 '18 at 14:33

answered Mar 23 '18 at 14:27

Nina Scholz

376,160
25
347
392

How to merge/combine two arrays in Javascript

7 Answers7