Javascript Array Concat Method – Dev Community

concat The method on arrays is used to take two arrays and combine them into one. You take as many arrays as you want – so you can concatenate multiple arrays at once:

Array.concat(value1, value2, value3, ...valueN)
enter fullscreen mode

exit fullscreen mode

added to each item concat The method must be of type array. Let’s look at a simple example. Below, we concatenate the 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 Doesn’t remove duplicates – but if you’re interested in a data structure that does, you might want to read my guide on JavaScript sets.

concat The method makes a shallow copy of the array to which it is invoked, in addition to any other arrays appended to the end. You can learn more about shallow copies here.

This means that although it looks like a new array is created, it still has a relationship with the original array you modified. In fact, every array you mentioned concat 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 can expect that changing name Feather myArray And newArray does not affect mergedArray – But it does. Although, newArray[1] = 5 has no effect on mergedArray,

You can learn the details about why it works like this, but the basic premise is that the arrays we used concat Maintain the same references to the original arrays in memory. to update name updates both mergedArray And the original arrays because they are all stored in one place. However, typing newArray[1] tells javascript to insert a completely new value into the position [1] of mergedArray,

It’s important to remember that when you run into weird JavaScript array errors.

join multiple arrays

We’ve seen how you can concatenate two arrays, but add more functions in the same way. you list all your arrays concat act like this:

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 in which they are mentioned.

join nested arrays

Nested arrays are concatenated in the same way. The outer array is removed, meaning that the nested elements become part of the array first:

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 pass a simple value to concat, it will treat it as an array element. that means if you passed 'value' instead of this ['value']it will force it to ['value'] Otherwise too:

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

Leave a Comment