JavaScript Array concat() Method with Example

JavaScript array concat() method joins (or concatenates) two or more arrays. It is used to merge elements of two or more arrays in JavaScript.

It returns a copy of a new array containing the joined (or merged) arrays. The joined array contains elements of the first array, then elements of the second array.

To join arrays, use the method on the first array and pass the name of the second array as its parameter. This method does not change the existing arrays.

JavaScript Array concat() Method Syntax

---

The general syntax to define concat() method in JavaScript is as:

array1.concat(array2, array3, ..., arrayN)
Or,
array.concat(value1, value2, . . . . valueN)

Here, array is the name of calling array object. value1, value2, …. valueN are the values passed as parameters to the concat() method that appends these values at the end of calling array.

Passed argument values can be a data value or an array object. If an array element is a string, number, or boolean value (not String, Number, or Boolean object), JavaScript copies values of the original array into a new array.

But, if an original array element is a reference to an object of any kind, JavaScript copies object reference into a new array. In this case, both the original and new array refer to the same object.

So, if we make the change in either array’s element, the change occurs to the object and both array elements reflect the change to the object. i.e. the change will be visible to both new and original arrays.

The concat() method joins or merges parameters in the order in which we passed them to the concat() method. Sometimes, we also need to use concat() method without parameters to clone an existing array.

Consider the following example code. We have two separate arrays, names and ages. We will combine the elements of both arrays.

Program code 1:

<script>
let names = ["Nick", "Paul", "Deepak"];
let ages = [30, 35, 32];
let concatArray = names.concat(ages);
document.write(concatArray);
</script>

When we will run this code, the following output will generate on the browser.

Output:
      Nick,Paul,Deepak,30,35,32

In this code, we have created an array named names with three elements and an array named ages with three elements.

Next, we have defined a new array named concatArray, which is a combination of two arrays. We have assigned the value returned by the concat() method to a new array named concatArray.

Concatenating two Arrays using JavaScript concat() method

---

Let’s create a very simple program in which we will merge elements of two arrays of string and numeric types.

Program code 2:

<script>
// Create arrays of string and numeric types.
   const letters = ['a', 'b', 'c', 'd', 'e'];
   const numbers = [1, 2, 3, 4, 5, 6];
// Concatenate two arrays letters and numbers and stores the result to a variable alphaNumeric.
   const alphaNumeric = letters.concat(numbers);
   document.write(alphaNumeric);
</script>

Output:
     a,b,c,d,e,1,2,3,4,5,6

As you can see in the output, the concat() method merges the parameter passed array at the end of calling array.

If you want to have elements of array numbers first, call the concat() method using numbers array name and send letters array name as a parameter. Look at the following script code below.

Program code 3:

<script>
const letters = ['a', 'b', 'c', 'd', 'e'];
const numbers = [1, 2, 3, 4, 5, 6];
const alphaNumeric = numbers.concat(letters);
document.write(alphaNumeric);
</script>

Output:
      1,2,3,4,5,6,a,b,c,d,e

Program code 4:

<script>
let fruits = new Array("Orange", "Apple", "Banana");
let veggies = new Array("Peas", "Corn");
let fruits_n_veggies = fruits.concat(veggies);
document.write(fruits_n_veggies);
</script>

Output:
       Orange,Apple,Banana,Peas,Corn

Let’s create a JavaScript program in which we will concat two arrays and iterate them using for loop.

Program code 5:

<script>
// Creating arrays.
   let days1 = ["Sunday", "Monday", "Tuesday"];
   let days2 = ["Wednesday", "Thursday", "Friday", "Saturday"];
// Join both arrays using concat() method and stores the result to a variable weekDays.
   let weekDays = days1.concat(days2);
// Iterating new array using for loop.
   for(let i = 0; i < weekDays.length; i++) {
        document.write(weekDays[i]+ "<br>");
    }
</script>

Output:
     Sunday
     Monday
     Tuesday
     Wednesday
     Thursday
     Friday
     Saturday

Merging two Arrays using Spread operator in JavaScript

---

To merge arrays, an alternative approach is to use spread operator introduced in ES6. Let’s create a program to merge two arrays using spread operator in JavaScript.

Program code 6:

<script>
let evens = [2, 4, 6, 8, 10];
let odds = [1, 3, 5, 7, 9];
let evensAndOdds = [...evens, ...odds];
document.write(evensAndOdds);
</script>

Output:
      2,4,6,8,10,1,3,5,7,9

The primary advantage of using spread operator is that it makes code more intuitive and easy to read.

If you want to combine more than two arrays at a time or want to combine arrays with literal values, use spread operator that is a great tool in JavaScript. Look at another example based on it.

Program code 7:

<script>
let evens = [2, 4, 6, 8, 10];
let odds = [1, 3, 5, 7, 9];
let evensAndOdds = [...evens, 12, 14, ...odds, 11, 13];
document.write(evensAndOdds);
</script>

Output:
     2,4,6,8,10,12,14,1,3,5,7,9,11,13

Concatenating Array of Objects in JavaScript

---

If an array holds an object of any kind, JavaScript copies object reference in a new array. For example, if we combine two arrays of objects having elements, JavaScript will not create new array objects.

Instead, the new combined array gets object references pointing to the same array objects. If we change an element in the combined array object, we will also see the modification in the original array as well.

Let’s take an example program based on it.

Program code 8:

<script>
let array1 = [new Array(2, 3, 4)];
let array2 = [new Array(5, 6, 7)];
let combinedArray = array1.concat(array2);
document.write("New merged array: " +combinedArray, "<br>");

// Adding an element in the new array.
combinedArray[0].push(8); // push() method adds element to the end of array.
document.write("Change in original array: " +array1, "<br>");
document.write("Change in merged array: " +combinedArray);
</script>

Output:
      New merged array: 2,3,4,5,6,7
      Change in original array: 2,3,4,8
      Change in merged array: 2,3,4,8,5,6,7

Program code 9:

<script>
let colors1 = new Array("Red", "yellow");
let colors2 = new Array("Green", "White");
let array1 = [colors1];
let array2 = [colors2];
let combinedArray = array1.concat(array2);
document.write("New merged array: " +combinedArray, "<br>");

// Adding an element in the new array.
  combinedArray[0].push("Black");
  document.write("Change in original array: " +array1, "<br>");
  document.write("Change in merged array: " +combinedArray);
</script>

Output:
     New merged array: Red,yellow,Green,White
     Change in original array: Red,yellow,Black
     Change in merged array: Red,yellow,Black,Green,White

Concatenating three Arrays

---

If we merge three arrays, elements of an array with which we invoke concat() method will come first, and then elements of each array name sent as a parameter will merge in order in which they are sent.

Let’s take an example in which we will merge three arrays of numeric types. Look at the following script code that will join three arrays.

Program code 10:

<script>
let num1 = [10, 20, 30];
let num2 = [40, 50, 60];
let num3 = [70, 80, 90];

let numbers = num1.concat(num2, num3);
document.write(numbers);
</script>

Output:
      10,20,30,40,50,60,70,80,90

Program code 11:

<script>
let fruits = new Array("Banana", "Apple");
let veggies = ["Corn", "Peas"];
let meats = new Array("Chicken", "Fish");
let combinedGroup = fruits.concat(meats, veggies);
document.write(combinedGroup);
</script>

Output:
     Banana,Apple,Chicken,Fish,Corn,Peas

Concatenating values to an Array

---

Let’s take an example in which we will concatenate three values into an array.

Program code 12:

<script>
// Create an array.
   let letters = ['a', 'b', 'c', 'd'];
// Concatenate numeric values at the end of calling array.
   let alphaNumeric = letters.concat(1, [2, 3, 4]);
   document.write(alphaNumeric);
</script>

Output:
      a,b,c,d,1,2,3,4

Concatenating Nested Arrays

---

Let’s create a JavaScript program where we will concatenate a nested array. Look at the following code below.

Program code 5:

let num1 = [1, 2, 3];
let num2 = [
    [4, 5],
    [6, 7],
];
let joined = num1.concat(num2);
console.log(joined);

// Changes the value 2 to 0.
   num1[1] = 0;
   console.log(num1);
// Changes not reflected in a joined array.
   console.log(joined);

Output:
      [1, 2, 3, [4, 5], [6, 7] ]
      [1, 0, 3]
      [1, 2, 3, [4, 5], [6, 7] ]

---

In this tutorial, you learned array concat() method in JavaScript with various example programs. Hope that you will have understood the basic concepts of array concat() method and practiced all example programs.
Thanks for reading!!!
Next ⇒ JavaScript array join() method ⇐ Prev Next ⇒