Benchmark: Array concat vs spread vs push spread, loop, apply Huge arrays

Script Preparation code:

var subarrs = [
 new Array(10000).fill(0).map(() => Math.random()),
 new Array(10000).fill(0).map(() => Math.random() || 0),
 new Array(10000).fill(0).map(() => String(Math.random())),
];

Tests:

Array.prototype.concat
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other = other.concat(subarrs[i]); } return other;
spread operator
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other = [ ...other, ...subarrs[i] ] } return other;
Push Spread
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other.push(...subarrs[i]); } return other;
Push Apply
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other.push.apply(other, subarrs[i]); } return other;
Push Loop
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ for (var jarr = subarrs[i], jen = jarr.length, j = 0; j < jen; j++){ other.push(jarr[j]); } } return other;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push Spread
Push Apply
Push Loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 16 on iOS 16.6

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	3618.3 Ops/sec
spread operator	6559.6 Ops/sec
Push Spread	4477.4 Ops/sec
Push Apply	7933.8 Ops/sec
Push Loop	9415.1 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark is designed to compare the performance of different approaches for concatenating arrays in JavaScript:

1. `Array.prototype.concat`
2. Spread operator (`...`)
3. Push spread (using the spread operator with `push` method)
4. Apply push (using the `apply` method with `push` method)

**Options Compared**

The benchmark compares the performance of these four options on large arrays created using a script preparation code that generates 4 different types of arrays:

* Arrays filled with random numbers (`Math.random()`)
* Arrays filled with random numbers and zeros (`Math.random() || 0`)
* Strings generated by converting random numbers to strings (`String(Math.random())`)

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Array.prototype.concat**: This is the traditional way of concatenating arrays in JavaScript. It creates a new array object, copies elements from both arrays into it, and returns the new array.
	* Pros: Simple, widely supported, and easy to understand.
	* Cons: Creates a new array, which can be memory-intensive for large datasets.
2. **Spread operator (`...`)**: This is a newer way of concatenating arrays in JavaScript, introduced in ES6. It creates a shallow copy of the original array and uses it as the starting point for concatenation.
	* Pros: More efficient than `concat` method, as it avoids creating a new array object.
	* Cons: May not work as expected with nested arrays or objects.
3. **Push spread**: This approach uses the spread operator to concatenate arrays, but also uses the `push` method to add elements to the resulting array.
	* Pros: Similar efficiency benefits as the spread operator, and avoids creating a new array object.
	* Cons: May be less readable than other approaches.
4. **Apply push**: This approach uses the `apply` method to call `push` on an existing array, passing the target array and the elements to add as arguments.
	* Pros: More concise than other approaches, but may be less efficient.

**Library and Special JS Features**

There are no libraries used in this benchmark. However, it does utilize some special JavaScript features:

* Spread operator (`...`)
* Push spread
* Apply method

**Other Alternatives**

If you're interested in exploring alternative approaches for concatenating arrays, here are a few more options:

1. **Using `Array.prototype.reduce`**: Instead of using a loop or the spread operator, you can use the `reduce` method to concatenate arrays.
2. **Using `Array.prototype.slice` and `concat`**: You can create a new array by slicing an existing array and then concatenating it with another array using the `concat` method.

Keep in mind that these alternatives may have different performance characteristics or trade-offs, depending on your specific use case.

**Benchmark Results**

The benchmark results show the execution speed of each approach on the Mobile Safari 16 browser running on iOS 16.6. The fastest approach is `Push Loop`, followed closely by `Push Apply`.

Related benchmarks:

Array concat vs spread vs push spread, loop, apply Huge arrays (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 Spread vs Push Apply vs Push Loop

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push Spread

Push Apply

Push Loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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