Benchmark: JS Filter Test newer Lodash

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.21/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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

The provided JSON represents a set of benchmark definitions for various JavaScript functions that filter arrays or strings. The tests compare different approaches to achieve this filtering, including using built-in methods like `Array.prototype.where`, custom implementations (`array.filter` and `grepAlone`), and popular library functions from Lodash ( `_lodash.filter`) and Underscore.js (`.filter`).

**Overview of the filtering functions:**

1. **Built-in methods:**
	* `Array.prototype.where`: This method is not widely supported and has a different behavior compared to other filter methods.
	* `array.filter`: A custom implementation that filters an array based on a predicate function.
2. **Library functions:**
	* `_lodash.filter` (Lodash): A popular library function for filtering arrays.
	* `.filter` (Underscore.js): Another widely used library function for filtering arrays.
3. **Custom implementations:**
	* `grepAlone`: A custom implementation similar to `array.filter`, but with a different approach.

**Comparison of the filter functions:**

The benchmark results show that:

1. **Built-in methods (`Array.prototype.where` and `$.grep`) are slow**: They have lower execution rates compared to custom implementations or library functions.
2. **Custom implementations (`array.filter` and `grepAlone`) have similar performance**: Both custom implementations perform similarly, with slight variations in execution rate.
3. **Library functions (`_lodash.filter` and `.filter`) are the fastest**: Lodash's `_filter` and Underscore.js's `.filter` are consistently faster than both built-in methods and custom implementations.

**Device platform and browser:**

The benchmark results were executed on a desktop device with Chrome 88, indicating that:

1. **Desktop performance is generally consistent across browsers**: The execution rates for each test are similar across different browsers.
2. **Platform-specific issues may arise**: In this case, there's no significant difference in execution rate between Windows and other platforms.

**Implications:**

When choosing a filtering approach, consider the following:

1. **Performance-critical applications**: Use library functions like `_lodash.filter` or `.filter` for performance-critical areas.
2. **Custom implementations**: Opt for custom implementations like `array.filter` or `grepAlone` when specific requirements or constraints are met.
3. **Built-in methods**: Avoid using built-in methods like `Array.prototype.where` due to their slow execution rates.

Keep in mind that the optimal choice of filtering approach depends on your specific use case and performance requirements.

Related benchmarks:

JS Filter Test newer Lodash (version: 0)

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: 5 years ago by: Guest

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

No previous run results

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