Benchmark: FlatMap vs concatenation

Script Preparation code:

var arr = Array(10_000).fill({ items: ['item1', 'item2', 'item3']});

Tests:

flatMap
const arr_1 = arr.flatMap(x => x.items);
concatenation
const arr_2 = []; arr.forEach(el => { arr_2.push(...el.items) })
concatenation with for of loop
const arr_3 = []; for (let el of arr) { arr_3.push(...el.items) }
concatenation with for loop
const arr_4 = []; const n = arr.length; for (var i = 0; i < n; i++) { arr_4.push(...arr[i].items) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
concatenation
concatenation with for of loop
concatenation with for loop

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

Browser/OS: Chrome 112 on Windows

View result in a separate tab

Test name	Executions per second
flatMap	90.4 Ops/sec
concatenation	1801.7 Ops/sec
concatenation with for of loop	2153.9 Ops/sec
concatenation with for loop	531.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is being tested.

**Benchmark Definition**
The benchmark definition specifies a test case to compare different approaches for concatenating arrays in JavaScript.

**Script Preparation Code**
The script preparation code generates an array `arr` with 10,000 elements, each containing three items: 'item1', 'item2', and 'item3'. This large dataset is used to measure the performance of the different concatenation methods.

**Html Preparation Code**
There is no HTML preparation code provided, which means that only JavaScript performance is being measured.

**Individual Test Cases**
The benchmark consists of four test cases:

1. **flatMap**: Uses the `flatMap()` method to concatenate the arrays.
2. **concatenation**: Uses a loop with `forEach()` to push the items from each element's array into a new array.
3. **concatenation with for of loop**: Similar to the previous test case, but uses a `for...of` loop instead of `forEach()`.
4. **concatenation with traditional for loop**: Uses a traditional `for` loop to iterate over the elements and push their items into a new array.

**Comparison**
The benchmark compares the performance of these four different approaches:

* `flatMap()`: A modern, concise way of concatenating arrays using the spread operator.
* `forEach()` with `push()`: An older, more verbose approach that uses a loop to concatenate arrays.
* `for...of` loop: A newer, more efficient way of iterating over arrays.
* Traditional `for` loop: An even older approach that requires manual indexing.

**Pros and Cons**

* **flatMap()**: Pros:
	+ Concise and readable code
	+ Efficient, as it avoids the overhead of creating a new array
Cons:
	+ Not supported in older browsers or environments
* **forEach()` with `push()`: Pros:
	+ Wide browser support
	+ Simple to understand for beginners
Cons:
	+ Less efficient than modern approaches
	+ Requires manual indexing, which can lead to errors
* **for...of` loop**: Pros:
	+ Efficient and concise
	+ Easy to read and write
Cons:
	+ Not as widely supported as `forEach()` with `push()`
* Traditional `for` loop: Pros:
	+ Wide browser support
	+ Simple to understand for beginners
Cons:
	+ Inefficient and verbose

**Library Usage**
There is no library usage in these test cases.

**Special JavaScript Features/Syntax**
None of the provided test cases use any special or advanced JavaScript features. They are all standard, everyday syntax.

**Alternatives**

Other alternatives for concatenating arrays include:

* Using `Array.prototype.concat()` with multiple arguments
* Using `Array.prototype.reduce()` to concatenate arrays
* Using a library like Lodash's `flatten` function

However, these approaches may not be as efficient or concise as the methods tested in this benchmark.

Related benchmarks:

FlatMap vs concatenation (version: 0)

Comparing performance of: flatMap vs concatenation vs concatenation with for of loop vs concatenation with for loop

Created: one year ago by: Guest

Jump to the latest result

flatMap

concatenation

concatenation with for of loop

concatenation with for loop

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