Benchmark: compare for loop vs array.filter vs array.filter with array.includes

Script Preparation code:

boxType = 'STORAGE';
inspectionPendingBoxCount = 0;
boxList = [
    {
        'id': 1,
        'boxCode': 'b1',
        'purpose': 'STORAGE',
        'isInspectionReq': true,
        'status': 'INSPECTION_IN_PROGRESS'
    },
    {
        'id': 2,
        'boxCode': 'b2',
        'purpose': 'STORAGE',
        'isInspectionReq': true,
        'status': 'RECEIVED'
    },
    {
        'id': 3,
        'boxCode': 'b3',
        'purpose': 'CROSSDOCK',
        'isInspectionReq': false,
        'status': 'INSPECTION_IN_PROGRESS'
    },
    {
        'id': 4,
        'boxCode': 'b4',
        'purpose': 'STORAGE',
        'isInspectionReq': true,
        'status': 'INSPECTION_DONE'
    },
    {
        'id': 5,
        'boxCode': 'b5',
        'purpose': 'STORAGE',
        'isInspectionReq': false,
        'status': 'INSPECTION_IN_PROGRESS'
    }
];

Tests:

array.filter
inspectionPendingBoxCount = boxList?.filter(box=> boxType == box?.purpose && box?.isInspectionReq && (box?.status=='INSPECTION_IN_PROGRESS' || box?.status=='RECEIVED'))?.length;
for loop
for(let box of boxList){ if(boxType == box?.purpose && box?.isInspectionReq && (box?.status=='INSPECTION_IN_PROGRESS' || box?.status=='RECEIVED')) inspectionPendingBoxCount+=1; }
array.filter with array.includes
inspectionPendingBoxCount = boxList?.filter(box=> boxType == box?.purpose && box?.isInspectionReq && ['INSPECTION_IN_PROGRESS', 'RECEIVED'].includes?.(box?.status))?.length;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array.filter
for loop
array.filter with array.includes

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows

View result in a separate tab

Test name	Executions per second
array.filter	13061886.0 Ops/sec
for loop	4261948.0 Ops/sec
array.filter with array.includes	6979020.0 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares three approaches for iterating over an array to count the number of elements that meet specific conditions:

1. `array.filter`
2. `for loop` with a traditional `if-else` statement
3. `array.filter` with `array.includes`

These approaches are compared on different browsers (Firefox 115) and devices (Desktop).

**Library Used: None**

There is no external library used in this benchmark.

**Special JavaScript Features/Syntax: None**

No special JavaScript features or syntax are used in these tests, making them accessible to a wide range of software engineers.

**Benchmark Test Cases**

Each test case has the following elements:

* `Benchmark Definition`: A string that defines the mathematical operation performed on the array.
* `Test Name`: The name of the benchmark test.
* `Script Preparation Code`: JavaScript code that sets up the input data (the `boxList` array).
* `Html Preparation Code`: Optional HTML code that can be used to render the benchmark result, but it's not necessary in this case.

**Comparison Logic**

The tests compare the performance of each approach for iterating over the `boxList` array. The conditions for inclusion are:

* `purpose` matches `boxType`
* `isInspectionReq` is true
* `status` is either `'INSPECTION_IN_PROGRESS'` or `'RECEIVED'`

**Approach Comparison**

Here's a brief overview of each approach:

1. **array.filter**: This method returns a new array with only the elements that pass the provided test (in this case, the conditions above).
2. **for loop**: A traditional `for` loop is used to iterate over the array and increment a counter for each element that meets the conditions.
3. **array.filter with array.includes**: This approach uses the `includes()` method, which checks if an element is present in an array.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **array.filter**:
	* Pros: Efficient, concise, and easy to read.
	* Cons: Creates a new array, can be slower for large inputs due to memory allocation.
2. **for loop**:
	* Pros: Can be more efficient than `filter()` for very large arrays, as it avoids creating an intermediate array.
	* Cons: More verbose, harder to read and maintain.
3. **array.filter with array.includes**:
	* Pros: Combines the benefits of both approaches, using the concise syntax of `includes()`.
	* Cons: May still create a new array, although with fewer elements than `filter()`.

**Other Alternatives**

Some other alternatives for iterating over arrays include:

1. **forEach**: A more modern approach that executes a callback function on each element in the array.
2. **map**: Returns a new array with transformed values, which can be useful when working with functions that take multiple arguments.
3. **reduce**: Reduces an array to a single value by applying a reduction function to each element.

However, these alternatives may not be directly comparable to the `array.filter` and `for loop` approaches in this benchmark, as they have different use cases and performance characteristics.

Related benchmarks:

compare for loop vs array.filter vs array.filter with array.includes (version: 1)

compare for loop vs array.filter

Comparing performance of: array.filter vs for loop vs array.filter with array.includes

Created: one year ago by: Registered User

Jump to the latest result

array.filter

for loop

array.filter with array.includes

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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