Benchmark: array-filter-vs-destructure-vs-for-loop

HTML Preparation code:

<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
  <li>Item #4</li>
  <li>Item #5</li>
  <li>Item #6</li>
  <li>Item #7</li>
  <li>Item #8</li>
  <li>Item #9</li>
  <li>Item #10</li>
  <li>Item #11</li>
  <li>Item #12</li>
  <li>Item #13</li>
  <li>Item #14</li>
  <li>Item #15</li>
  <li>Item #16</li>
  <li>Item #17</li>
  <li>Item #18</li>
  <li>Item #19</li>
  <li>Item #20</li>
</ul>

Script Preparation code:

var collection = document.querySelectorAll('li')
var result = []

Tests:

Array.prototype.filter
Array.prototype.filter.call(collection, node => node)
Destructure filter
[...collection].filter(node => node)
For loop push
for (var i = 0; i < collection.length; i++) { result.push(collection[i]) }
Array.from
Array.from(collection).filter(node => node)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.filter
Destructure filter
For loop push
Array.from

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark compares four different approaches to filtering an array in JavaScript:

1. `Array.prototype.filter.call(collection, node => node)`
2. `[...collection].filter(node => node)`
3. `for (var i = 0; i < collection.length; i++) { result.push(collection[i]) }`
4. `Array.from(collection).filter(node => node)`

**Approach 1: Array.prototype.filter.call(collection, node => node)**

This approach uses the `filter()` method on an array, but with a twist. The `call()` method is used to bind the callback function `node => node` to the `filter()` method, allowing it to access the `collection` array.

Pros:

* This approach is concise and readable.
* It leverages the optimized `filter()` method implementation in JavaScript engines.

Cons:

* It may not be as performant as other approaches, especially for large arrays.

**Approach 2: `[...collection].filter(node => node)`**

This approach uses the spread operator (`[...]`) to convert the `collection` array into a new array, and then applies the `filter()` method on this new array.

Pros:

* This approach is concise and easy to read.
* It avoids potential issues with `call()` method usage.

Cons:

* It creates an additional array copy, which can be inefficient for large datasets.
* The spread operator may incur a performance overhead due to its implementation in the JavaScript engine.

**Approach 3: `for (var i = 0; i < collection.length; i++) { result.push(collection[i]) }`**

This approach uses a traditional `for` loop to iterate over the array and push each element into the `result` array.

Pros:

* This approach is simple and easy to understand.
* It avoids potential issues with array method optimizations.

Cons:

* It can be slower than other approaches due to its iterative nature.

**Approach 4: `Array.from(collection).filter(node => node)`**

This approach uses the `Array.from()` method to create a new array from the original `collection` array, and then applies the `filter()` method on this new array.

Pros:

* This approach is concise and easy to read.
* It avoids potential issues with array method optimizations.

Cons:

* It creates an additional array copy, which can be inefficient for large datasets.

**Library Usage**

The benchmark uses the following library:

* `Array.prototype.filter`: a built-in JavaScript array method that filters elements based on a provided callback function.

**Special JavaScript Features/Syntax**

None of the approaches use any special JavaScript features or syntax beyond standard ES6+ functionality.

**Other Alternatives**

Other alternatives to these approaches might include:

* Using `map()` and `reduce()` methods instead of `filter()`.
* Implementing a custom filtering algorithm using bitwise operations or other low-level techniques.
* Using a third-party library or framework that provides optimized array filtering capabilities.

Keep in mind that the performance differences between these approaches may vary depending on the specific use case, dataset size, and JavaScript engine implementation.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:102.0) Gecko/20100101 Firefox/102.0

Browser/OS: Firefox 102 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.prototype.filter	709619.7 Ops/sec
Destructure filter	441090.3 Ops/sec
For loop push	569542.6 Ops/sec
Array.from	404770.8 Ops/sec

Related benchmarks:

array-filter-vs-destructure-vs-for-loop (version: 0)

Comparing performance of: Array.prototype.filter vs Destructure filter vs For loop push vs Array.from

Created: 7 years ago by: Guest

Jump to the latest result

Array.prototype.filter

Destructure filter

For loop push

Array.from

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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