Join multiple arrays in JavaScript

This post will discuss how to join multiple arrays in JavaScript.

There are several ways to join multiple arrays in JavaScript. A join operation combines two or more arrays into a single array. Here are some examples of how to join multiple arrays in JavaScript given some arrays:

1. Using `concat()` function

The concat() function takes one or more arrays as arguments and returns a new array that contains the elements of the original arrays. The original arrays are not modified. This is a common and simplest way to join multiple arrays in JavaScript. For example, if we have three arrays and we want to join them into one array, we can do:

let arr1 = [1, 2, 3];

let arr2 = [4, 5];

let arr3 = [6, 7];

// join the arrays with concat

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

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

Download Run Code

2. Using spread operator

This is a ES6 feature of JavaScript that allows expanding an array into individual elements. We can use the spread operator inside an array literal to join multiple arrays. This is a modern and concise way to join multiple arrays in JavaScript. For example, if we have some arrays and we want to join them into one array, we can do:

let arr1 = [1, 2, 3];

let arr2 = [4, 5];

let arr3 = [6, 7];

// join the arrays with spread operator

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

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

Download Run Code

3. Using `flat()` function

The flat() function takes an optional depth argument and returns a new array with all subarrays concatenated up to the specified depth. If no depth argument is provided, the default is 1. We can use this function to join multiple arrays by wrapping them in another array and flattening it using the default depth. Here’s an example using the same arrays as before:

let arr1 = [1, 2, 3];

let arr2 = [4, 5];

let arr3 = [6, 7];

// join the arrays with flat

let arr = [arr1, arr2, arr3].flat();

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

Download Run Code

4. Using `push()` function

The push() function takes one or more elements as arguments and adds them to the end of an array. We can use this function to add the elements of one or more arrays to the end of an existing array using the spread syntax. This will modify the original array. Here’s an example using the same arrays as before:

let arr1 = [1, 2, 3];

let arr2 = [4, 5];

let arr3 = [6, 7];

// join the arrays with push using spread operator

arr1.push(...arr2); // arr is now [1, 2, 3, 4, 5]

arr1.push(...arr3);

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

Download Run Code

Alternatively, we can use the push() function along with the apply() function to join multiple arrays without the need of the spread operator. For example:

let arr1 = [1, 2, 3];

let arr2 = [4, 5];

let arr3 = [6, 7];

// join the arrays with apply()

Array.prototype.push.apply(arr1, arr2);

Array.prototype.push.apply(arr1, arr3);

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

Download Run Code

5. Using `reduce()` function

The Array.reduce() function takes a callback function and an initial value as arguments and applies the callback function to each element of the array, accumulating the result in a single value. The callback function takes four parameters: the accumulator, the current element, the current index, and the source array. We can use this function to join multiple arrays by using an empty array as the initial value and concatenating each array to the accumulator using the concat() function or the spread operator. For example:

let arr1 = [1, 2, 3];

let arr2 = [4, 5];

let arr3 = [6, 7];

// join the arrays with reduce() using concat()

let arr = [arr1, arr2, arr3].reduce((acc, arr) => acc.concat(arr), []);

// or use spread operator

// let arr = [arr1, arr2, arr3].reduce((acc, arr) => [...acc, ...arr], []);

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

Download Run Code

That’s all about joining multiple arrays in JavaScript.

Join multiple arrays in JavaScript

1. Using concat() function

2. Using spread operator

3. Using flat() function

4. Using push() function

5. Using reduce() function

Share this:

1. Using `concat()` function

3. Using `flat()` function

4. Using `push()` function

5. Using `reduce()` function