Benchmark: JS Filter Test with fasterFilter

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;
};
// This is because Chrome filter is slow in most cases. This is polyfill from Mozilla, but it's faster than Chrome by a least x2
Array.prototype.fasterFilter = function (func, thisArg) {
    'use strict';
    if (!((typeof func === 'Function' || typeof func === 'function') && this))
        throw new TypeError();

    var len = this.length >>> 0,
        res = new Array(len), // preallocate array
        t = this, c = 0, i = -1;

    var kValue;
    if (thisArg === undefined) {
        while (++i !== len) {
            // checks to see if the key was set
            if (i in this) {
                kValue = t[i]; // in case t is changed in callback
                if (func(t[i], i, t)) {
                    res[c++] = kValue;
                }
            }
        }
    }
    else {
        while (++i !== len) {
            // checks to see if the key was set
            if (i in this) {
                kValue = t[i];
                if (func.call(thisArg, t[i], i, t)) {
                    res[c++] = kValue;
                }
            }
        }
    }

    res.length = c; // shrink down array to proper size
    return res;
};
// Generate test array
window.array = (function() {
  var arr = [];
  for (var i = 0; i < 1000; ++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.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);
fasterFilter
array.fasterFilter(getValue);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Linux

View result in a separate tab

array.where

377K/s

grepAlone

356K/s

$.grep

338K/s

fasterFilter

333K/s

array.filter

295K/s

lodash.filter

291K/s

underscore.filter

133K/s

angular.$filter

85K/s

View exact numbers

Test name	Executions per second
✓ array.where	376,573 Ops/sec
grepAlone	356,274 Ops/sec
$.grep	338,214 Ops/sec
fasterFilter	333,248 Ops/sec
array.filter	295,366 Ops/sec
lodash.filter	291,357 Ops/sec
underscore.filter	132,957 Ops/sec
angular.$filter	84,906 Ops/sec

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

LLMs can make mistakes. Check important info.

JS Filter Test with fasterFilter (version: 1) Benchmark.js

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

Created: 5 years ago by: Registered User

Go to the latest result

$.grep

array.where

angular.$filter

array.filter

lodash.filter

underscore.filter

grepAlone

fasterFilter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JS Filter Test with fasterFilter (version: 1) Benchmark.js

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

Created: 5 years ago by: Registered User

Go to the latest result

$.grep

array.where

angular.$filter

array.filter

lodash.filter

underscore.filter

grepAlone

fasterFilter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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