Benchmark: lodash flatten vs array.flat231

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Tests:

spread
const arrayA = ['hi', 'hi', 'hi', 'hi']; const arrayB = ['hi', 'hi', 'hi', 'hi']; const flattened = [ arrayA, arrayB ].flat(); console.log(flattened);
lodash flatten
const arrayA = ['hi', 'hi', 'hi', 'hi']; const arrayB = ['hi', 'hi', 'hi', 'hi']; const flattened = _.flatten([ arrayA, arrayB ]); console.log(flattened);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
lodash flatten

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/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
spread	213873.7 Ops/sec
lodash flatten	220806.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmarking setup and explain what's being tested, compared, and their pros and cons.

**What is being tested?**

MeasureThat.net is testing two approaches to flattening arrays:

1. **Spread Operator (`...`)**: This method uses the spread operator to create a new array from the elements of another array.
2. **Lodash `flatten()` function**: This method uses Lodash, a popular utility library for JavaScript, to flatten an array.

**Options compared**

The benchmark is comparing the execution speed of these two approaches on a specific test case:

* The input arrays are identical: `[ ['hi', 'hi', 'hi', 'hi'], ['hi', 'hi', 'hi', 'hi'] ]`.
* The output expected is an array with all elements from both input arrays.

**Pros and Cons**

1. **Spread Operator (`...`)**:
	* Pros:
		+ Simple and concise syntax.
		+ Fast execution, as it avoids the overhead of a function call.
		+ Works well with modern JavaScript engines.
	* Cons:
		+ Only supported in ES6+ browsers and Node.js versions.
		+ Can be slower on older browsers or versions due to the new syntax.
2. **Lodash `flatten()` function**:
	* Pros:
		+ Wide support across older browsers and versions.
		+ Often used in production environments, so benchmark results are more relevant.
		+ Well-optimized by Lodash authors for performance.
	* Cons:
		+ Requires including an additional library (Lodash) in the project.
		+ May have a slight performance overhead due to function call.

**Library: Lodash**

Lodash is a popular utility library for JavaScript that provides a wide range of functions for tasks like array manipulation, string manipulation, and more. The `flatten()` function is part of this library and is used in the benchmark to compare with the spread operator.

**Special JS feature or syntax**

There are no special features or syntax used in this benchmark, making it accessible to a wide range of software engineers.

**Other alternatives**

If you need alternative approaches to flattening arrays, consider:

1. Using `Array.prototype.concat()` and `Array.prototype.slice()`: This approach involves concatenating the input arrays and then slicing off the first element of each array to create a new flattened array.
2. Using `Array.prototype.reduce()`: This approach involves using the `reduce()` method to iterate over the input arrays and concatenate their elements into a single array.

Example code for these alternatives:

```javascript
// concat() and slice()
const flattened = [arrayA, arrayB].concat().slice(0, arrayA.length + arrayB.length);

// reduce()
const flattened = arrayA.reduce((acc, current) => acc.concat(current), []);
```

These alternatives may have varying performance characteristics compared to the spread operator and Lodash `flatten()` function.

Related benchmarks:

lodash flatten vs array.flat231 (version: 0)

lodash flatten vs spread

Comparing performance of: spread vs lodash flatten

Created: one year ago by: Guest

Jump to the latest result

spread

lodash flatten

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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