Javascript Array Concat Method

📣 Sponsor

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:


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:


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.

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.

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:


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


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:


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:


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 ]

Last Updated 1668347240425

Javascript Array Concat Method

📣 Sponsor

More Tips and Tricks for Javascript

Subscribe for Weekly Dev Tips