Benchmark: Group By Comparison; For, For Of, and Reduce

Script Preparation code:

var count = 100000;
var groupBy = "group";
var rows = Array.from({
    length: count
});

for (let i = 0; i < count; i++) {
    rows[i] = {
        id: i,
        group: `group-${Math.ceil(Math.random() * 4)}`,
        value: Math.random() * 100000,
    };
}

function groupByFor(field, data) {
    var result = {};

    for (let i = 0; i < data.length; i++) {
        var item = data[i];
        var key = `${item[field]}`;

        if (!result[key]) {
            result[key] = [];
        }

        result[key].push(item);
    }

    return result;
};

function groupByForOf(field, data) {
    var result = {};

    for (var [index, item] of data.entries()) {
        var item = data[index];
        var key = `${item[field]}`;

        if (!result[key]) {
            result[key] = [];
        }

        result[key].push(item);
    }

    return result;
};

function groupByReduce(field, data) {
    return data.reduce((result, item) => {
        var key = `${item[field]}`;

        if (!result[key]) {
            result[key] = [];
        }

        result[key].push(item);
        return result;
    }, {});
};

Tests:

For Loop
var result = groupByFor(groupBy, rows);
For Of
var result = groupByForOf(groupBy, rows);
Reduce
var result = groupByReduce(groupBy, rows);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For Loop
For Of
Reduce

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.

Let's dive into the Benchmark Definition and test cases.

**Benchmark Description**

The benchmark is designed to measure the performance of three different approaches for grouping data in JavaScript: For Loop, For Of Loop, and Reduce.

**Script Preparation Code**

The script preparation code creates an array `rows` with 100,000 elements, each representing a row of data. Each row has an `id`, a `group` (one of four possible values), and a `value`. The groups are randomly assigned to the rows.

**Functions being compared**

Three functions are defined:

1. **groupByFor**: This function uses a traditional For Loop to iterate over the data array, grouping elements by their `field` value.
2. **groupByForOf**: This function uses a For Of Loop to iterate over the data array, grouping elements by their `field` value. The syntax is similar to the traditional For Loop, but with `of` instead of `in`.
3. **groupByReduce**: This function uses the Reduce method to group elements in the data array by their `field` value.

**Library used**

None. These functions are standard JavaScript implementation.

**Special JS feature or syntax**

The For Of Loop (`for (var [index, item] of data.entries())`) is a relatively new feature introduced in ECMAScript 2017. It allows iterating over arrays using a more concise syntax than traditional loops.

**Pros and Cons of each approach**

1. **For Loop**
	* Pros: Widely supported and well-understood; easy to maintain.
	* Cons: Can be slower due to the overhead of explicit loop variables and conditionals.
2. **For Of Loop**
	* Pros: More concise and expressive syntax, can reduce errors with implicit iteration variable declaration.
	* Cons: Less widely supported in older browsers or environments; requires ECMAScript 2017 or later for compatibility.
3. **Reduce**
	* Pros: Efficient and concise way to group elements, suitable for large datasets.
	* Cons: Requires an accumulator object, which can be unfamiliar to some developers.

**Other alternatives**

In addition to these three approaches, other grouping methods might include:

* Using the `Array.prototype.reduce()` method with a custom callback function
* Implementing a simple data structure like a hash table or map to store grouped elements
* Utilizing libraries like Lodash or Underscore.js for optimized grouping functions

**Benchmark Results Interpretation**

The benchmark results show the number of executions per second (ExecutionsPerSecond) for each test case. The highest performance is achieved by the For Of Loop, followed closely by the Reduce method. The traditional For Loop performs slightly worse.

When considering these results in a real-world context:

* If readability and maintainability are more important than absolute performance, the For Of Loop might be a good choice.
* If conciseness and expressiveness are key, the For Of Loop could be preferred.
* If grouping data is a common task and you're working with large datasets, Reduce or other optimized libraries like Lodash might be a better fit.

I hope this explanation helps!

Related benchmarks:

Group By Comparison; For, For Of, and Reduce (version: 0)

Comparing performance of: For Loop vs For Of vs Reduce

Created: 3 years ago by: Guest

Jump to the latest result

For Loop

For Of

Reduce

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