Benchmark: Native filter().length vs lodash sumBy vs lodash filter().size(), for small array

Native filter().length vs lodash sumBy vs lodash filter().size(), for small array (version: 7)

For large arrays, see https://www.measurethat.net/Benchmarks/Show/17859/1/native-filterlength-vs-lodash-sumby-vs-lodash-filtersiz

Comparing performance of: Filter length vs lodash sumBy vs lodash filter chaining vs manualMethod1 vs manualMethod2 (with lambda function test) vs manualMethod3 (for-each loop, with lambda function test)

Created: 2 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/lodash/4.17.21/lodash.min.js"></script>

AخA
 
<script src="https://cdn.jsdelivr.net/lodash/4.17.21/lodash.min.js"></script>

Script Preparation code:

const arraySize = 10;
window.array = _.range(arraySize).map(() => Math.random());

function manualMethod1(array) {
  let x = 0;
  let len = array.length;
  for (let i = 0; i < len; i++) {
    if (array[i] > .5) {
      x++;
    }
  }
  return x;
}

function manualMethod2(array, test) {
  let x = 0;
  let len = array.length;
  for (let i = 0; i < len; i++) {
    if (test(array[i])) {
      x++;
    }
  }
  return x;
}

function manualMethod3(array, test) {
  let x = 0;
  for (let i of array) {
    if (test(i)) {
      x++;
    }
  }
  return x;
}

​x
 
const arraySize = 10;window.array = _.range(arraySize).map(() => Math.random());​function manualMethod1(array) {  let x = 0;  let len = array.length;  for (let i = 0; i < len; i++) {    if (array[i] > .5) {      x++;    }  }  return x;}​function manualMethod2(array, test) {  let x = 0;  let len = array.length;  for (let i = 0; i < len; i++) {    if (test(array[i])) {      x++;    }  }  return x;}​function manualMethod3(array, test) {  let x = 0;  for (let i of array) {    if (test(i)) {      x++;    }  }  return x;}

Tests:

Filter length
const x = _.filter(window.array, i => i > .5).length; return x;
const x = _.filter(window.array, i => i > .5).length;
return x;

lodash sumBy

const x = _.sumBy(window.array, i => i > .5 ? 1 : 0);
return x;

 
const x = _.sumBy(window.array, i => i > .5 ? 1 : 0);return x;

lodash filter chaining
const x = _(window.array).filter(i => i > .5).size(); return x;
const x = _(window.array).filter(i => i > .5).size();
return x;
manualMethod1
return manualMethod1(window.array);
return manualMethod1(window.array);
manualMethod2 (with lambda function test)
return manualMethod2(window.array, i => i > .5);
return manualMethod2(window.array, i => i > .5);
manualMethod3 (for-each loop, with lambda function test)
return manualMethod3(window.array, i => i > .5);
return manualMethod3(window.array, i => i > .5);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Filter length
lodash sumBy
lodash filter chaining
manualMethod1
manualMethod2 (with lambda function test)
manualMethod3 (for-each loop, with lambda function test)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:98.0) Gecko/20100101 Firefox/98.0

Browser/OS: Firefox 98 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Filter length	3658686.2 Ops/sec
lodash sumBy	4611254.0 Ops/sec
lodash filter chaining	1018792.1 Ops/sec
manualMethod1	6866455.5 Ops/sec
manualMethod2 (with lambda function test)	6364288.0 Ops/sec
manualMethod3 (for-each loop, with lambda function test)	4468476.5 Ops/sec

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

Let's break down the benchmark and explain what's being tested.

Benchmark Definition

The benchmark tests four different approaches to count the number of elements in an array that meet a certain condition:

manualMethod1: A custom implementation using a traditional for loop.
manualMethod2: A custom implementation using a for loop with a lambda function test.
manualMethod3: A custom implementation using a for...of loop with a lambda function test (ES6+ feature).
_filter and _sumBy from the Lodash library: Two popular utility functions for array manipulation.

Options being compared

The benchmark compares the performance of each approach:

Manual implementation: Three custom implementations using different looping constructs (for, for...of, and a combination of both).
Lodash implementation: Two implementations using the _filter and _sumBy functions, which are designed to be efficient and optimized.

Pros and cons

Here's a brief summary of each approach:

Manual implementation (manualMethod1): Pros: Simple, easy to understand. Cons: May be slower due to the overhead of explicit looping.
Manual implementation (manualMethod2): Pros: Similar to manualMethod1, but with the added benefit of a lambda function test. Cons: Still may be slower than optimized libraries like Lodash.
Manual implementation (manualMethod3): Pros: Modern, concise syntax using for...of. Cons: May have performance overhead due to the newer language feature.
Lodash implementation (filter):
- Pros: Optimized for performance, efficient use of memory.
- Cons: Adds dependency on Lodash library, may be slower than native implementations.
Lodash implementation (sumBy): Similar pros and cons as _filter, with the added benefit of calculating the sum directly.

Library usage

The benchmark uses the Lodash library for its _filter and _sumBy functions. These functions are designed to be efficient, reliable, and easy to use, making them popular choices among developers.

Special JavaScript feature or syntax

Note that manualMethod3 uses the for...of loop with a lambda function test (ES6+ feature). This is a modern looping construct that allows for concise and expressive code. However, its performance characteristics may vary compared to traditional for loops.

Other alternatives

If you're interested in exploring alternative approaches, consider:

Native implementation: Implementing the filtering logic using native JavaScript features, such as Array.prototype.filter() or String.prototype.indexOf().
Other libraries: Evaluating other utility libraries like Underscore.js, Moment.js, or Ramda, which offer similar functionality to Lodash.

When evaluating this benchmark, keep in mind that the results may depend on various factors, including:

The size and distribution of the input data.
The specific hardware and browser configurations used for testing.
The level of optimization employed by each implementation.

I hope this explanation helps you understand the benchmark and make informed decisions about your own code optimization efforts!

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark tests four different approaches to count the number of elements in an array that meet a certain condition:

1. `manualMethod1`: A custom implementation using a traditional `for` loop.
2. `manualMethod2`: A custom implementation using a `for` loop with a lambda function test.
3. `manualMethod3`: A custom implementation using a `for...of` loop with a lambda function test (ES6+ feature).
4. `_filter` and `_sumBy` from the Lodash library: Two popular utility functions for array manipulation.

**Options being compared**

The benchmark compares the performance of each approach:

* **Manual implementation**: Three custom implementations using different looping constructs (`for`, `for...of`, and a combination of both).
* **Lodash implementation**: Two implementations using the `_filter` and `_sumBy` functions, which are designed to be efficient and optimized.

**Pros and cons**

Here's a brief summary of each approach:

* **Manual implementation (`manualMethod1`)**: Pros: Simple, easy to understand. Cons: May be slower due to the overhead of explicit looping.
* **Manual implementation (`manualMethod2`)**: Pros: Similar to `manualMethod1`, but with the added benefit of a lambda function test. Cons: Still may be slower than optimized libraries like Lodash.
* **Manual implementation (`manualMethod3`)**: Pros: Modern, concise syntax using `for...of`. Cons: May have performance overhead due to the newer language feature.
* **Lodash implementation (_filter_)**:
	+ Pros: Optimized for performance, efficient use of memory.
	+ Cons: Adds dependency on Lodash library, may be slower than native implementations.
* **Lodash implementation (_sumBy_)**: Similar pros and cons as `_filter`, with the added benefit of calculating the sum directly.

**Library usage**

The benchmark uses the Lodash library for its `_filter` and `_sumBy` functions. These functions are designed to be efficient, reliable, and easy to use, making them popular choices among developers.

**Special JavaScript feature or syntax**

Note that `manualMethod3` uses the `for...of` loop with a lambda function test (ES6+ feature). This is a modern looping construct that allows for concise and expressive code. However, its performance characteristics may vary compared to traditional `for` loops.

**Other alternatives**

If you're interested in exploring alternative approaches, consider:

* **Native implementation**: Implementing the filtering logic using native JavaScript features, such as `Array.prototype.filter()` or `String.prototype.indexOf()`.
* **Other libraries**: Evaluating other utility libraries like Underscore.js, Moment.js, or Ramda, which offer similar functionality to Lodash.

When evaluating this benchmark, keep in mind that the results may depend on various factors, including:

* The size and distribution of the input data.
* The specific hardware and browser configurations used for testing.
* The level of optimization employed by each implementation.

I hope this explanation helps you understand the benchmark and make informed decisions about your own code optimization efforts!

Related benchmarks: