Benchmark: Array concat vs spread operator vs push for array flat implementation

Script Preparation code:

var isArray = Array.isArray;
var sourceArray = [1, [1, 2, [3, 4, [5, 6]]], 2, [3, 4, [1, 2, [3, [1, 2, [3, 4]], 4]], [5, 6, [1, 2, [3, 4, [5, 6]]], [7, 8, [9, 10]]]]];

function flatPush(arr, depth) {
  if (depth === undefined) { depth = 100; } else if (depth <= 0) { return arr; }
  var result = [];
  for (var len = arr.length, i = 0, val; i < len; ++i) {
    if (isArray((val = arr[i]))) {
      val = flatPush(val, depth - 1);
      for (var jen = val.length, j = 0; j < jen; ++j) { result.push(val[j]); }
    } else {
      result.push(val);
    }
  }
  return result;
}
function flatConcat(arr, depth) {
  if (depth === undefined) { depth = 100; } else if (depth <= 0) { return arr; }
  var result = [];
  for (var len = arr.length, i = 0, val; i < len; ++i) {
    if (isArray((val = arr[i]))) {
      result = result.concat(flatConcat(val, depth - 1));
    } else {
      result.push(val);
    }
  }
  return result;
}
function flatSpread(arr, depth) {
  if (depth === undefined) { depth = 100; } else if (depth <= 0) { return arr; }
  var result = [];
  for (var len = arr.length, i = 0, val; i < len; ++i) {
    if (isArray((val = arr[i]))) {
      result.push(...flatSpread(val, depth - 1));
    } else {
      result.push(val);
    }
  }
  return result;
}

Tests:

native flat
return sourceArray.flat(100);
flatPush
return flatPush(sourceArray);
flatConcat
return flatConcat(sourceArray);
flatSpread
return flatSpread(sourceArray);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
native flat
flatPush
flatConcat
flatSpread

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and its test cases to explain what's being tested, compared, and the pros/cons of each approach.

**Benchmark Definition**
The benchmark compares three approaches for implementing array flattening in JavaScript:

1. `Array.prototype.flat()` (native implementation)
2. `flatPush` function
3. `flatConcat` function
4. `flatSpread` function

**Test Case Descriptions**

### 1. Native flat

This test case uses the native `Array.prototype.flat()` method, which is a built-in JavaScript function introduced in ES6.

*   The `flat()` method flattens an array and returns a new array with no prototypes.
*   It takes an optional argument `depth` to specify the maximum number of times the array can be recursively flattened.

**Pros:**

*   Built-in implementation, so it's likely to be optimized for performance.
*   Easy to use and understand.

**Cons:**

*   Limited control over the flattening process (i.e., depth).

### 2. flatPush

This test case uses a custom `flatPush` function that recursively flattens an array.

```javascript
function flatPush(arr, depth) {
    if (depth === undefined) { depth = 100; }
    else if (depth <= 0) { return arr; }

return result;
}
```

*   Allows control over the flattening process through the `depth` parameter.
*   Requires more code and maintenance compared to native `flat()`.

**Pros:**

*   More flexible and customizable than native flat.
*   Can be useful in scenarios where the built-in `flat()` method is insufficient.

**Cons:**

*   Additional code complexity and potential maintenance overhead.
*   May have performance implications due to recursive calls.

### 3. flatConcat

This test case uses a custom `flatConcat` function that recursively flattens an array using the `concat` method.

```javascript
function flatConcat(arr, depth) {
    if (depth === undefined) { depth = 100; }
    else if (depth <= 0) { return arr; }

return result;
}
```

*   Similar to `flatPush`, but uses the `concat` method instead of array spread.
*   May have performance implications due to repeated calls to `concat`.

**Pros:**

*   More readable and easier to understand than `flatPush`.
*   Still allows control over the flattening process through the `depth` parameter.

**Cons:**

*   Similar performance concerns as `flatPush`.
*   More code complexity compared to native `flat()`.

### 4. flatSpread

This test case uses a custom `flatSpread` function that recursively flattens an array using the spread operator (`...`).

```javascript
function flatSpread(arr, depth) {
    if (depth === undefined) { depth = 100; }
    else if (depth <= 0) { return arr; }

return result;
}
```

*   Similar to `flatPush`, but uses the spread operator instead of array concatenation.
*   May have performance implications due to repeated calls to the spread operator.

**Pros:**

*   More concise and easier to read than `flatPush`.
*   Still allows control over the flattening process through the `depth` parameter.

**Cons:**

*   Similar performance concerns as `flatPush`.
*   More code complexity compared to native `flat()`.

**Comparison Summary**

| Approach | Pros | Cons |
| --- | --- | --- |
| Native flat | Built-in, easy to use | Limited control over flattening process |
| flatPush | Flexible and customizable | Additional code complexity, performance concerns |
| flatConcat | More readable than flatPush | Similar performance concerns as flatPush |
| flatSpread | Concise and easier to read than flatPush | Similar performance concerns as flatPush |

Ultimately, the choice of approach depends on your specific use case requirements and performance considerations.

**Example Use Case**

For example, if you need to flatten an array with a large number of nested arrays, using the native `flat()` method might be a good choice. However, if you want more control over the flattening process or need to handle edge cases where the built-in `flat()` method is insufficient, one of the custom approaches (e.g., `flatPush`, `flatConcat`, or `flatSpread`) might be more suitable.

Keep in mind that the performance characteristics and complexity of each approach can vary depending on your specific use case.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36

Browser/OS: Chrome 102 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
native flat	405369.7 Ops/sec
flatPush	196251.7 Ops/sec
flatConcat	216556.4 Ops/sec
flatSpread	259593.6 Ops/sec

Related benchmarks:

Array concat vs spread operator vs push for array flat implementation (version: 0)

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

Comparing performance of: native flat vs flatPush vs flatConcat vs flatSpread

Created: 4 years ago by: Registered User

Jump to the latest result

native flat

flatPush

flatConcat

flatSpread

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