Home  >  JavaScript

JavaScript Array concat()

By Arvind Rai, October 28, 2019
The JavaScript 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) 
Find a sample example.
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = ['g', 'h', 'i'];
const resultArray = array1.concat(array2, array3);
console.log(resultArray); 
Find the output.
[ "a", "b", "c", "d", "e", "f", "g", "h", "i" ] 
The JavaScript 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.

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); 
Output
--- 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); 
Output
[ 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)); 
Output
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); 
Output
[[3, 4], [6, 7], [8, 9], [11, 12]] 
Example-2: Modify source array.
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); 
Output
[[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); 
Output
[ 51, 52, 53, 55, 56, 57 ]
[ "b8", "b1", "b2", "b3", "b9", "b5", "b6", "b7" ] 

References

JavaScript Array.concat()
Spread syntax
POSTED BY
ARVIND RAI
ARVIND RAI
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us