How to get single array from multiple arrays in JavaScript

In this article, we will explore how to combine multiple arrays into a single array in JavaScript. This is a common task when working with data manipulation and array operations.

We will cover three effective methods: the spread operator (ES6), the concat() method, and using push() with the spread operator. Each approach has its own advantages and use cases.

Understanding the Problem

When working with multiple arrays, you often need to merge them into one continuous array while maintaining the original order of elements.

Method 1: Using Spread Operator

The spread operator (...) introduced in ES6 is the most modern and readable approach. It expands array elements and creates a new array containing all elements.

// Define multiple arrays
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

// Combine using spread operator
const combinedArray = [...array1, ...array2, ...array3];

console.log("Combined array:", combinedArray);
console.log("Original arrays remain unchanged:");
console.log("array1:", array1);

Combined array: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
Original arrays remain unchanged:
array1: [ 1, 2, 3 ]

Method 2: Using concat() Method

The concat() method is a traditional approach that merges arrays without modifying the original arrays. It returns a new array with combined elements.

// Define arrays
const names1 = ['Alice', 'Bob'];
const names2 = ['Charlie', 'David'];
const names3 = ['Eve', 'Frank'];

console.log("Before merging:");
console.log("names1:", names1);
console.log("names2:", names2);
console.log("names3:", names3);

// Method 1: Using empty array
const combined1 = [].concat(names1, names2, names3);

// Method 2: Using first array
const combined2 = names1.concat(names2, names3);

console.log("Combined (method 1):", combined1);
console.log("Combined (method 2):", combined2);

Before merging:
names1: [ 'Alice', 'Bob' ]
names2: [ 'Charlie', 'David' ]
names3: [ 'Eve', 'Frank' ]
Combined (method 1): [ 'Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank' ]
Combined (method 2): [ 'Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank' ]

Method 3: Using push() with Spread Operator

This method modifies an existing array by pushing elements from other arrays using the spread operator. It's useful when you want to add elements to an existing array.

// Define arrays
const numbers1 = [10, 20];
const numbers2 = [30, 40];
const numbers3 = [50, 60];

// Create target array
const result = [];

// Push all arrays using spread operator
result.push(...numbers1);
result.push(...numbers2);
result.push(...numbers3);

console.log("Combined using push method:", result);

// Alternative: Function approach
function combineArrays(...arrays) {
    const combined = [];
    for (let i = 0; i < arrays.length; i++) {
        combined.push(...arrays[i]);
    }
    return combined;
}

console.log("Using function:", combineArrays(numbers1, numbers2, numbers3));

Combined using push method: [ 10, 20, 30, 40, 50, 60 ]
Using function: [ 10, 20, 30, 40, 50, 60 ]

Comparison of Methods

Practical Example

// Real-world scenario: Combining user data from different sources
const adminUsers = ['admin1', 'admin2'];
const regularUsers = ['user1', 'user2', 'user3'];
const guestUsers = ['guest1'];

// Using spread operator for clean, readable code
const allUsers = [...adminUsers, ...regularUsers, ...guestUsers];

console.log("Total users:", allUsers.length);
console.log("All users:", allUsers);

// Using concat for functional programming style
const allUsersConcat = [].concat(adminUsers, regularUsers, guestUsers);
console.log("Users via concat:", allUsersConcat);

Total users: 6
All users: [ 'admin1', 'admin2', 'user1', 'user2', 'user3', 'guest1' ]
Users via concat: [ 'admin1', 'admin2', 'user1', 'user2', 'user3', 'guest1' ]

Conclusion

The spread operator is the most modern and readable approach for combining arrays in JavaScript. Use concat() for better browser compatibility, and push() with spread when you need to modify an existing array. Choose the method that best fits your specific use case and coding style.