JavaScript: Combine Arrays Without Creating Nested Arrays

JavaScript doesn’t have a built-in pushValues() method that would directly solve your problem, but there are several efficient ways to concatenate multiple arrays into a new array without nesting. Here are the most effective approaches:

Contents

• Using concat() Method
• Using Spread Operator (…)
• Using Array.from()
• Using push.apply()
• Using Array.prototype.concat.apply()
• Performance Considerations
• Browser Compatibility

Using concat() Method

The most straightforward approach is to use the built-in concat() method, which creates a new array by combining multiple arrays:

const dataArray1 = [1, 2, 3];
const dataArray2 = ['a', 'b', 'c'];
const dataArray3 = [true, false];

const newArray = dataArray1.concat(dataArray2, dataArray3);
// Result: [1, 2, 3, 'a', 'b', 'c', true, false]

The concat method takes multiple arguments and concatenates them in order. The concat method does not recurse into nested array arguments, which is exactly what you need.

For your use case with an existing array:

const newArray = [];
dataArray1.concat(dataArray2, dataArray3).forEach(item => newArray.push(item));
// Or more efficiently:
newArray.push(...dataArray1, ...dataArray2, ...dataArray3);

Using Spread Operator (…)

The modern ES6 spread operator provides a concise way to spread array elements:

const dataArray1 = [1, 2, 3];
const dataArray2 = ['a', 'b', 'c'];
const dataArray3 = [true, false];

const newArray = [...dataArray1, ...dataArray2, ...dataArray3];
// Result: [1, 2, 3, 'a', 'b', 'c', true, false]

This approach works perfectly for your second example:

const newArray = new Array(...dataArray1, ...dataArray2, ...dataArray3);

The spread operator is particularly effective for combining multiple arrays into one without nesting.

Using Array.from()

You can use Array.from() with a mapping function to concatenate arrays:

const dataArray1 = [1, 2, 3];
const dataArray2 = ['a', 'b', 'c'];
const dataArray3 = [true, false];

const newArray = Array.from([dataArray1, dataArray2, dataArray3], arr => arr);
// Result: [1, 2, 3, 'a', 'b', 'c', true, false]

This approach is efficiently used to combine multiple arrays into a single array by spreading them within Array.from.

Using push.apply()

For in-place modification of an array, you can use push.apply():

const newArray = [];
const dataArray1 = [1, 2, 3];
const dataArray2 = ['a', 'b', 'c'];
const dataArray3 = [true, false];

newArray.push.apply(newArray, dataArray1);
newArray.push.apply(newArray, dataArray2);
newArray.push.apply(newArray, dataArray3);
// Result: [1, 2, 3, 'a', 'b', 'c', true, false]

This approach is useful when you don’t want to create a new array and is a mutable way of merging.

Using Array.prototype.concat.apply()

When you have an array of arrays, you can use concat.apply():

const arrays = [
  [1, 2, 3],
  ['a', 'b', 'c'],
  [true, false]
];

const newArray = Array.prototype.concat.apply([], arrays);
// Result: [1, 2, 3, 'a', 'b', 'c', true, false]

This approach is particularly useful when working with dynamic arrays of arrays.

Performance Considerations

Different approaches have different performance characteristics:

• concat(): O(N) time complexity, creates new array
• Spread operator: O(N) time complexity, creates new array
• push.apply(): O(N) time complexity, modifies existing array
• Array.from(): O(N) time complexity, creates new array

According to research findings, for large arrays (100,000+ elements), using apply() or the spread operator can sometimes fail due to stack limits.

Browser Compatibility

• concat(): Available in all browsers
• Spread operator (…): Requires ES6 support (most modern browsers)
• Array.from(): Requires ES6 support
• push.apply(): Available in all browsers

If you need older browser support, concat() is the most reliable choice. For modern JavaScript environments, the spread operator provides the most readable syntax.

Sources

1. Array.prototype.concat() - JavaScript | MDN
2. Merge Arrays in JavaScript: With and Without Duplicates | Envato Tuts+
3. What is the most efficient way to concatenate N arrays? - Stack Overflow
4. Using es6 spread to concat multiple arrays - Stack Overflow
5. 2 Ways to Merge Arrays in JavaScript | SamanthaMing.com
6. Combine Multiple Arrays Using Spread | SamanthaMing.com
7. What is the most efficient way to concatenate N arrays in JavaScript? | GeeksforGeeks

Conclusion

To copy items from multiple JavaScript arrays into a new array without nesting, you have several excellent options:

1. Use concat() method - Most compatible and readable: const newArray = arr1.concat(arr2, arr3);
2. Use spread operator - Modern and concise: const newArray = [...arr1, ...arr2, ...arr3];
3. Use push.apply() - For in-place modification: newArray.push.apply(newArray, arr);

The spread operator provides the syntax closest to your desired pushValues() functionality, while concat() offers the best browser compatibility. For most modern JavaScript development, the spread operator is the preferred method due to its readability and conciseness.