Benchmark: JS Filter Test large array (50000 objects)

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 < 50000; ++i) {
    arr.push({id:i, name:"abba" + 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].id;
    if (predicate.call(thisArg, value, i, list)) {
      return value;
    }
  }
  return undefined;
};

function getValue(el) {
	return el.id - 25000 > 31000;
}

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

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark is designed to compare the performance of three different array filtering methods:

1. `Array.prototype.find()`
2. `Array.prototype.filter()`
3. `_lodash.filter()` (using the Lodash library)

**Test Case 1: Array.prototype.find()**

In this test case, the `getValue` function is used as a predicate to find the first element in the array that satisfies the condition. The pros of using `find()` are:

* It's a built-in JavaScript method, so it's likely to be highly optimized.
* It returns the first matching element, which can be useful if you only need one result.

However, the cons are:

* It has to scan the entire array until it finds a match, which can be slow for large arrays.
* If no elements match, it returns `undefined`, which might not be what you expect.

**Test Case 2: Array.prototype.filter()**

In this test case, the same `getValue` function is used as a callback to filter the array. The pros of using `filter()` are:

* It's also a built-in JavaScript method, so it's likely optimized.
* It returns an array with only the elements that match the condition.

However, the cons are:

* Like `find()`, it has to scan the entire array until it finds all matches, which can be slow for large arrays.
* If no elements match, it returns an empty array.

**Test Case 3: _lodash.filter()**

In this test case, the Lodash library is used with the `_filter()` method. The pros of using `filter()` from Lodash are:

* It's a custom implementation that can be optimized for performance.
* It allows you to filter arrays in a more concise and readable way.

However, the cons are:

* You need to include the Lodash library in your code, which can add extra overhead.
* The performance of `_filter()` might not be as good as native JavaScript methods like `find()` or `filter()`, since it's implemented in JavaScript.

**Other Considerations**

In addition to these three test cases, there are other array filtering methods available in JavaScript and libraries. Some examples include:

* `Array.prototype.map()`: Returns a new array with the results of applying a provided function on every element in this array.
* `Array.prototype.reduce()`: Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single output value.

**Libraries Used**

In this benchmark, the following libraries are used:

* jQuery: Not actually used in the benchmark code, but included as part of the HTML preparation.
* AngularJS: Also not used in the benchmark code, but included as part of the HTML preparation.
* Lodash (or _): Used in Test Case 3 to implement the `_filter()` method.

**Special JavaScript Features or Syntax**

In this benchmark, no special JavaScript features or syntax are used that would affect the performance of the array filtering methods. However, if you were to use modern JavaScript features like `async/await` or `generators`, they might not be included in this benchmark since they're not directly related to array filtering.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Test name	Executions per second
array.find	2670.0 Ops/sec
array.filter	2226.5 Ops/sec
lodash.filter	2627.7 Ops/sec

Related benchmarks:

JS Filter Test large array (50000 objects) (version: 0)

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

Created: one year ago by: Registered User

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 one month ago):