Benchmark: JS Filter Test large array

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 < 100; ++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: 21 days 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 Edg/131.0.0.0

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
array.find	1735959.9 Ops/sec
array.filter	1741822.0 Ops/sec
lodash.filter	1551931.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript functions can be a complex task, as it depends on various factors such as browser, device platform, operating system, and hardware capabilities.

**Benchmark Definition**

The provided JSON defines two microbenchmarks: `array.find` and `array.filter`. Both benchmarks test the execution speed of the `getValue` function, which is applied to an array using these methods.

1. **Array.prototype.find**: This method searches for the first element in the array that satisfies a given condition (in this case, `getValue`). If no such element is found, it returns undefined.
2. **Array.prototype.filter**: This method creates a new array containing only the elements of the original array that satisfy a given condition (also using `getValue`).

**Options Compared**

The benchmark compares three approaches:

1. **Native Array.prototype.find**: This method is implemented in JavaScript and is available in most modern browsers.
2. **Native Array.prototype.filter**: Similar to find, this method is also implemented in JavaScript and is available in most modern browsers.
3. **_lodash.filter** (using Lodash): This is a popular external library that provides an implementation of the `filter` method.

**Pros and Cons**

1. **Native Array.prototype.find**:
	* Pros: Fast and efficient, as it's implemented in JavaScript.
	* Cons: May not work correctly for all edge cases or in older browsers.
2. **Native Array.prototype.filter**:
	* Pros: Similar to find, fast and efficient, but may have some differences in implementation details.
	* Cons: Also may not work correctly for all edge cases or in older browsers.
3. **_lodash.filter** (using Lodash):
	* Pros: Widely supported, reliable, and well-maintained.
	* Cons: Requires an additional library to be loaded, which can impact performance.

**Other Considerations**

* The benchmark uses a relatively small array of 100 elements, which might not be representative of real-world scenarios where arrays can be much larger.
* The `getValue` function is a simple predicate that subtracts 50 from each element and checks if the result is greater than 31. This might not be a realistic use case for most developers.
* The benchmark does not account for other factors that can affect performance, such as memory allocation, garbage collection, or concurrent execution.

**Other Alternatives**

If you're looking for alternative methods to implement `filter` or `find`, consider the following:

* Using a library like `Array.prototype.map` and then filtering the resulting array.
* Implementing your own custom implementation using bitwise operations or loops.
* Using a functional programming approach with libraries like RxJS or Promisefilter.

Keep in mind that these alternatives might not be as efficient or reliable as the native methods provided by modern browsers.

Related benchmarks:

JS Filter Test large array (version: 0)

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

Created: 4 years 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 2 months ago):