Benchmark: JS Filter Test large array 10000

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
<script>
  _lodash = _.noConflict();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Script Preparation code:

var angularFilter = angular.injector(['ng']).get('$filter')('filter');

// Generate test array
window.array = (function() {
  var arr = [];
  for (var i = 0; i < 10000; ++i) {
    arr.push(i);
  }

  return arr;
}());

Array.prototype.find = function(predicate) {
  if (this == null) {
    throw new TypeError('Array.prototype.find called on null or undefined');
  }
  if (typeof predicate !== 'function') {
    throw new TypeError('predicate must be a function');
  }
  var list = Object(this);
  var length = list.length >>> 0;
  var thisArg = arguments[1];
  var value;

  for (var i = 0; i < length; i++) {
    value = list[i];
    if (predicate.call(thisArg, value, i, list)) {
      return value;
    }
  }
  return undefined;
};

function getValue(el) {
	return el - 50 > 31;
}

Tests:

array.find
array.find(getValue);
array.filter
array.filter(getValue);
lodash.filter
_lodash.filter(array, getValue);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array.find
array.filter
lodash.filter

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/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
array.find	1391896.0 Ops/sec
array.filter	9955.5 Ops/sec
lodash.filter	9173.6 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark is designed to test the performance of three different methods: `array.find()`, `array.filter()`, and `_lodash.filter()` (using Lodash). The tests are run on a large array of 10,000 elements with a custom predicate function called `getValue`.

**What's being tested?**

1. **`array.find()`**: This method searches for the first element in the array that satisfies the predicate condition. In this case, it checks if the element minus 50 is greater than 31.
2. **`array.filter()`**: This method creates a new array with all elements that satisfy the predicate condition. Again, it checks if the element minus 50 is greater than 31.
3. **_lodash.filter()_ (Lodash)**: Lodash is a popular utility library for JavaScript that provides functional programming helpers. The `_lodash.filter()` function applies the `getValue` predicate to the input array and returns a new array with filtered elements.

**Options compared**

The benchmark compares two main options:

1. **Native Array.prototype methods (`array.find()` and `array.filter()`)**: These methods are implemented in the JavaScript engine itself and rely on the browser's execution environment.
2. **_lodash.filter()_ (Lodash)**: This is a third-party library that provides an implementation of the filtering algorithm.

**Pros and Cons**

Here's a brief summary:

1. **Native Array.prototype methods**:
	* Pros:
		+ Built-in, so no additional dependencies are required.
		+ Typically faster since they're implemented in native code.
	* Cons:
		+ May have implementation-specific limitations or quirks.
2. **_lodash.filter()_ (Lodash)**:
	* Pros:
		+ Flexible and customizable through various Lodash functions.
		+ Often provides more features than native implementations.
	* Cons:
		+ Adds an additional dependency, which may slow down page load times.
		+ May be slower due to the overhead of loading a library.

**Library usage**

In this benchmark, Lodash is used as a third-party library. The `_lodash.noConflict()` function ensures that Lodash's global functions don't conflict with native methods. Specifically, `_lodash.filter()` is used to filter the input array using the `getValue` predicate.

**Special JS features or syntax**

None are mentioned in this specific benchmark.

**Other alternatives**

If you wanted to test other filtering algorithms or approaches, you might consider:

1. **V8 (JavaScript engine) implementation**: Some benchmarks may test custom implementations of the filtering algorithm within V8 itself.
2. **Custom libraries or frameworks**: Other libraries like jQuery or React's `filter()` method could be used as alternatives.
3. **Native WebAssembly (WASM)**: Some browsers support WASM-based filtering algorithms, which might provide better performance.

Keep in mind that the choice of implementation and library depends on your specific use case, performance requirements, and personal preference.

Related benchmarks:

JS Filter Test large array 10000 (version: 0)

Comparing performance of: array.find vs array.filter vs lodash.filter

Created: one year ago by: Guest

Jump to the latest result

array.find

array.filter

lodash.filter

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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