Benchmark: Comparing array.concat.apply short form with empty array vs array.flat vs array.reduce

Script Preparation code:

var array1 = Array(400).fill().map(() => Math.round(Math.random() * 40));
var array2 = Array(400).fill().map(() => Math.round(Math.random() * 40));
var array3 = Array(400).fill().map(() => Math.round(Math.random() * 40));
var array4 = Array(400).fill().map(() => Math.round(Math.random() * 40));
var array5 = Array(400).fill().map(() => Math.round(Math.random() * 40));

var allArrays = [array1, array2, array3, array4, array5];

Tests:

array.apply
var others = [].concat.apply([], allArrays);
array.flat()
var others = allArrays.flat()
array.reduce
var others = allArrays.reduce(((combinedLength, label) => combinedLength + label.length), 0)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array.apply
array.flat()
array.reduce

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Mobile Safari 15 on iOS 15.4.1

View result in a separate tab

Test name	Executions per second
array.apply	201445.0 Ops/sec
array.flat()	25738.5 Ops/sec
array.reduce	10768165.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark and explain the different approaches.

**Overview**

The benchmark is designed to compare the performance of three array manipulation methods:

1. `Array.prototype.concat.apply()`
2. `Array.prototype.flat()`
3. `Array.prototype.reduce()`

These methods are used to combine or manipulate arrays, but they have different underlying algorithms and implementation details that can impact their performance.

**Array.prototype.concat.apply()**

`concat.apply()` is a legacy method that concatenates two or more arrays by creating a new array and copying the elements from each input array. The `apply()` method applies the `concat()` function to the input arrays, passing the context of the first argument as an additional argument.

In this benchmark, `Array.prototype.concat.apply()` is used with the `empty` array as the initial value, and then it concatenates all five arrays (`array1`, `array2`, etc.) using the spread operator (`[]`). The `apply()` method is used to call the `concat()` function on the first argument.

**Pros:**

* Easy to read and understand
* Supports multiple input arrays

**Cons:**

* Creates a new array for each concatenation, which can lead to performance issues with large datasets
* Uses an outdated implementation (it's been deprecated since ECMAScript 2015)

**Array.prototype.flat()**

`flat()` is a more modern method introduced in ECMAScript 2019. It returns a new array containing all subarrays of the input array.

In this benchmark, `Array.prototype.flat()` is used to flatten all five arrays (`array1`, `array2`, etc.) into a single array using the spread operator (`[]`).

**Pros:**

* More efficient than `concat.apply()`, as it avoids creating multiple intermediate arrays
* More modern and widely adopted implementation

**Cons:**

* May not support older browsers or environments that don't implement `flat()`
* Can be slower for very large datasets due to the need to allocate new memory for the resulting array

**Array.prototype.reduce()**

`reduce()` is a method that applies a function to each element of an array, accumulating a result.

In this benchmark, `Array.prototype.reduce()` is used to calculate the total length of all arrays (`array1`, `array2`, etc.) by summing up the lengths of individual elements using the spread operator (`[]`).

**Pros:**

* More efficient than `concat.apply()`, as it avoids creating multiple intermediate arrays
* Can be faster for very large datasets due to the accumulation of results

**Cons:**

* May not be as straightforward to read and understand, especially for those without prior experience with reduce()
* Requires a callback function to perform the aggregation operation

**Library usage**

There is no explicit library being used in this benchmark. However, the `Array.prototype` methods are part of the standard JavaScript API.

**Special JS features or syntax**

None mentioned explicitly, but it's worth noting that the benchmark uses modern ECMAScript features such as arrow functions (`() =>`) and template literals (`[]`). These features are widely supported by most modern browsers and environments.

**Alternatives**

Other alternatives for array manipulation could include:

* `Array.prototype.push()` followed by another loop to concatenate arrays
* Using a library like Lodash or Ramda for more advanced array operations
* Using a different data structure, such as a linked list or a binary search tree, for larger datasets

However, the benchmark is specifically designed to compare these three standard JavaScript methods, so other alternatives are not being considered.

Related benchmarks:

Comparing array.concat.apply short form with empty array vs array.flat vs array.reduce (version: 0)

Comparing performance of: array.apply vs array.flat() vs array.reduce

Created: 2 years ago by: Guest

Jump to the latest result

array.apply

array.flat()

array.reduce

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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