5 Ways To Join Arrays Together In Javascript

Welcome to a beginner’s 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. Use the concat function – var combined = ARRAYA.concat(ARRAYB);
  2. Use the spread operator – 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’s all, 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.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Array Join Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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
var arrA = ["Foo", "Bar"];
var arrB = ["Hello", "World"];
var arrC = [88, 22, 33];
 
// COMBINE 2 ARRAYS
var arrD = arrA.concat(arrB);
console.log(arrD); // Foo, Bar, Hello, World
 
// COMBINE 3 (OR MORE) ARRAYS
var arrE = arrA.concat(arrB, arrC);
console.log(arrE); // 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 just take note, we can use it to combine more than 2 arrays together.

 

 

2) SPREAD OPERATOR

2-spread.js
var arrA = ["Foo", "Bar"];
var arrB = ["Hello", "World"];
var arrC = [88, 22, 33];
 
// JOIN TWO ARRAYS
var arrD = [...arrA, ...arrB];
console.log(arrD); // Foo, Bar, Hello, World
 
// YEP, WORKS FOR COMBINING MULTIPLE ARRAYS TOO
var arrE = [...arrA, ...arrB, ...arrC];
console.log(arrE); // Foo, Bar, Hello, World, 88, 22, 33

Introduced in ES2018, the spread operator ... simply “lays” all elements of an array apart. I.E. Spread them 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
var arrA = ["Foo", "Bar"];
var arrB = ["Hello", "World"];
var arrC = [88, 22, 33];

// MANUALLY PUSH EACH ELEMENT...
var arrD = arrA; // Foo, Bar
for (let el of arrB) { arrD.push(el); }
console.log(arrD); // Foo, Bar, Hello, World

// TO ADD MORE, WE SIMPLY PUSH AGAIN
for (let el of arrC) { arrD.push(el); }
console.log(arrD); // 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… Well, it may be “very manual”, but it is still applicable today – We can set some custom rules in the for loop, maybe check if an element is a number before combining it.

 

 

4) SPLICE

4-splice.js
var arrA = ["Foo", "Bar"];
var arrB = ["Hello", "World"];

// Let's say, we want Foo, Hello, World, Bar.
// We can use the splice function to do that.
// ARRAY.splice(START, DELETE, INSERT ELEMENTS)
var arrC = arrA;
arrC.splice(1, 0, ...arrB);
console.log(arrC);

For you guys who want to do some “special combination” such as joining another array in the middle – splice() and spread ... are your best friends.

 

5) MAP

5-map.js
var arrA = [1, 2, 3, 4];
var arrB = [11, 22, 33, 44];

// We want to create a new array by multiplying both.
// I.E. [1X11, 2X22, 3X33, 4X44]
var arrC = arrA.map(
  function(val, idx){
  // val: current value (of arrA)
  // idx: current index (of arrB)

    return val * this[idx];
  }, 
  // using "this" in the above function will refer to arrB
  arrB
);

console.log(arrC); // 11, 44, 99, 176

Well, I think this will be a “rare case”. We can also combine (literally combine) 2 different arrays together using the map() function – If we want to do some processing like multiplying the corresponding values together.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

How To Merge Arrays In Javascript (click to enlarge)

 

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

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!