Benchmark: Remove by splice vs copyWithin vs filter (numeric array)

HTML Preparation code:

<script>
  var array = [];
  for(let i = 0; i < 1000; i++) {array[i] = i;}
</script>

Script Preparation code:

/* these functions assume that only one element matches, so they do not loop! */

function deleteBySplice (array, element) {
  var index = array.indexOf( element );
  if (index !== -1) {
  	array.splice( index, 1 );
  }
}

function deleteByCopyWithin (array, element) {
  var index = array.indexOf( element );
  if (index !== -1) {
  	array.copyWithin( index, index + 1 );
    --array.length;
  }
}

function deleteByFilter (array, element) {
  array = array.filter( el => el !== element );
}

Tests:

Delete by Splice
deleteBySplice( array, 21 ); deleteBySplice( array, 304 ); deleteBySplice( array, 777 );
Delete by copyWithin
deleteByCopyWithin( array, 21 ); deleteByCopyWithin( array, 304 ); deleteByCopyWithin( array, 777 );
Delete by Filter
deleteByFilter( array, 21 ); deleteByFilter( array, 304 ); deleteByFilter( array, 777 );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Firefox 137 on Linux

View result in a separate tab

Test name	Executions per second
Delete by Splice	283760.3 Ops/sec
Delete by copyWithin	284425.8 Ops/sec
Delete by Filter	41340.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll do my best to explain the benchmark and its results.

**Benchmark Overview**

The benchmark measures the performance of three different methods for deleting an element from an array:

1. `deleteBySplice`: Uses `splice()` method to remove the element at the specified index.
2. `deleteByCopyWithin`: Uses `copyWithin()` method to shift all elements after the target index one position forward, effectively removing the element at the target index.
3. `deleteByFilter`: Uses `filter()` method to create a new array that excludes the specified element.

**Options Comparison**

The three methods have different performance characteristics:

* `deleteBySplice` is generally considered the fastest approach because it only requires a single array modification operation. However, it has a higher overhead due to the need to find the target index using `indexOf()`.
* `deleteByCopyWithin` is slower than `deleteBySplice`, but can be faster for larger arrays because it avoids the overhead of finding the target index.
* `deleteByFilter` is typically the slowest approach because it creates a new array, which involves additional memory allocation and copying.

**Pros and Cons**

* `deleteBySplice`:
	+ Pros: Fast, simple implementation.
	+ Cons: Requires finding target index using `indexOf()`, which can be slower for large arrays.
* `deleteByCopyWithin`:
	+ Pros: Avoids overhead of finding target index, suitable for larger arrays.
	+ Cons: Slower than `deleteBySplice` due to copying elements after the target index.
* `deleteByFilter`:
	+ Pros: No overhead from modifying the original array.
	+ Cons: Creates a new array, which can be slower and more memory-intensive.

**Library Use**

None of the test cases use any external libraries. The functions are implemented directly in JavaScript.

**Special JS Features or Syntax**

The benchmark does not include any special features or syntax that would affect its results. It only tests the performance of basic array operations.

**Other Alternatives**

If you're interested in exploring other approaches, here are some alternatives:

* `deleteByMap`: Uses a Map to store indices and remove elements.
* `deleteBySet`: Uses a Set to store unique elements and remove duplicates.
* `deleteBySortAndSlice`: Sorts the array before deleting elements using `sort()` and then uses slicing to create a new array.

Keep in mind that these alternatives may have different performance characteristics and trade-offs compared to the original three methods.

Related benchmarks:

Remove by splice vs copyWithin vs filter (numeric array) (version: 0)

Deletion of an element from an array.

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

Created: 4 years ago by: Guest

Jump to the latest result

Delete by Splice

Delete by copyWithin

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):