Benchmark: flat vs concat (simplest) vs spread with object

Script Preparation code:

var arr = [{
  "id": 1,
  "email": "rhakonsen0@disqus.com",
  "comment": "benchmark strategic e-services",
  "avatar": "https://robohash.org/teneturetsed.png?size=50x50&set=set1",
  "comment_date": "12/3/2022"
}, {
  "id": 2,
  "email": "emcilwain1@blogtalkradio.com",
  "comment": "revolutionize out-of-the-box niches",
  "avatar": "https://robohash.org/omniseiusnumquam.png?size=50x50&set=set1",
  "comment_date": "12/10/2022"
}, {
  "id": 3,
  "email": "rmowday2@desdev.cn",
  "comment": "incentivize real-time schemas",
  "avatar": "https://robohash.org/doloremtemporaut.png?size=50x50&set=set1",
  "comment_date": "5/21/2022"
}, {
  "id": 4,
  "email": "deassom3@loc.gov",
  "comment": "whiteboard wireless relationships",
  "avatar": "https://robohash.org/auteumconsectetur.png?size=50x50&set=set1",
  "comment_date": "7/10/2022"
}, {
  "id": 5,
  "email": "jcaruth4@edublogs.org",
  "comment": "exploit synergistic content",
  "avatar": "https://robohash.org/quimolestiaeet.png?size=50x50&set=set1",
  "comment_date": "12/1/2022"
}, {
  "id": 6,
  "email": "gcrippin5@fastcompany.com",
  "comment": "deploy bleeding-edge architectures",
  "avatar": "https://robohash.org/consequaturnisimolestiae.png?size=50x50&set=set1",
  "comment_date": "1/25/2023"
}, {
  "id": 7,
  "email": "sivanichev6@qq.com",
  "comment": "reintermediate magnetic interfaces",
  "avatar": "https://robohash.org/vitaequised.png?size=50x50&set=set1",
  "comment_date": "4/18/2022"
}, {
  "id": 8,
  "email": "drentalll7@dion.ne.jp",
  "comment": "benchmark intuitive e-commerce",
  "avatar": "https://robohash.org/utcorporismollitia.png?size=50x50&set=set1",
  "comment_date": "11/23/2022"
}, {
  "id": 9,
  "email": "sondrasek8@stumbleupon.com",
  "comment": "enable B2B interfaces",
  "avatar": "https://robohash.org/remmolestiaemolestias.png?size=50x50&set=set1",
  "comment_date": "5/28/2022"
}, {
  "id": 10,
  "email": "ibisco9@github.com",
  "comment": "empower cross-platform experiences",
  "avatar": "https://robohash.org/animinihilut.png?size=50x50&set=set1",
  "comment_date": "7/19/2022"
}]

var test = []
for (let i = 0; i < 1000; i++) {
  test.push(arr)
}

Tests:

flatMap
var flatten = test.flatMap((x) => x)
concat
var catten = []; var size = test.length for (let k = 0; k < size; k++) { catten = catten.concat(test[k]) }
spread
var catten = []; var size = test.length for (let k = 0; k < size; k++) { catten = [...catten, ...test[k]] }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
concat
spread

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

The provided benchmark measures the performance of three different approaches for flattening an array of arrays in JavaScript: using `flatMap`, `concat`, and spread operators.

**What is being tested?**

* The benchmark tests how efficiently each approach can flatten an array of 10 arrays, where each inner array has 1-2 elements.
* The input data consists of a large array of objects with properties like "id", "email", "comment", etc.

**Options compared:**

1. **`flatMap()`**: This method returns a new array with the results of applying a provided function on every element in this array, whereas `forEach()` would return undefined.
2. **`concat()`**: This method concatenates two or more arrays and returns a new array containing all elements from the concatenated arrays.
3. **Spread operator (`...`)**: This operator is used to create a new array by spreading out the elements of an existing array.

**Pros and Cons of each approach:**

* `flatMap()`: Pros:
	+ Efficient use of memory, as it doesn't create intermediate arrays.
	+ Fast performance due to its optimized implementation in modern browsers.
	Cons:
	+ May not be supported in older browsers or environments.
* `concat()`: Pros:
	+ Widely supported across browsers and environments.
	+ Easy to implement.
Cons:
	+ Creates an intermediate array, which can lead to increased memory usage.
	+ Slow performance compared to `flatMap()`.
* Spread operator (`...`): Pros:
	+ Fast performance due to its optimized implementation in modern browsers.
	+ Memory-efficient, as it doesn't create intermediate arrays.
Cons:
	+ May not be supported in older browsers or environments.
	+ Less intuitive than other approaches.

**Library and special JS feature used:**

* The benchmark uses the `flatMap()` method, which is a built-in JavaScript method introduced in ECMAScript 2019 (ES10).
* No libraries are required for this benchmark.

**Latest benchmark result:**

The latest benchmark results show that:

1. `flatMap()` performs the best with an average of 1614 executions per second across different devices and browsers.
2. `concat()` is slower than both `flatMap()` and spread operator, with an average of 787 executions per second.
3. The spread operator (`...`) is slightly faster than `concat()`, with an average of 271 executions per second.

Overall, the results suggest that using `flatMap()` is the most efficient approach for flattening arrays in JavaScript, followed closely by the spread operator.

Related benchmarks:

flat vs concat (simplest) vs spread with object (version: 0)

Have fun :)

Comparing performance of: flatMap vs concat vs spread

Created: 3 years ago by: Guest

Jump to the latest result

flatMap

concat

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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