Benchmark: flatMap vs reduce with spread vs reduce with push vs for of vs push v2 ...

Script Preparation code:

var arr = Array(10_000).fill(0)

Tests:

reduce with spread
arr.reduce((acc, x) => [...acc, x], [])
flatMap
arr.flatMap(x => [x])
reduce with push
arr.reduce((acc, x) => { acc.push(x); return acc; }, [])
for...of
const acc = [] for (const x of arr) { acc.push(x); }
push(...arr)
const acc = [] acc.push(...arr);
copy via spread
const acc = [...arr];
copy via slice
const acc = arr.slice();
for i
const acc = [] const n = arr.length; for (let i = 0; i<n; i++) { acc[i] = arr[i]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce with spread
flatMap
reduce with push
for...of
push(...arr)
copy via spread
copy via slice
for i

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

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

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce with spread	33.3 Ops/sec
flatMap	5799.4 Ops/sec
reduce with push	35837.1 Ops/sec
for...of	48043.6 Ops/sec
push(...arr)	63940.8 Ops/sec
copy via spread	110492.1 Ops/sec
copy via slice	1372809.1 Ops/sec
for i	3129.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents a benchmark definition, which consists of multiple test cases. Each test case measures the performance of a specific JavaScript operation.

**Test Case Explanations**

1. **"reduce with spread"`**: This test case measures the performance of using the `reduce()` method with the spread operator (`...`). In this case, the callback function receives an accumulator (`acc`) and a current element (`x`) from the array, and returns the updated accumulator by spreading it with the current element.

Pros:

* Simplifies code and reduces boilerplate
* Can be more readable and maintainable

Cons:

* May incur overhead due to object creation and spread operator usage
* Some older browsers may not support the spread operator

2. **"flatMap"`**: This test case measures the performance of using the `flatMap()` method, which is a more modern alternative to `map()` followed by `reduce()`. The callback function receives an accumulator (`acc`) and returns a new array with the transformed elements.

Pros:

* Simplifies code and reduces boilerplate
* More expressive than traditional `map()`-`reduce()` approach

Cons:

* May incur overhead due to array creation and iteration
* Some older browsers may not support `flatMap()`

3. **"reduce with push"`**: This test case measures the performance of using the `reduce()` method with a callback function that pushes elements to an accumulator array using `push()`. The callback function receives an accumulator (`acc`) and a current element (`x`) from the array, and returns the updated accumulator by pushing the current element.

Pros:

* Can be more efficient than spreading arrays
* Does not incur overhead due to object creation

Cons:

* May require more manual memory management (e.g., keeping track of the accumulator's length)
* Can lead to more complex code

4. **"for...of"`**: This test case measures the performance of using a `for...of` loop to iterate over an array and push elements to an accumulator.

Pros:

* Simple and easy to understand
* Does not incur overhead due to object creation or spread operator usage

Cons:

* May be slower than other approaches due to the loop overhead
* Limited flexibility compared to other methods

5. **"push(...arr)"**: This test case measures the performance of using the `push()` method with a spread operator (`...`) to push all elements from an array.

Pros:

* Simple and expressive
* Does not incur overhead due to object creation or loop overhead

Cons:

* May incur overhead due to spread operator usage
* Some older browsers may not support the spread operator

6. **"copy via slice"`**: This test case measures the performance of using the `slice()` method to create a shallow copy of an array.

Pros:

* Creates a new, independent array with no side effects
* Does not modify the original array

Cons:

* May incur overhead due to array creation and copying
* Not suitable for large datasets or performance-critical applications

7. **"for i"`**: This test case measures the performance of using a traditional `for` loop (with an index variable) to iterate over an array and push elements to an accumulator.

Pros:

* Simple and easy to understand
* Does not incur overhead due to object creation or spread operator usage

Cons:

* May be slower than other approaches due to the loop overhead
* Limited flexibility compared to other methods

**Conclusion**

Each test case has its strengths and weaknesses, and the best approach depends on the specific use case, performance requirements, and personal preference. MeasureThat.net's results can help users choose the most efficient JavaScript operation for their particular needs.

Related benchmarks:

flatMap vs reduce with spread vs reduce with push vs for of vs push v2 ... (version: 0)

Comparing performance of: reduce with spread vs flatMap vs reduce with push vs for...of vs push(...arr) vs copy via spread vs copy via slice vs for i

Created: 5 months ago by: Guest

Jump to the latest result

reduce with spread

flatMap

reduce with push

for...of

push(...arr)

copy via spread

copy via slice

for i

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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