# 5 Ways To Join Arrays Together In Javascript

Welcome to a tutorial on how to join or combine arrays together in Javascript. So you are facing a problem while trying to combine two “dreaded arrays” together in Javascript?

The common ways to join arrays together in Javascript are:

1. `var combined = ARRAYA.concat(ARRAYB);`
2. `var combined = [...ARRAYA, ...ARRAYB];`
3. Manually loop and combine the arrays.
• `var combined = [];`
• `for (let el of ARRAYA) { combined.push(el); }`
• `for (let el of ARRAYB) { combined.push(el); }`
4. Splice the array.
• `var combined = ARRAYA;`
• `combined.splice(1, 0, ...ARRAYB);`
5. Map the arrays together using a function. For example, add the values of both arrays.
• `var ARRAYA = [1, 2, 3];`
• `var ARRAYB = [4, 5, 6];`
• `function sum (v, i) { return v + this[i]; }`
• `var combined = ARRAYA.map(sum, ARRAYB);`

That covers the quick basics, but let us walk through more examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

## QUICK SLIDES ### QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

## MERGING ARRAYS All right, let us now get into the various ways to join arrays together in Javascript.

### 1) CONCAT FUNCTION

1-concat.js
``````// (A) ARRAYS
var arrA = ["Foo", "Bar"];
var arrB = ["Hello", "World"];
var arrC = [88, 22, 33];

// (B) COMBINE 2 ARRAYS
var combinedA = arrA.concat(arrB);
console.log(combinedA); // Foo, Bar, Hello, World

// (C) COMBINE 3 (OR MORE) ARRAYS
var combinedB = arrA.concat(arrB, arrC);
console.log(combinedB); // Foo, Bar, Hello, World, 88, 22, 33``````

As in the introduction above, the `concat()` function is probably the “number one recommendation” on the Internet. But take note, we can use it to combine more than 2 arrays together.

``````// (A) ARRAYS
var arrA = ["Foo", "Bar"];
var arrB = ["Hello", "World"];
var arrC = [88, 22, 33];

// (B) JOIN TWO ARRAYS
var combinedA = [...arrA, ...arrB];
console.log(combinedA); // Foo, Bar, Hello, World

// (C) COMBINE MULTIPLE ARRAYS
var combinedB = [...arrA, ...arrB, ...arrC];
console.log(combinedB); // Foo, Bar, Hello, World, 88, 22, 33
``````

Introduced in ES2018, the spread operator `...` simply “spreads” all elements of an array out one-by-one. So when we do `[...arrA, ...arrB]`, we are simply creating a new array, by laying the elements of the existing arrays inside.

P.S. Take note that older browsers before 2018 will not support the spread operator.

### 3) MANUAL PUSH

3-manual.js
``````// (A) ARRAYS
var arrA = ["Foo", "Bar"];
var arrB = ["Hello", "World"];
var arrC = [88, 22, 33];

// (B) MANUALLY LOOP & PUSH ARRAY ELEMENTS
var combined = arrA; // Foo, Bar
for (let el of arrB) { combined.push(el); }
console.log(combined); // Foo, Bar, Hello, World

// (C) TO ADD MORE, WE SIMPLY LOOP & PUSH AGAIN
for (let el of arrC) { combined.push(el); }
console.log(combined); // Foo, Bar, Hello, World, 88, 22, 33``````

Once upon a time in the Stone Age of the Internet, this is how we combine arrays together. It may be “old-school”, but it is still applicable today – We can our own custom processing in the `for` loop, maybe check if an element is a number before combining it.

### 4) SPLICE

4-splice.js
``````// (A) ARRAYS
var arrA = ["Foo", "Bar"];
var arrB = ["Hello", "World"];
var arrC = [88, 22, 33];

// (B) COMBINE WHOLE ARRAYS
// ARRAY.SPLICE(START, DELETE, ELEMENTS TO INSERT)
var combinedA = [...arrA];
combinedA.splice(arrA.length, 0, ...arrB);
console.log(combinedA); // Foo, Bar, Hello, World

// (C) "INSERT" INTO SPECIFIED INDEX
var combinedB = [...arrA];
combinedB.splice(1, 0, ...arrB);
console.log(combinedB); // Foo, Hello, World, Bar

// (D) COMBINING MULTIPLE ARRAYS
var combinedC = [...arrA];
combinedC.splice(1, 0, ...arrB, ...arrC);
console.log(combinedC); // Foo, Hello, World, 88, 22, 33 Bar``````

Splice is rather confusing, but it is also very flexible. We can use it to do “special combinations”, for example, joining an array in the middle instead of the end.

### 5) MAP

5-map.js
``````// (A) ARRAYS
var arrA = [1, 2, 3, 4];
var arrB = [11, 22, 33, 44];

// (B) COMBINE WITH CUSTOM MAPPING FUNCTION
// * THIS WILL NOT CREATE [1, 2, 3, 11, 22, 33]
// * BUT DOES [1 * 11, 2 * 22, 3 * 33]
var combined = arrA.map(
(val, idx) => { return val * arrB[idx]; }, arrB
);
console.log(combined); // 11, 44, 99
``````

Lastly, this is another way to do a “custom combination”. In this example, we are combining 2 arrays by multiplying the elements together – Just modify the `map()` function to do whatever is required in your case. That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

### SUMMARY

 Statement/Operator/Function Description Reference Link `COMBINED = ARRAY1.concat(ARRAY2, ARRAY3, ...ARRAYN)` Join 2 or more arrays together. Click Here `COMBINED = [...ARRAY1, ...ARRAY2, ...ARRAYN]` “Spread” and combine the existing arrays into a new one. Click Here `ARRAY.push(VALUE)` Add a new element to the end of an existing array. Click Here `ARRAY.splice(START, DELETE, VALUE, VALUE, ...VALUEN)` The “flexible way” to join 2 arrays together. Click Here `ARRAY.map(FUNCTION, REFERENCE)` Map the given array onto a new one, using the given function. Click Here

### INFOGRAPHIC CHEAT SHEET 