Benchmark: Flatten array .flat() vs destructuring

HTML Preparation code:

<script>
const array = [[1,2,3,4,5,6],[7,8,9,10,11,12],[13,14,15,16,17,18]]  
</script>

Tests:

flatten with `flat` array method
array.flat()
Flatten with destructuring
const newArray = [...array[0], ...array[1], ...array[2]]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatten with `flat` array method
Flatten with destructuring

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
flatten with `flat` array method	2347859.8 Ops/sec
Flatten with destructuring	2890911.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing two approaches to flatten an array:

1. Using the `flat()` method
2. Destructuring using the spread operator (`...`)

**Options Compared**

* `array.flat()`: This method returns a new, shallow copy of the flattened array.
* Destructuring using `const newArray = [...array[0], ...array[1], ...array[2]]`: This approach creates a new array by spreading the elements of each inner array into a single array.

**Pros and Cons**

* **`flat()` method**:
	+ Pros: efficient, straightforward, and widely supported.
	+ Cons: creates a new array, which can be memory-intensive for large arrays.
* Destructuring using spread operator:
	+ Pros: concise, readable, and efficient (since it doesn't create a new array).
	+ Cons: might be less intuitive for those not familiar with destructuring.

**Library/Dependency**

There is no library or dependency explicitly mentioned in the benchmark definition. Both approaches rely on standard JavaScript features.

**Special JS Feature/Syntax**

None of the approaches require any special JavaScript features or syntax beyond what's available in modern JavaScript implementations.

**Other Alternatives**

If you wanted to flatten an array, other approaches might include:

* Using `reduce()` method: `const newArray = array.reduce((acc, curr) => [...acc, ...curr], [])`
* Using `forEach()` loop and concatenation: `const newArray = []; array.forEach(curr => newArray = [...newArray, ...curr])`

However, these alternatives are less efficient than the `flat()` method and destructuring using spread operator.

**Benchmark Preparation Code**

The provided HTML preparation code creates a sample array with three inner arrays:

```javascript
const array = [[1,2,3,4,5,6],[7,8,9,10,11,12],[13,14,15,16,17,18]]
```

The benchmark script then uses this array to test the two approaches.

**Latest Benchmark Result**

The latest result shows that:

* Destructuring using spread operator outperforms `flat()` method in terms of executions per second (2578161.5 vs 316773.9375).

Related benchmarks:

Flatten array .flat() vs destructuring (version: 0)

Comparing performance of: flatten with `flat` array method vs Flatten with destructuring

Created: 4 years ago by: Registered User

Jump to the latest result

flatten with `flat` array method

Flatten with destructuring

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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