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]) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

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 break down the provided benchmark and explain what's being tested, compared, and discussed.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to filter an array in JavaScript:

1. `Array.prototype.filter.call()`
2. Destructuring assignment `[...collection].filter(node => node)`
3. For loop with `push()` iteration (`for (var i = 0; i < collection.length; i++) { result.push(collection[i]) }`)

**Comparison**

The benchmark compares the performance of these three approaches on an array of 20 elements. The approach that yields the highest number of executions per second wins.

**Approach 1: `Array.prototype.filter.call()`**

This approach uses the `filter()` method with a callback function, but instead of using the `this` keyword to refer to the `collection` array, it explicitly calls `call()` on the `Array.prototype`. This is done to make the benchmark more predictable, as some versions of JavaScript might use a different `this` context for `filter()`. The pros of this approach are that it's concise and easy to read. The cons are that it may not be optimized for performance.

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

This approach uses the spread operator (`[...]`) to create a new array from `collection`, followed by the `filter()` method with a callback function. This approach is often considered more modern and expressive in JavaScript. The pros are that it's concise and readable, while also providing a clear intent. The cons are that it may incur additional overhead due to the spread operator.

**Approach 3: For loop with `push()` iteration**

This approach uses a traditional for loop to iterate over the array elements, pushing each element onto a new result array. This approach can be useful when working with large arrays or performance-critical code. The pros are that it's often more predictable and efficient in terms of memory usage. The cons are that it may be less concise and readable.

**Library Usage**

In this benchmark, the `document.querySelectorAll()` method is used to create a collection array from HTML elements. This is likely done for simplicity and ease of use in a web-based context.

**Special JS Features/Syntax**

None of the approaches mentioned above rely on special JavaScript features or syntax that would be unfamiliar to most software engineers.

**Other Considerations**

The benchmark execution time is measured in executions per second (ePS), which can provide valuable insights into the performance characteristics of each approach. However, it's essential to note that this metric may not accurately reflect real-world usage scenarios, where other factors like memory allocation, garbage collection, and caching may also impact performance.

**Alternatives**

If you were to rewrite these benchmark results or create new benchmarks, consider exploring alternative approaches, such as:

* Using `Array.from()` instead of the spread operator
* Utilizing `Map` or `Set` data structures for filtering
* Implementing a custom filtering algorithm using bitwise operations or SIMD instructions

Keep in mind that the best approach will depend on your specific use case and performance requirements.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36

Browser/OS: Chrome 97 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.filter	273217.5 Ops/sec
Destructure filter	221022.8 Ops/sec
For loop push	188099.3 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

Created: 7 years ago by: Guest

Jump to the latest result

Array.prototype.filter

Destructure filter

For loop push

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):