Benchmark: Reduce with spread VS for...of with push

Script Preparation code:

var groups = Array.apply(null, {length: 32}).map(v => (Math.random() + 1).toString(36).substr(2))
var data = Array.apply(null, {length: 10_000}).map((v,id) => ({id, group: groups[Math.random() * groups.length | 0]}))

Tests:

reduce with spread
function groupByReduce(objectArray, property) { return objectArray.reduce((acc, obj) => { const key = obj[property]; const curGroup = acc[key] ?? []; return { ...acc, [key]: [...curGroup, obj] }; }, {}); } groupByReduce(data, 'group');
for...of with push
function groupByFor(data, keyProperty){ const groups = {} for(const entry of data){ const groupId = entry[keyProperty]; if(!groups[groupId]){ groups[groupId] = []; } groups[groupId].push(entry); } return groups; } groupByFor(data, 'group')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce with spread
for...of with push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce with spread	77.9 Ops/sec
for...of with push	1890.4 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents two individual test cases: "reduce with spread" and "for...of with push". These test cases compare the performance of two approaches for grouping data in an array.

**Test Case 1: Reduce with Spread**

The benchmark definition is a function named `groupByReduce` that takes an object array and a property as input. It uses the `Array.prototype.reduce()` method to group the elements by the specified property.

```javascript
function groupByReduce(objectArray, property) {
  return objectArray.reduce((acc, obj) => {
    const key = obj[property];
    const curGroup = acc[key] ?? [];
    return { ...acc, [key]: [...curGroup, obj] };
  }, {});
}
```

The test case creates an array of objects with random properties and groups them by the "group" property using `groupByReduce`.

**Pros and Cons**

Pros:

* More concise and expressive code
* Can handle large datasets efficiently

Cons:

* May have performance issues if the accumulator object is large, as it requires additional memory allocation and copying.

**Test Case 2: For...of with Push**

The benchmark definition is a function named `groupByFor` that takes an array and a key property as input. It uses a traditional for loop to iterate over the array and group elements by the specified property.

```javascript
function groupByFor(data, keyProperty) {
  const groups = {};
  for (const entry of data) {
    const groupId = entry[keyProperty];
    if (!groups[groupId]) {
      groups[groupId] = [];
    }
    groups[groupId].push(entry);
  }
  return groups;
}
```

The test case creates an array of objects with random properties and groups them by the "group" property using `groupByFor`.

**Pros and Cons**

Pros:

* Can be more readable and maintainable for large datasets, as it avoids the need to create a large accumulator object.
* May perform better if the dataset is extremely large, since it avoids the overhead of creating an array.

Cons:

* More verbose code
* May have performance issues if the loop iterates over a very large number of elements.

**Library**

Neither test case uses any libraries. However, `Array.prototype.reduce()` and `for...of` loops are built-in JavaScript features that provide efficient grouping capabilities.

**Special JS Feature/Syntax**

The use of template literals (`(Math.random() + 1).toString(36).substr(2)`) in the script preparation code is a modern JavaScript feature. It generates random strings for the "group" property.

**Other Alternatives**

For large datasets, other grouping approaches include:

* Using `Array.prototype.reduce()` with an initial value of `{}` and incrementally updating the accumulator object.
* Utilizing libraries like Lodash or Ramda, which provide more concise and expressive grouping functions.

For extremely large datasets, other approaches include:

* Using a streaming algorithm that processes data in chunks, rather than loading the entire dataset into memory.
* Leveraging parallel processing or multi-threading to group elements concurrently.

Related benchmarks:

Reduce with spread VS for...of with push (version: 4)

Comparing performance of: reduce with spread vs for...of with push

Created: one year ago by: Registered User

Jump to the latest result

reduce with spread

for...of with push

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