Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
FindIndex + splice vs filter ( small )
(version: 1)
Comparing performance of:
FindIndex + splice vs filter
Created:
one year ago
by:
Guest
Go to the latest result
Script Preparation code:
var arr = new Array(9); arr.fill({ id: 0 }); arr = arr.map((el, idx) => el.id = idx); var foo = Math.floor(Math.random() * 15000);
Tests:
FindIndex + splice
var index = arr.indexOf(foo); var newArr = arr.splice(index, 1);
filter
var index = arr.filter(el => el !== foo)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
FindIndex + splice
filter
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
11 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0
Browser/OS:
Chrome 139 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=616198" width="100%" height="500px"></iframe>
filter
71.5M/s
FindIndex + splice
34.0M/s
View exact numbers
Test name
Executions per second
✓
filter
71,470,800 Ops/sec
FindIndex + splice
33,950,060 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
### Benchmark Overview In this benchmark, two different approaches are compared for removing an element from an array in JavaScript. The specific test cases focus on: 1. **FindIndex + Splice** 2. **Filter** ### Test Case Details 1. **FindIndex + Splice** - **Implementation**: ```javascript var index = arr.indexOf(foo); var newArr = arr.splice(index, 1); ``` - **Explanation**: - `indexOf(foo)`: This function is used to find the first index of the element `foo` in the array `arr`. - `splice(index, 1)`: Once the index is found, the `splice` method removes the element at that index from the original array. The expected outcome is a new array (`newArr`) that contains the removed item, while `arr` is modified in-place to exclude that item. 2. **Filter** - **Implementation**: ```javascript var index = arr.filter(el => el !== foo); ``` - **Explanation**: - `filter(el => el !== foo)`: The `filter` method creates a new array that includes all elements of `arr` except for the element equal to `foo`. Essentially, it returns a new array while leaving the original `arr` unchanged. ### Performance Results Based on the latest benchmark results: - The **Filter** method recorded **Executions Per Second** of approximately **110,869,080**, outperforming the **FindIndex + Splice**, which had a result of roughly **47,621,480** executions per second. This indicates that using `filter` for this task is more efficient on the tested environment. ### Pros and Cons #### FindIndex + Splice - **Pros**: - Modifies the original array (`arr`) in place, which may be beneficial if you don't need the original array anymore. - **Cons**: - Requires finding the index first and modifies the original array. This can be less efficient, especially for larger arrays, as it involves two operations (finding and splicing). #### Filter - **Pros**: - Non-destructive—does not modify the original array, which is safer in scenarios where the original data needs to be preserved. - More concise and expressive in its intent—literally describes the goal of filtering out specific elements. - **Cons**: - Creates a new array, which could lead to increased memory usage, especially if many elements are being filtered in larger datasets. ### Other Considerations and Alternatives 1. **`find()` + `splice()`**: This alternative pair could be an option, where `find()` locates the first element satisfying a test function instead of searching by value. This could be beneficial if you have complex condition checks. 2. **`reduce()`**: This higher-order function can also be used to create a new array by conditionally keeping elements, similar to `filter()`. However, the performance might be less favorable due to additional function calls. 3. **`forEach()` and Conditional Logic**: Using a simple loop, one can manually create a new array while avoiding classical elements. This may give more fine-grained control for certain scenarios, but may not be as clean or optimized as `filter()`. 4. **Immutable Data Structures**: Libraries for managing state like Immutable.js or Immer can offer alternatives that promote immutability, which can lead to cleaner state management in certain applications. In summary, while both techniques can achieve the same goal of item removal, the context of use, performance needs, and structural preferences should dictate which method is chosen. In this benchmark, `filter` was demonstrated to be more efficient than `FindIndex + splice` in the tested environment.
Related benchmarks
FindIndex + splice vs filter
FindIndex + splice vs filter FindIndex
Filter vs indexOf + spread+ splice
Comments
Confirm delete:
Do you really want to delete benchmark?