Benchmark: Lodash sumBy vs reduce vs for loop

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

var arr = [];
for(var i = 0; i < 100000; i++){
  arr.push({value:getRandomInt(100)});
}

Tests:

_.sumBy value
_.sumBy(arr, "value");
map and reduce
arr.reduce((prev, next) => prev + next.value, 0);
_.sumBy with map
_.sumBy(arr, x => x.value);
sum with for of loop
let result = 0; for(const x of arr) { result += x.value; }
sum with for loop
let result = 0; for(let i = 0; i < arr.length; i++) { result += arr[i].value; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_.sumBy value
map and reduce
_.sumBy with map
sum with for of loop
sum with for loop

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 10 days ago):

LLMs can make mistakes. Check important info.

Measuring the performance of different JavaScript methods can be quite fascinating, especially when it comes to summing values in an array.

In this benchmark, we have four test cases that compare three different approaches:

1. **Lodash `sumBy`**: A utility function provided by the popular Lodash library, which allows you to sum a property of each element in an array.
2. **Reduce with map**: This approach uses the `reduce` method along with `map` to achieve the same result as `sumBy`.
3. **For loop (using `for of`)**: A simple, imperative approach using a for loop to iterate over the array and sum up the values.

Let's dive into each option:

**Lodash `sumBy`**

Pros:

* Concise and readable code
* Easy to understand and maintain

Cons:

* Requires an additional library (Lodash) to be included in the test environment
* May have overhead due to the need to load the library

The `sumBy` function takes two arguments: the array to sum, and a callback function that extracts the value from each element. The callback function is called for each element in the array, and its return value is added together.

```javascript
_.sumBy(arr, "value");
```

**Reduce with map**

Pros:

* No additional library required
* Can be seen as a more "native" JavaScript approach

Cons:

* Code can be slightly more verbose than `sumBy`
* May require more mental effort to understand and maintain

The reduce method takes an initial value (in this case, 0), and applies a callback function to each element in the array. The callback function sums up the values as it iterates through the array.

```javascript
arr.reduce((prev, next) => prev + next.value, 0);
```

**For loop (using `for of`)**

Pros:

* Simple, intuitive code
* No additional libraries required

Cons:

* May be less readable or maintainable than other approaches
* Can be slower due to the overhead of the for loop iteration

This approach uses a for loop with the `of` keyword to iterate over the array and sum up the values.

```javascript
for (const x of arr) {
  result += x.value;
}
```

Now, let's talk about the latest benchmark results:

The top-performing test case is **"sum with for of loop"**, which executes approximately 160 executions per second. This suggests that the for loop approach is relatively fast and efficient.

In contrast, the other three approaches are slower:

* **Lodash `sumBy`**: Executes around 140-150 executions per second
* **Reduce with map**: Executes around 925-950 executions per second (slower than the for loop)
* **_.sumBy with map**: Executes around 140-150 executions per second

Other alternatives to consider:

* Using a more efficient array method, such as `Array.prototype.reduce()` without using the `map` function
* Optimizing the code further by reducing unnecessary computations or avoiding unnecessary iterations
* Considering alternative libraries or frameworks that provide optimized implementations of these methods (e.g., native WebAssembly implementations)

Keep in mind that benchmarking results can vary depending on the specific test environment, hardware, and version of JavaScript being used.

Latest run results:

Run details: (Test run date: 9 days ago)

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

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
_.sumBy value	1809.3 Ops/sec
map and reduce	3920.2 Ops/sec
_.sumBy with map	1456.0 Ops/sec
sum with for of loop	14252.7 Ops/sec
sum with for loop	206.8 Ops/sec

Related benchmarks:

Lodash sumBy vs reduce vs for loop (version: 0)

Comparing performance of: _.sumBy value vs map and reduce vs _.sumBy with map vs sum with for of loop vs sum with for loop

Created: 8 months ago by: Guest

Jump to the latest result

_.sumBy value

map and reduce

_.sumBy with map

sum with for of loop

sum with for loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 10 days ago):