Learn Javascript ES6 : Concatenating Arrays

In this article we are looking at how to use the concept of Arrays in Javascript ES6. this article is a part of series – Learn Javascript ES6

If you are familiar with Javascript ES6, then you might find some useful tricks to use arrays in this article.

There are 3 methods to concatenate arrays using Javascript :

Method 1: using Spread Operator (…)

Assume you have two arrays of numbers, and you want to join the two arrays :

const array1 = [1,2,3];
const array2 = [3,4,5];

// join the two arrays using spread operater '...'

const resultArray = [...array1, ...array2] 

console.log(resultArray);

//  O/P : [1,2,3,3,4,5]

Don’t forget, one can do this too:

const array1 = [1,2,3];
const array2 = [...array1, 4];

console.log(array2);

// O/P : [1,2,3,4]

Now what if we want to concatenate three arrays ?

const array1 = [1,2,3]
const array2 = [4,5,6]
const array3 = [7,8,9]

const resultArray = [...array1, ...array2, ...array3];

console.log(resultArray);

// O/P : [1, 2, 3, 4, 5, 6, 7, 8, 9]

Now what will happen if we try to concatenate two different arrays with different data types ?

let array1 = "letters";
let array2 =  [1, 2, 3, 4];

let resultArray = [...array1, ...array2];

console.log(resultArray );

// O/P: ["l", "e", "t", "t", "e", "r", "s", 1, 2, 3, 4]

But why ? why not [“letters”, 1, 2, 3 ,4]. This happens because if we use spread our string, it will split the word in to seperate letters. You can probably use the method 2 for that.

Lets now see on how we can do concat operation using array objects :

const array1 =  [ 
                   {
                     "id": 1,
                     "name": "John",
                    },
                    {
                      "id": 2,
                      "name": "Ron"
                    }
                 ];

const array2  = [ 
                   {
                     "id": 3,
                     "name": "Harry",
                    },
                    {
                      "id": 4,
                      "name": "Hermione"
                    }
                 ]

const resultArray = [...array1, ...array2];

console.log(resultArray);

Method 2: Using Array.prototype.concat()

Let’s use the same example, but this time using concat() method. This method does not change the existing arrays, but instead returns a new array.

const array1 = [1,2,3];
const array2 = [3,4,5];

// join the two arrays using concat()

const resultArray = array1.concat(array2);

console.log(resultArray);

// O/P : [1, 2, 3, 3, 4, 5]

But what If we want to concatenate three arrays ?

const array1 = [1,2,3];
const array2 = [4,5,6];
const array3 = [7,8,9];

const resultArray = array1.concat(array2, array3);

console.log(resultArray);

// O/P : [1,2,3,4,5,6,7,8,9]

now let’s check for concatenating arrays of two different types:

const array1 = [1,2,3,4];
const array2 = 'letters';

const resultArray = array1.concat(array2);

console.log(resultArray);

// O/P : [1, 2, 3, 4, "letters"]

Method 3: using Array.prototype.push()

when using push, its important to remember that it won’t create a new array, and change existing array data. so use this by keeping this in mind.

Using Spread and push()

const array1 = [1,2,3];
const array2 = [4,5,6];

const resultArray = array1.push(...array2);

// when you use push, it returns the LENGTH of the combined array

console.log(resultArray);  // 6

console.log(array1); // [1, 2, 3, 4, 5, 6]

console.log(array2); // [4, 5, 6]

Using forEach and push() :

const array1 = [1,2,3];
const array2 = [4,5,6];

const resultArray = array2.forEach(item => array1.push(item));

console.log(array1); // [1,2,3,4,5,6]

Using for and push() :

const array1 = [1,2,3];
const array2 = [4,5,6];

for(let x=0; x<array2.length; x++) { 
     array1.push(array2[x]);
} 

console.log(array1); // 1,2,3,4,5,6

Zipper Merge ( Merging two sorted arrays )

Let’s think of a scenario, where we have two arrays (both sorted) like :

const array1 = [1, 3, 5];
const array2 = [2, 4, 6];

and the output we want is also sorted ! something like :

const resultArray = [1, 2, 3, 4, 5, 6];

This can be solved easily using spread operator :

// function to return zipped array
function zip(array1, array2) {

      // merge the two sorted arrays 
      let result = [...array1, ...array2];  // [1, 3, 5, 2, 4, 6]

      // sort the result array again 
      return result.sort((a,b) => a-b);  // [1, 2, 3, 4, 5, 6]
}


const array1 = [1, 3, 5];
const array2 = [2, 4, 6];

const resultArray = zip(array1, array2);

console.log(resultArray); // [1, 2, 3, 4, 5, 6]

Unique Array from Two Arrays

Now let’s think of a scenario, where you have two arrays (with some elements in common ) like:

const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];

and the output we want is a new array with unique elements only :

const resultArray = [1, 2, 3, 4, 5, 6];

So what should we do ? We can create a unique array using spread operator and sets like this:

const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];

const mergedArray = [...array1, ...array2];

console.log(mergedArray) // [1, 2, 3, 4, 3, 4, 5, 6]

const resultArray = [...new Set(mergedArray)]; 

console.log(resultArray) // [1, 2, 3, 4, 5, 6]

Thats all for today, for more tutorials, follow our series – Learn Javascript ES6