Benchmark: Array flatten implemenations

Script Preparation code:

var params = [[ 1, 2 ], [ "hello", true, 7 ]];
function getTotal(arr) {
  let total = 0;
  for (let i = 0; i < arr.length; i++) {
    total += arr[i].length; 
  }
  return total;
}

Tests:

reduce + Array.prototype.concat
return params.reduce((acc, val) => acc.concat(val), []);
Array.prototype.flat
return params.flat();
Manual copy by index #1
const result = new Array(getTotal(params)); for (let i = 0; i < params.length; i++) { for (let j = 0; j < params[i].length; j++) { result[params[i].length * i + j] = params[i][j]; } } return result;
Manual copy by index #2
const result = new Array(getTotal(params)); for (let i = 0, k = 0; i < params.length; i++) { const arr = params[i]; for (let j = 0; j < arr.length; j++) { result[k] = arr[j]; k++; } } return result;
Manual copy with push
const result = []; for (let i = 0; i < params.length; i++) { const arr = params[i]; for (let j = 0; j < arr.length; j++) { result.push(arr[j]); } } return result;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce + Array.prototype.concat
Array.prototype.flat
Manual copy by index #1
Manual copy by index #2
Manual copy with push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 97 on Windows

View result in a separate tab

Test name	Executions per second
reduce + Array.prototype.concat	4485108.0 Ops/sec
Array.prototype.flat	952008.3 Ops/sec
Manual copy by index #1	573335.7 Ops/sec
Manual copy by index #2	1586975.4 Ops/sec
Manual copy with push	2594123.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explore what's being tested, the different approaches, their pros and cons, and other considerations.

**Benchmark Overview**

The benchmark is designed to compare four different ways of flattening an array in JavaScript: using the `reduce()` method with `Array.prototype.concat()`, `Array.prototype.flat()`, manual copying by index (`#1` and `#2`) methods, and manual copying with `push()`.

**Test Case Breakdown**

Here's a brief summary of each test case:

1. **Reduce + Array.prototype.concat**: Uses the `reduce()` method to concatenate all elements in the array into a single array.
2. **Array.prototype.flat**: Utilizes the new ES6 spread operator (`flat()`) to flatten the array.
3. **Manual copy by index #1**: Manually copies each element from the inner arrays into a new array using indexing, but with separate loops for each array in the original input.
4. **Manual copy by index #2**: Similar to `#1`, but uses a single loop to iterate over all elements and their corresponding indices.
5. **Manual copy with push**: Uses a single loop to iterate over all elements and pushes them onto a new array.

**Approach Comparison**

Here's a comparison of the four approaches:

*   **Reduce + Array.prototype.concat**: This approach is straightforward but can be less efficient than other methods, especially for large arrays.
*   **Array.prototype.flat**: The new ES6 spread operator provides a concise and readable way to flatten arrays. However, its performance may vary depending on the browser implementation and array size.
*   **Manual copy by index #1 & #2**: These approaches are more efficient than using `reduce()` or `flat()`, but require manual looping over all elements and their indices. This can lead to a higher chance of errors if not implemented correctly.
*   **Manual copy with push**: This approach is similar to `#2`, but uses the `push()` method, which can be less efficient for large arrays.

**Pros and Cons**

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

*   **Reduce + Array.prototype.concat**:
    *   Pros: Easy to implement and understand.
    *   Cons: Can be slower than other methods.
*   **Array.prototype.flat**:
    *   Pros: Concise and readable syntax. (Note: This method may not perform consistently across browsers.)
    *   Cons: Performance can vary depending on the browser implementation and array size.
*   **Manual copy by index #1 & #2**:
    *   Pros: Generally faster than other methods, with less chance of errors due to manual looping.
    *   Cons: Requires more developer effort to implement correctly.
*   **Manual copy with push**:
    *   Pros: Similar performance to `#2`, but uses the `push()` method instead.

**Other Considerations**

When choosing a flattening approach, consider factors such as:

*   Array size and complexity
*   Performance requirements
*   Code readability and maintainability
*   Browser support (for methods like `flat()`)

**Alternatives**

If you don't want to use the ES6 spread operator or manual copying approaches, you can also explore other flattening techniques, such as:

*   Using a library like Lodash's `flattenDeep()` function.
*   Recursively iterating over nested arrays and concatenating them into a single array.

Keep in mind that each approach has its trade-offs, and the best choice depends on your specific use case and performance requirements.

Related benchmarks:

Array flatten implemenations (version: 0)

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

Comparing performance of: reduce + Array.prototype.concat vs Array.prototype.flat vs Manual copy by index #1 vs Manual copy by index #2 vs Manual copy with push

Created: 3 years ago by: Guest

Jump to the latest result

reduce + Array.prototype.concat

Array.prototype.flat

Manual copy by index #1

Manual copy by index #2

Manual copy with push

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