Benchmark: filter vs reduce vs slice-splice

Script Preparation code:

var a = [];
var b = [];

for (var i = 0; i < 1000; i++) {
    var val1 = Math.random().toString(36).slice(2);
    var val2 = Math.random().toString(33).slice(2);
    b.push(val1);
    if (Math.random() > 0.1) {
        b.push(val2);
        a.push(val1);
    } else {
        a.push(val2);
    }
}

Tests:

filter
window.ret = a.filter(val => b.indexOf(val) === -1);
reduce
window.ret = a.reduce((result, item) => { if (b.indexOf(item) === -1) { result.push(item); } return result; }, []);
slice-splice
const result = window.ret = a.slice(); for (let i = 0; i < result.length; i++) { for (let j = 0; j < b.length; j++) { if (result[i] === b[j]) { result.splice(i, 1); i--; break; } } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter
reduce
slice-splice

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Browser/OS: Chrome 106 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter	171.5 Ops/sec
reduce	170.4 Ops/sec
slice-splice	6.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark that tests three different approaches for removing duplicates from an array (`b`) based on the presence or absence of elements in another array (`a`).

The test cases compare:

1. `filter()`: Using the `filter()` method to create a new array with only unique elements.
2. `reduce()`: Using the `reduce()` method to accumulate a result array, filtering out duplicates dynamically.
3. `slice-splice`: Using `slice()` to extract a subset of `b` and then removing duplicates using `splice()`.

**Options compared:**

*   **filter():** This approach creates a new array with unique elements by checking if each element in the array is already present in another array (`a`) using `indexOf()`. The function returns an array with only unique elements.
*   **reduce():** In this approach, a callback function is applied to each element in the array. If an element from the second array (`b`) is not found in the accumulator (initially an empty array), it's added to the result; otherwise, the accumulator remains unchanged. The result is an array with unique elements.
*   **slice-splice:** This method involves creating a copy of `b` using `slice()`, then iterating over the copied array and removing any duplicate values encountered in the original array (`a`) by using `splice()` to remove those specific occurrences.

**Pros and Cons:**

*   **filter():**
    *   Pros:
        *   Fast, as it only requires a single pass through each array.
        *   Easy to understand and implement.
    *   Cons:
        *   Creates a new array with unique elements, potentially consuming additional memory.
        *   Less efficient than other methods when dealing with very large datasets.
*   **reduce():**
    *   Pros:
        *   Efficient for large datasets since it accumulates the result in-place without creating intermediate arrays.
        *   Can handle complex filtering conditions using the callback function.
    *   Cons:
        *   Can be less straightforward to implement due to its accumulator-based nature.
        *   May have a higher memory footprint than other methods if not implemented carefully.
*   **slice-splice:**
    *   Pros:
        *   Allows for dynamic removal of duplicates and can handle complex filtering conditions.
        *   In-place modifications reduce the need for additional memory allocation.
    *   Cons:
        *   Less efficient than `filter()` or `reduce()` methods due to its overhead from iterating over elements in both arrays.

**Library usage:**

None of these examples explicitly uses a JavaScript library. However, libraries like Lodash can be used with similar approaches (e.g., using the `filterBy()` function) for simplified implementation and added functionality.

**Special JS features or syntax:**

This benchmark does not utilize any special JavaScript features or syntax beyond standard array methods (`slice()`, `splice()`, `indexOf()`) and iteration constructs (for loops).

Related benchmarks:

filter vs reduce vs slice-splice (version: 0)

Comparing performance of: filter vs reduce vs slice-splice

Created: 2 years ago by: Guest

Jump to the latest result

filter

reduce

slice-splice

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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