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 ]
More Tips and Tricks for Javascript
- Javascript Records and Tuples
- Javascript: Check if an Array is a Subset of Another Array
- Javascript Arrays - How to Remove Duplicate Elements
- Javascript Array Concat Method
- Javascript Map, and How it is Different from forEach
- Deleting an Item in an Array at a Specific Index
- How to Create new Elements with Javascript
- An Introduction to Javascript Objects
- The Javascript API to Access a User's Local Files
- Javascript toLowerCase() - Convert Strings to Lowercase