Benchmark: Remove by splice vs spliceIdx vs filter

HTML Preparation code:

<script>
  var array = ["m1c6kzws0iubt8g0zlsug14i","xalskr21dm5ke5wczew154s4i","hvbfe3uq3pmoehpilh4zpvi","ffr2btp9rihf3qce770ttke29","ymwh11qu16qwqn5vaafxhia4i","1l7rj49636ddmk3cbszitchaor","bg1njla9dvdkdlw9mbz1l9pb9","201y3ambt118dt7j7bxc6ry66r","hsgzqv2ex2j9j8znv3uzbyb9","k8tuq5ucdx1whgkdcby44pldi","2sjycnx525scxzfxfmwl7q4cxr"];
</script>

Script Preparation code:

/* these functions assume that only one element matches, so they do not loop! */

function deleteBySplice (array, element) {
  array.splice( array.indexOf( element ), 1 );
}

function deleteBySpliceIdx (array, element) {
  array.splice( element, 1 );
}

function deleteByFilter (array, element) {
  array = array.filter( el => el !== element );
}

Tests:

Delete by Splice
deleteBySplice( array, "2sjycnx525scxzfxfmwl7q4cxr" ); deleteBySplice( array, "m1c6kzws0iubt8g0zlsug14i" ); deleteBySplice( array, "1l7rj49636ddmk3cbszitchaor" );
Delete by Splice Index
deleteBySpliceIdx( array, 10 ); deleteBySpliceIdx( array, 0 ); deleteBySpliceIdx( array, 5 );
Delete by Filter
deleteByFilter( array, "2sjycnx525scxzfxfmwl7q4cxr" ); deleteByFilter( array, "m1c6kzws0iubt8g0zlsug14i" ); deleteByFilter( array, "1l7rj49636ddmk3cbszitchaor" );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Delete by Splice
Delete by Splice Index
Delete by Filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.4

View result in a separate tab

Test name	Executions per second
Delete by Splice	1393692.6 Ops/sec
Delete by Splice Index	1504763.2 Ops/sec
Delete by Filter	964067.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Definition**

The provided JSON defines a benchmark that tests three different approaches to delete an element from an array:

1. `deleteBySplice`: uses the `splice` method with `indexOf` to find and remove the element.
2. `deleteBySpliceIdx`: uses the `splice` method with an index to directly access the element and remove it.
3. `deleteByFilter`: uses the `filter` method to create a new array with the element removed.

**Options Compared**

The three options are compared in terms of their performance, which is measured by the number of executions per second (ExecutionsPerSecond).

**Pros and Cons**

Here's a brief overview of each approach:

1. **deleteBySplice**:
	* Pros: simple and widely supported.
	* Cons: has to iterate over the array using `indexOf` or `findIndex`, which can be slower than other approaches for large arrays.
2. **deleteBySpliceIdx**:
	* Pros: direct access to the element at a specific index, potentially faster than `deleteBySplice`.
	* Cons: assumes that the index is within bounds and doesn't handle out-of-bounds errors.
3. **deleteByFilter**:
	* Pros: concise and efficient, as it creates a new array without modifying the original one.
	* Cons: requires creating a new array, which can be slower than modifying an existing array.

**Library**

The benchmark uses no external libraries beyond the standard JavaScript library.

**Special JS Feature or Syntax**

None of the test cases use any special JavaScript features or syntax that would impact their performance significantly.

**Other Considerations**

When choosing an approach, consider the following:

* If you need to delete a single element from a large array, `deleteBySpliceIdx` might be a good choice.
* If you need to remove multiple elements and don't care about preserving the original order, `deleteByFilter` might be more efficient.
* If simplicity is more important than performance, `deleteBySplice` might be the best option.

**Alternatives**

If you're interested in exploring other approaches or libraries that can help with array manipulation, here are a few alternatives:

* `Array.prototype.map()`: can be used to create a new array without modifying the original one.
* `Array.prototype.reduce()`: can be used to remove elements from an array by accumulating a new array in reverse order.
* External libraries like Lodash or Ramda provide more advanced array manipulation functions that might be useful for specific use cases.

Keep in mind that each approach has its trade-offs, and the best choice ultimately depends on your specific requirements and performance constraints.

Related benchmarks:

Remove by splice vs spliceIdx vs filter (version: 0)

Deletion of an element from an array.

Comparing performance of: Delete by Splice vs Delete by Splice Index vs Delete by Filter

Created: 6 years ago by: Guest

Jump to the latest result

Delete by Splice

Delete by Splice Index

Delete by Filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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