Javascript Array Concat Method
Tags: webdev, javascript, tutorial, typescript
Published: 2022-11-13 13:50:36

The `concat` method on arrays is used to take two arrays and concatenate them into one. It takes as many arrays as you like - so you can concatenate many arrays at once:
```javascript
Array.concat(value1, value2, value3, ...valueN)
```

Each item added to the `concat` method must be of type array. Let's look at a simple example. Below, we combine two arrays:

```javascript
let myArray = [ 1, 2, 3, 4, 5 ];
let newArray = [ 'n', 'a', 'e', 'k' ] 

let mergedArray = myArray.concat(newArray);

console.log(mergedArray); // [ 1, 2, 3, 4, 5, 'n', 'a', 'e', 'k' ]
```

`concat` does not remove duplicates - but if you are interested in a data structure which does, [you might want to read my guide on Javascript sets](https://fjolt.com/article/javascript-sets). 

The `concat` method creates a shallow copy of the array it's applied to, with the addition of any other arrays added to the end. [You can learn more about shallow copies here](https://fjolt.com/article/javascript-shallow-copies). 

That means that although it seems like a new array is created, it still has a connection with the original array you modified. In fact, every array you mention in `concat` is a shallow copy of the original. Consider the following example:
```javascript
let myArray = [ { name: "John" }, 1, 2, 3, 4, 5 ];
let newArray = [ { name: "Jacob" }, 'a', 'e', 'k' ] 

let mergedArray = myArray.concat(newArray);

myArray[0].name = "Jingleheimer";
newArray[0].name = "Schmidt";
newArray[1] = 5;
console.log(mergedArray, myArray); // [ { name: "Jingleheimer" }, 1, 2, 3, 4, 5, { name: "JSchmidtacob" }, 'a', 'e', 'k' ]
```

You might expect that changing `name` on `myArray` and `newArray` does not affect `mergedArray` - but it does. However, `newArray[1] = 5` has no effect on `mergedArray`. 

You can learn the details of [why this works like this here]((https://fjolt.com/article/javascript-shallow-copies)), but the basic premise is that the arrays we used in `concat` maintain the same reference in memory as the original arrays. Updating `name` updates both the `mergedArray` and the original arrays since they are all stored in the same place. However, typing `newArray[1]` tells Javascript to put a completely new value in position `[1]` of `mergedArray`.

This is important to remember when you run into weird Javascript array errors.

## Concating multiple arrays
We've looked at how you can concatenate two arrays, but concatenating more works in much the same way. You list all your arrays in the `concat` function like so:

```javascript
let myArray = [ 1, 2, 3, 4, 5 ];
let newArray = [ 'n', 'a', 'e', 'k' ] 
let anotherArray = [ 7, 1, 5, 7 ] 

let mergedArray = myArray.concat(newArray, anotherArray);

console.log(mergedArray); // [ 1, 2, 3, 4, 5, 'n', 'a', 'e', 'k', 7, 1, 5, 7 ]
```

The arrays are merged in the order they are mentioned. 

## Concatenating nested arrays
Nested arrays are concatenated in the same way. The outer array is removed, meaning that the nested elements become part of the first array:
```javascript
let myArray = [ [1, [2, 3], 4], 5 ];
let newArray = [ ['n', 'a'], 'e', 'k' ] 

let mergedArray = myArray.concat(newArray);

console.log(mergedArray); // [ [1, [2, 3], 4], 57, ['n', 'a'], 'e', 'k' ]
```

## Values in concatenated arrays
If you do pass a simple value to `concat`, it will treat it as an array element. That means if you passed in `'value'` rather than `['value']`, it would coerce it to `['value']` anyway:
```javascript
let myArray = [ 1, 2, 3, 4, 5 ];

let mergedArray = myArray.concat(1, 2, 3);

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