Benchmark: Flatten Array of Arrays

Script Preparation code:

var arr = (new Array(50)).map(() =>{
  let len = Math.floor(Math.random() * 1000) + 1;
  return (new Array(len)).map((v,i) => {return i});
});

Tests:

concat apply
[].concat.apply([], arr);
ES6 spread
[].concat(...arr);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat apply
ES6 spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

Browser/OS: Chrome 91 on Windows

View result in a separate tab

Test name	Executions per second
concat apply	748861.1 Ops/sec
ES6 spread	762296.8 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain what's being tested in the provided benchmark.

The benchmark is testing two different ways of flattening an array of arrays: using the `concat.apply()` method and the spread operator (`...`) with ES6 syntax.

**Test 1: concat apply**

This test uses the `concat.apply()` method, which was introduced in JavaScript to concatenate arrays. The idea behind this method is to pass an array as a first argument to the `concat()` function, followed by an initial value (which can be any array), and then iterate over each element of the initial array, concatenating it with the current result.

The benchmark creates an array of 50 elements, where each inner array has a length between 1 and 1000. It then uses `concat.apply()` to flatten this array of arrays into a single array.

**Pros and Cons:**

Pros:

* Wide support across browsers, as it's a built-in method.
* Can be used with older browsers that don't support ES6 syntax.

Cons:

* Can lead to poor performance due to the overhead of function calls and array concatenation.
* Limited control over the flattening process.

**Test 2: ES6 spread**

This test uses the spread operator (`...`) with ES6 syntax, which was introduced in ECMAScript 2015. The idea behind this syntax is to unpack an array into a new array, creating a shallow copy of its elements.

In this benchmark, the same array of arrays is created as in the previous test, but instead of using `concat.apply()`, it uses the spread operator to flatten the inner arrays into a single array.

**Pros and Cons:**

Pros:

* Efficient and concise syntax.
* Native support in modern browsers, ensuring good performance.

Cons:

* Limited support across older browsers (pre-ES6), which might not execute this benchmark correctly.

**Library/External dependencies:**

None of the tests rely on external libraries or dependencies. The only "dependency" is the JavaScript engine being used by each browser.

**Special JS features/syntax:**

Both tests use ES6 syntax, specifically the spread operator (`...`) in Test 2. This syntax is specific to modern browsers that support ES6 and later standards.

Other alternatives for flattening arrays of arrays include:

* `Array.prototype.flat()`: Introduced in ECMAScript 2019, this method provides a more efficient way of flattening arrays than `concat.apply()` or the spread operator.
* Manual iteration using `for` loops: While not as concise or performant as the other methods, manual iteration can still be an option for older browsers or systems with limited resources.

Keep in mind that the choice of flattening method often depends on the specific requirements and constraints of your project. For most modern web applications, ES6 spread (`...`) would be a good default choice due to its efficiency and conciseness.

Related benchmarks:

Flatten Array of Arrays (version: 0)

Comparing performance of: concat apply vs ES6 spread

Created: 3 years ago by: Guest

Jump to the latest result

concat apply

ES6 spread

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):