DEV Community

Cover image for Javascript Array Concat Method
Johnny Simpson
Johnny Simpson

Posted on • Edited on • Originally published at fjolt.com

Javascript Array Concat Method

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)
Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

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 ]
Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

 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 ]
Enter fullscreen mode Exit fullscreen mode

Top comments (0)