Benchmark: filter vs slice+concat

Tests:

selectionToggleUsingIndexOfSliceConcat
const selectedAddressGroupIds = Array.from( new Set(new Array(500).fill(null).map(() => Math.floor(Math.random() * 5000))) ); const toggleAddressGroupIds = Array.from( new Set(new Array(50).fill(null).map(() => Math.floor(Math.random() * 5000))) ); const selectionToggleUsingIndexOfSliceConcat = (addressGroupId) => { const selectedIndex = selectedAddressGroupIds.indexOf(addressGroupId); let newSelected = []; // Following will be faster than `Array.filter()` because `Array.indexOf()` & `Array.concat()` combined together is faster if (selectedIndex === -1) { newSelected = newSelected.concat(selectedAddressGroupIds, addressGroupId); } else if (selectedIndex === 0) { newSelected = newSelected.concat(selectedAddressGroupIds.slice(1)); } else if (selectedIndex === selectedAddressGroupIds.length - 1) { newSelected = newSelected.concat(selectedAddressGroupIds.slice(0, -1)); } else if (selectedIndex > 0) { newSelected = newSelected.concat( selectedAddressGroupIds.slice(0, selectedIndex), selectedAddressGroupIds.slice(selectedIndex + 1) ); } return newSelected; }; toggleAddressGroupIds.map(selectionToggleUsingIndexOfSliceConcat);
selectionToggleUsingFilter
const selectedAddressGroupIds = Array.from( new Set(new Array(500).fill(null).map(() => Math.floor(Math.random() * 5000))) ); const toggleAddressGroupIds = Array.from( new Set(new Array(50).fill(null).map(() => Math.floor(Math.random() * 5000))) ); const selectionToggleUsingFilter = (addressGroupId) => { const selectedIndex = selectedAddressGroupIds.indexOf(addressGroupId); let newSelected = []; // Following will be faster than `Array.filter()` because `Array.indexOf()` & `Array.concat()` combined together is faster if (selectedIndex === -1) { newSelected = newSelected.concat(selectedAddressGroupIds, addressGroupId); } else { newSelected = selectedAddressGroupIds.filter((id) => id !== addressGroupId); } return newSelected; }; toggleAddressGroupIds.map(selectionToggleUsingFilter);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
selectionToggleUsingIndexOfSliceConcat
selectionToggleUsingFilter

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:122.0) Gecko/20100101 Firefox/122.0

Browser/OS: Firefox 122 on Linux

View result in a separate tab

Test name	Executions per second
selectionToggleUsingIndexOfSliceConcat	3444.9 Ops/sec
selectionToggleUsingFilter	3293.6 Ops/sec

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.

**Benchmark Overview**

The provided benchmark compares two approaches to toggle a selection in an array of 500 random IDs and another array of 50 random IDs. The goal is to determine which approach (using `indexOf` with slicing or using `filter`) is faster.

**Approach 1: Using `indexOf` with Slicing**

In this approach, the `selectionToggleUsingIndexOfSliceConcat` function takes an address group ID as input and returns a new array containing only the IDs that are not equal to the given ID. The function uses `Array.indexOf()` to find the index of the given ID in the `selectedAddressGroupIds` array. Then, it slices the array into two parts using `slice()`, and concatenates the first part with the second part (excluding the given ID).

**Pros:**

* This approach is likely faster because `Array.indexOf()` and `Array.concat()` are both efficient operations.
* By slicing the array, we avoid unnecessary iterations over the entire array.

**Cons:**

* This approach requires explicit indexing into the array, which can lead to slower performance if the arrays are large or sparse.
* The use of `slice()` creates a new array, which can also impact performance.

**Approach 2: Using `filter`**

In this approach, the `selectionToggleUsingFilter` function uses the `Array.filter()` method to create a new array containing only the IDs that are not equal to the given ID. This approach is simpler and more concise than the first one.

**Pros:**

* This approach is often faster because `Array.filter()` is implemented in native code, making it highly optimized.
* It eliminates the need for explicit indexing into the array or slicing.

**Cons:**

* This approach may be slower when dealing with large arrays or sparse data, as it requires iterating over the entire array to find the indices that are not equal to the given ID.
* It creates a new array, which can also impact performance.

**Library and Special Features**

In both test cases, the `Array.from()` method is used to create new arrays from the `Set` objects. The `Set` object is a collection of unique values, which is useful for eliminating duplicates in this benchmark.

**Special Feature: No special feature mentioned**

There are no special features or syntax used in these benchmarks beyond what's standard in modern JavaScript.

**Alternatives**

Other approaches to toggle a selection in an array could include:

* Using `map()` and `forEach()` instead of filtering the entire array.
* Using a custom iterative approach that avoids explicit indexing or slicing.
* Comparing the performance of different array data structures, such as `ArrayBuffer` or `Int8Array`.
* Measuring the performance impact of other factors, such as garbage collection or object allocation.

Keep in mind that the choice of approach ultimately depends on the specific requirements and constraints of your use case.

Related benchmarks:

filter vs slice+concat (version: 0)

Comparing performance of: selectionToggleUsingIndexOfSliceConcat vs selectionToggleUsingFilter

Created: 3 years ago by: Guest

Jump to the latest result

selectionToggleUsingIndexOfSliceConcat

selectionToggleUsingFilter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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