Concatenate two or more arrays in JavaScript

This post will discuss how to concatenate two or more arrays in JavaScript.

There are several ways to concatenate two or more arrays in JavaScript. Here are some of the most common functions:

1. Using `Array.concat()` function

The concat() is a built-in function of the Array prototype that returns a new array that is the result of joining two or more arrays. We can use this function by calling it on one of the arrays and passing the other arrays as arguments. It creates a new array and the original arrays are not modified. Here’s an example:

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

let arr3 = arr1.concat(arr2);

console.log(arr3); // [1, 2, 3, 4, 5, 6]

Download Run Code

This function is widely supported and can handle any number of arguments. We can pass multiple arrays as arguments to this function. Here’s an example:

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

let arr3 = [7, 8, 9];

let arr4 = arr1.concat(arr2, arr3);

console.log(arr4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Download Run Code

2. Using spread operator

This is a new feature in ES6 that allows us to expand an iterable object (such as an array) into individual elements. We can use this operator to combine two or more arrays by placing them inside square brackets. Here’s an example:

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

let arr3 = [...arr1, ...arr2];

console.log(arr3); // [1, 2, 3, 4, 5, 6]

Download Run Code

This function is simple and concise, but it may not be supported by older browsers or environments. We can use this operator to combine multiple arrays into one array literal. Here’s an example:

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

let arr3 = [7, 8, 9];

let arr4 = [...arr1, ...arr2, ...arr3];

console.log(arr4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Download Run Code

3. Using `Array.push()` function

The Array.push() built-in function adds one or more elements to the end of an array and returns the new length of the array. We can use this function to append another array to an existing one by using the apply() function or the spread operator. Here’s an example using the apply() function:

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

arr1.push.apply(arr1, arr2);

console.log(arr1); // [1, 2, 3, 4, 5, 6]

Download Run Code

This function modifies the original array and can be faster than concat(). We can use this function to append multiple arrays to an existing array, as shown below. Note the usage of the spread operator to pass the elements of each array as arguments to this function.

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

let arr3 = [7, 8, 9];

arr1.push(...arr2, ...arr3);

console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Download Run Code

That’s all about concatenating multiple arrays in JavaScript.

Concatenate two or more arrays in JavaScript

1. Using Array.concat() function

2. Using spread operator

3. Using Array.push() function

Share this:

1. Using `Array.concat()` function

3. Using `Array.push()` function