JavaScript Array concat()
October 28, 2019
concat() method concatenates two or more arrays into a single array. The concat() method returns the concatenated array and does not change the existing arrays. Find the syntax of concat() method.
const new_array = array1.concat(array2, array3, ...arrayN)
const array1 = ['a', 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = ['g', 'h', 'i']; const resultArray = array1.concat(array2, array3); console.log(resultArray);
[ "a", "b", "c", "d", "e", "f", "g", "h", "i" ]
concat() method works in following ways.
1. The
concat() method creates new array concatenating the array on which it is called and passed elements or arrays as arguments.
2. The
concat() method does not alter the array on which it is called and the arrays passed as arguments but instead it returns the shallow copy after merging them.
3. Elements of the source arrays are copied in resulting arrays in two ways:
a. Object References : When source arrays contain objects as an elements then
concat() method copies their references in resulting array. And hence both the source and resulting arrays refer to the same objects. It means modification in arrays, either in source or resulting array, will reflect in both source and resulting array.
b. Primitive Datatypes : In case of primitive datatypes such as strings, numbers and booleans, the
concat() method copies their values in resulting arrays.
Contents
Concatenating Arrays
console.log("--- Adding two arrays ---");
const num1 = [11, 12, 13];
const num2 = [14, 15, 16];
const outputArray1 = num1.concat(num2);
console.log(outputArray1);
console.log("--- Adding more arrays ---");
const array1 = ['aa', 'bb', 'cc'];
const array2 = ['dd', 'ee', 'ff'];
const array3 = ['gg', 'hh', 'ii'];
const outputArray2 = array1.concat(array2, array3);
console.log(outputArray2);
console.log("--- Adding boolean arrays ---");
const boolArray1 = [true, false, true];
const boolArray2 = [false, false, true];
const boolOutputArray = boolArray1.concat(boolArray2);
console.log(boolOutputArray);
--- Adding two arrays --- [ 11, 12, 13, 14, 15, 16 ] --- Adding more arrays --- [ "aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh", "ii" ] --- Adding boolean arrays --- [ true, false, true, false, false, true ]
Concatenating Values to Array
const num1 = [23, 24];
const num2 = [31, 32];
const outputArray1 = num1.concat(25, num2);
console.log(outputArray1);
const array1 = ['ab', 'cd'];
const array2 = ['pq', 'rs'];
const array3 = ['st', 'uv'];
const outputArray2 = array1.concat('abc', array2, 'pqr', array3);
console.log(outputArray2);
[ 23, 24, 25, 31, 32 ] [ "ab", "cd", "abc", "pq", "rs", "pqr", "st", "uv" ]
Concatenating Arrays of Objects
In case of Objects as array elements,concat() method copies their references in output array. The objects in source arrays and resulting array refer to the same objects and keep only references. When we modify properties of objects of array either in source or resulting array, the changes reflects in both sides.
class Employee {
constructor(id, name) {
this.id = id;
this.name = name;
}
}
const array1 = [
new Employee(101, "Puneet"),
new Employee(102, "Sujeet"),
new Employee(103, "Keshav")
];
const array2 = [
new Employee(104, "Krishna"),
new Employee(105, "Mahesh")
];
const outputArray = array1.concat(array2);
outputArray.forEach(e => console.log(e.id + " - " + e.name));
console.log("--- Modify source array ---");
var emp1 = array2[0];
emp1.name = "Shri Krishna";
outputArray.forEach(e => console.log(e.id + " - " + e.name));
console.log("--- Modify resulting array ---");
var emp2 = outputArray[2];
emp2.name = "Shree Keshav";
array1.forEach(e => console.log(e.id + " - " + e.name));
101 - Puneet 102 - Sujeet 103 - Keshav 104 - Krishna 105 - Mahesh --- Modify source array --- 101 - Puneet 102 - Sujeet 103 - Keshav 104 - Shri Krishna 105 - Mahesh --- Modify resulting array --- 101 - Puneet 102 - Sujeet 103 - Shree Keshav
Concatenating Nested Arrays
In case of nested arrays,concat() method copies their references in output array. When we modify nested arrays either in source or resulting array, the changes reflects in both sides.
Example-1:
var num1 = [[3, 4], [6, 7]];
var num2 = [[8, 9], [11, 12]];
var outputResult = num1.concat(num2);
console.log(outputResult);
console.log("--- Concatenating Values to Array ---")
var arr1 = [['a1', 'a2'], ['a3', 'a4']];
var outputArray = arr1.concat('a5', [['a6', 'a7'], ['a8', 'a9']], ['a10', 'a11']);
console.log(outputArray);
[[3, 4], [6, 7], [8, 9], [11, 12]]
var num1 = [[3, 4], [6, 7]]; var num2 = [[8, 9], [11, 12]]; var outputResult = num1.concat(num2); array1 = num2[0]; array1[1] = 20; console.log(outputResult);
[[3, 4], [6, 7], [8, 20], [11, 12]]
Concatenating Arrays using Spread Syntax
Arrays can be concatenated using JavaScript Spread syntax (…Array). Find the example.const num1 = [51, 52, 53]; const num2 = [55, 56, 57]; const outputArray = [...num1, ...num2]; console.log(outputArray); const array1 = ['b1', 'b2', 'b3']; const array2 = ['b5', 'b6', 'b7']; const resultArray = ['b8', ...array1, 'b9', ...array2]; console.log(resultArray);
[ 51, 52, 53, 55, 56, 57 ] [ "b8", "b1", "b2", "b3", "b9", "b5", "b6", "b7" ]
References
JavaScript Array.concat()Spread syntax
