Benchmark: Array concat vs spread operator vs push large

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Script Preparation code:

var arr1 = [];
var arr2 = [];

for (let i = 0; i < 200000; i += 1) {
    arr1.push(i);
}
for (let i = 0; i < 5000; i += 1) {
    arr2.push(-1 * i);
}

Tests:

Array.prototype.concat
var other = arr1.concat(arr2);
spread operator
var other = [...arr1, ...arr2]
Push
var other = []; other.push(...arr1); other.push(...arr2);
loop with singular push
var other = []; for (let i = 0; i < arr1.length; i += 1) { other.push(arr1[i]); } for (let i = 0; i < arr2.length; i += 1) { other.push(arr2[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
loop with singular push

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark is designed to compare three different approaches for concatenating arrays in JavaScript:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. Pushing elements individually using a loop.

**Options Compared**

The test cases are comparing the performance of these three approaches:

* **`Array.prototype.concat()`**: This method creates a new array and copies all elements from the original arrays into it.
* **Spread Operator (`...`)**: This operator creates a new array by spreading elements from one or more source arrays.
* **Push with Loop**: This approach uses a loop to push individual elements onto a new array.

**Pros and Cons of Each Approach**

* **`Array.prototype.concat()`**:
	+ Pros: Simple, efficient, and widely supported.
	+ Cons: Creates a new array, which can lead to memory allocation issues for large arrays.
* **Spread Operator (`...`)**:
	+ Pros: Elegant, concise, and modern.
	+ Cons: Requires ES6 support, may be slower than `concat()` due to overhead of spreading elements.
* **Push with Loop**:
	+ Pros: Highly customizable, can handle arbitrary number of arrays.
	+ Cons: Error-prone, verbose, and slow due to loop overhead.

**Library Used**

The benchmark uses jQuery as a dependency for testing. This is likely used to provide a consistent DOM environment across different browsers.

**Special JS Feature/Syntax**

None mentioned explicitly in the provided information.

**Other Alternatives**

If you need further optimization or have specific use cases, consider these alternatives:

* **`Array.prototype.reduce()`**: Instead of concatenating arrays, use `reduce()` to create a new array with accumulated elements.
* **`Array.prototype.push.apply()`**: For pushing multiple elements onto an array using a single function call.

**Additional Considerations**

When choosing an approach for concatenating arrays in JavaScript:

* Consider the size and complexity of the arrays involved.
* Think about memory allocation and potential issues with large arrays.
* Choose a method that balances performance, readability, and maintainability.
* Take into account specific use cases, such as handling null or undefined values.

Remember, this benchmark is designed to provide a general idea of performance differences between these approaches. Depending on your specific requirements, you may need to experiment further to find the optimal solution for your application.

Related benchmarks:

Array concat vs spread operator vs push large (version: 0)

Compare the new ES6 spread operator with the traditional concat() method and push

Comparing performance of: Array.prototype.concat vs spread operator vs Push vs loop with singular push

Created: 2 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

loop with singular push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):