Javascript : Concatenating Arrays
Tags: javascript, programming
Published: 2020-02-13 16:12:28

---
title: Javascript : Concatenating Arrays  
published: true
description: learn how to concatenate arrays using javascript
tags: javascript,programming
---

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 :

```javascript
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:

```javascript
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 ?

```javascript
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 ?

```javascript

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 :

```javascript

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.

```javascript

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 ?

```javascript
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:

```javascript


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()

```javascript 

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() :

```javascript 

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() :

```javascript

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 : 

```javascript 
const array1 = [1, 3, 5];
const array2 = [2, 4, 6];
```
and the output we want is also sorted ! something like :

```javascript
const resultArray = [1, 2, 3, 4, 5, 6];
```
This can be solved easily using spread operator : 

```javascript 

// 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:

```javascript

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 :

```javascript

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:


```javascript 

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]

```