JavaScript Array Concat

Array.prototype.concat()
The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
Example 1: 
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]

array1[0]= 'aa';
array1.push('cc');
console.log(array1);
// Expected output: Array ["aa", "b", "c", "cc"]
console.log(array3);
// Expected output: ["a", "b", "c", "d", "e", "f"] 
// Expecting array3 to be a new array
Output: 
> Array ["a", "b", "c", "d", "e", "f"]
> Array ["aa", "b", "c", "cc"]
> Array ["a", "b", "c", "d", "e", "f"]
Note: The concat() method is a copying method. It does not alter this or any of the arrays provided as arguments but instead returns a shallow copy that contains the same elements as the ones from the original arrays.
Example 2: 
const array1 = [{'name': 'john'}, {'name': 'mohan'}];
const array2 = [{'name': 'rohan'}, {'name': 'shyam'}];
const array3 = array1.concat(array2);

console.log(array3);

array1[0].name = 'raj';
console.log(array3);
Output: 
[
  { name: 'john' },
  { name: 'mohan' },
  { name: 'rohan' },
  { name: 'shyam' }
]
[
  { name: 'raj' },
  { name: 'mohan' },
  { name: 'rohan' },
  { name: 'shyam' }
]
From the above example, we can see that concat is doing shallow copy. Changed data of array 1 is also available in array 3. In example 1, the same thing is not happening as it is having primitive data types.

Try it

More Examples

Concatenating two arrays 
const letters = ["a", "b", "c"];
const numbers = [1, 2, 3];

const alphaNumeric = letters.concat(numbers);
console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]
Concatenating three arrays 
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

const numbers = num1.concat(num2, num3);

console.log(numbers);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
Concatenating values to an array 
const letters = ["a", "b", "c"];

const alphaNumeric = letters.concat(1, [2, 3]);

console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]
Concatenating nested arrays 
const num1 = [[1]];
const num2 = [2, [3]];

const numbers = num1.concat(num2);

console.log(numbers);
// results in [[1], 2, [3]]

// modify the first element of num1
num1[0].push(4);

console.log(numbers);
// results in [[1, 4], 2, [3]]
Concatenating array-like objects with Symbol.isConcatSpreadable
concat does not treat all array-like objects as arrays by default — only if Symbol.isConcatSpreadable is set to a truthy value (e.g. true). 
const obj1 = { 0: 1, 1: 2, 2: 3, length: 3 };
const obj2 = { 0: 1, 1: 2, 2: 3, length: 3, [Symbol.isConcatSpreadable]: true };
console.log([0].concat(obj1, obj2));
// [ 0, { '0': 1, '1': 2, '2': 3, length: 3 }, 1, 2, 3 ]
Using concat() on sparse arrays
If any of the source arrays is sparse, the resulting array will also be sparse: 
console.log([1, , 3].concat([4, 5])); // [1, empty, 3, 4, 5]
console.log([1, 2].concat([3, , 5])); // [1, 2, 3, empty, 5]
Calling concat() on non-array objects
If the this value is not an array, it is converted to an object and then treated in the same way as the arguments for concat(). In this case the return value is always a plain new array. 
console.log(Array.prototype.concat.call({}, 1, 2, 3)); // [{}, 1, 2, 3]
console.log(Array.prototype.concat.call(1, 2, 3)); // [ [Number: 1], 2, 3 ]
const arrayLike = {
  [Symbol.isConcatSpreadable]: true,
  length: 2,
  0: 1,
  1: 2,
  2: 99, // ignored by concat() since length is 2
};
console.log(Array.prototype.concat.call(arrayLike, 3, 4)); // [1, 2, 3, 4]

Learn More