Benchmark: JS Filter Test - MeasureThat.net

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');

// Add array.where implementation
Array.prototype.where = Array.prototype.where || function(predicate) {
  var results = [],
    len = this.length,
    i = 0;

  for (; i < len; i++) {
    var item = this[i];
    if (predicate(item)) {
      results.push(item);
    }
  }

  return results;
};

// Generate test array
window.array = (function() {
  var arr = [];
  for (var i = 0; i < 100; ++i) {
    arr.push(i);
  }

  return arr;
}());

grepAlone = function( elems, callback, invert ) {
		var callbackInverse,
			matches = [],
			i = 0,
			length = elems.length,
			callbackExpect = !invert;

		// Go through the array, only saving the items
		// that pass the validator function
		for ( ; i < length; i++ ) {
			callbackInverse = !callback( elems[ i ], i );
			if ( callbackInverse !== callbackExpect ) {
				matches.push( elems[ i ] );
			}
		}

		return matches;
};

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:

$.grep
$.grep(array, getValue);
array.find
array.find(getValue);
array.where
array.where(getValue);
angular.$filter
angularFilter(array, getValue);
array.filter
array.filter(getValue);
lodash.filter
_lodash.filter(array, getValue);
underscore.filter
_.filter(array, getValue);
grepAlone
grepAlone(array, getValue);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
$.grep
array.find
array.where
angular.$filter
array.filter
lodash.filter
underscore.filter
grepAlone

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Browser/OS: Chrome 144 on Linux

View result in a separate tab

Test name	Executions per second
$.grep	3953564.5 Ops/sec
array.find	725483.8 Ops/sec
array.where	4389145.5 Ops/sec
angular.$filter	1287848.2 Ops/sec
array.filter	4727769.0 Ops/sec
lodash.filter	526164.7 Ops/sec
underscore.filter	820523.1 Ops/sec
grepAlone	2789345.8 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark measures the performance of different filtering methods on an array of 100 numbers. The goal is to find (or filter) elements that satisfy a given condition (in this case, `el - 50 > 31`).

**Tested Methods**

1. **$.grep(array, getValue)**: Uses jQuery's `grep()` method.
2. **array.find(getValue)**: Uses JavaScript's built-in `find()` method.
3. **array.where(getValue)**: Implements a custom `where()` method on the array prototype.
4. **angularFilter(array, getValue)**: Uses AngularJS's `$filter` service to filter the array.
5. **grepAlone(array, getValue)**: A custom implementation of filtering using a single function (similar to jQuery's `grep()`).
6. **_lodash.filter(array, getValue)** and **_.filter(array, getValue)**: Uses Lodash's `filter()` method.
7. **array.filter(getValue)**: Uses JavaScript's built-in `filter()` method.
8. **underscore.filter**: Uses UnderSCORE.js's `filter()` function.

**Comparison**

The benchmark measures the performance of each method by executing them 100 million times and reporting the number of executions per second.

**Pros and Cons**

1. **$.grep(array, getValue)**:
	* Pros: Simple, widely supported, and easy to use.
	* Cons: jQuery is a large library that may not be necessary for this specific use case.
2. **array.find(getValue)**:
	* Pros: Native JavaScript method, efficient, and simple.
	* Cons: May be slower than other methods due to its nature (iterating over the array).
3. **array.where(getValue)**:
	* Pros: Custom implementation allows for fine-grained control and potential optimization.
	* Cons: Adds complexity to the codebase and may not be widely supported or understood.
4. **angularFilter(array, getValue)**:
	* Pros: AngularJS provides a robust filtering mechanism that can be reused throughout the application.
	* Cons: May introduce unnecessary overhead due to the Angular framework's functionality.
5. **grepAlone(array, getValue)**:
	* Pros: Simple and efficient implementation similar to jQuery's `grep()`.
	* Cons: May not be as widely supported or well-understood as other methods.
6. **_lodash.filter(array, getValue)** and **_.filter(array, getValue)**:
	* Pros: Lodash provides a robust filtering mechanism that can be reused throughout the application.
	* Cons: Requires the Lodash library, which may add unnecessary overhead.
7. **array.filter(getValue)**:
	* Pros: Native JavaScript method, efficient, and simple.
	* Cons: May not be as widely supported or well-understood as other methods.
8. **underscore.filter**:
	* Pros: UnderSCORE.js provides a robust filtering mechanism that can be reused throughout the application.
	* Cons: Requires the UnderSCORE.js library, which may add unnecessary overhead.

The benchmark results will provide insight into the performance characteristics of each method, allowing users to choose the best approach for their specific use case.

Related benchmarks:

JS Filter Test (version: 2)

Comparing performance of: $.grep vs array.find vs array.where vs angular.$filter vs array.filter vs lodash.filter vs underscore.filter vs grepAlone

Created: 9 years ago by: Registered User

Jump to the latest result

$.grep

array.find

array.where

angular.$filter

array.filter

lodash.filter

underscore.filter

grepAlone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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