Benchmark: Array.splice vs Array.filter

HTML Preparation code:

<script>
  const array = ["first","second","third","asdawd","cxzcas","ljjjln","dfh93fsad9","asdfeh5","dsag442","gdsgds","fdsfrhdgr"];
</script>

Script Preparation code:

function spliceIt(array, elementIdx){
  array.splice(elementIdx, 1);
}

function filterIt(array, elementIdx){
  array = array.filter((el, idx) => idx !== elementIdx);
}

Tests:

Splice It
spliceIt(array, 5);
filter It
filterIt(array, 5);

Historical Performance Data aggregated from 102 community runs

Desktop Results:

Chrome 75 runs

Splice It

38.6M/s

filter It

36.6M/s

View exact numbers

✓ Splice It: 38,576,720 ops/sec
• filter It: 36,575,064 ops/sec

Firefox 22 runs

Splice It

25.9M/s

filter It

22.7M/s

Fastest: Splice It (1.1x faster)

View exact numbers

✓ Splice It: 25,904,612 ops/sec
• filter It: 22,685,988 ops/sec

Mobile Results:

Chrome 5 runs

Splice It

17.7M/s

filter It

11.1M/s

Fastest: Splice It (1.6x faster)

View exact numbers

✓ Splice It: 17,740,754 ops/sec
• filter It: 11,115,719 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Splice It
filter It

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36 Edg/149.0.0.0

Browser/OS: Chrome 149 on Windows

View result in a separate tab

filter It

33.9M/s

Splice It

28.0M/s

View exact numbers

Test name	Executions per second
✓ filter It	33,884,592 Ops/sec
Splice It	28,023,610 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 provided JSON and explain what's being tested.

**Benchmark Definition**

The benchmark is testing two approaches to remove an element from an array:

1. `spliceIt(array, elementIdx)`: This function uses the `splice()` method of the array to remove the element at the specified index.
2. `filterIt(array, elementIdx)`: This function creates a new array by filtering out elements that don't match the condition `(el, idx => idx !== elementIdx)`.

**Options being compared**

The two approaches are being compared directly in this benchmark.

**Pros and Cons of each approach:**

1. **`spliceIt()`**:
	* Pros:
		+ Directly removes the element from the original array.
		+ Can be more efficient if only one element needs to be removed, as it avoids creating a new array.
	* Cons:
		+ Modifies the original array.
		+ May have performance issues if the array is large and many elements need to be removed.
2. **`filterIt()`**:
	* Pros:
		+ Does not modify the original array (returns a new one).
		+ Can be more memory-efficient for large arrays, as it avoids modifying the original data.
	* Cons:
		+ Creates a new array with filtered elements.
		+ May have performance issues if many elements need to be removed or rearranged.

**Library and syntax used**

In this benchmark, no external library is being used. The `splice()` method and arrow functions are built-in JavaScript features.

The test case uses special syntax:

* Arrow function `(el, idx => idx !== elementIdx)` in the `filterIt()` function.
	+ This is an example of a concise way to define a small anonymous function using an arrow function expression.

**Other alternatives**

If you wanted to write this benchmark differently, here are some alternative approaches:

1. Use `slice()`: Instead of `splice()`, you could use `array.slice(elementIdx, elementIdx + 1)` to remove the single element.
2. Use `forEach()` and `indexOf()`: You could iterate through the array using `forEach()` and find the index of the element using `indexOf()`. Then, you can delete the element at that index.
3. Use a different data structure: If you wanted to optimize performance for large arrays, you could consider using a data structure like a linked list or a heap.

Keep in mind that these alternative approaches may have different trade-offs and might not be as efficient as the original code.

Array.splice vs Array.filter (version: 0)

Test a speed difference between these 2 approaches

Comparing performance of: `Splice It vs filter It`

Created: 4 years ago by: Guest

Go to the latest result

Splice It

filter It

Historical Performance Data aggregated from 102 community runs

Desktop Results:

Chrome 75 runs

Firefox 22 runs

Mobile Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.splice vs Array.filter (version: 0)

Test a speed difference between these 2 approaches

Comparing performance of: Splice It vs filter It

Created: 4 years ago by: Guest

Go to the latest result

Splice It

filter It

Historical Performance Data aggregated from 102 community runs

Desktop Results:

Chrome 75 runs

Firefox 22 runs

Mobile Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Splice It vs filter It`