Benchmark: Deleting using .splice vs .filter

Script Preparation code:

var arr = new Array(100000).fill(1).map((_, i) => `hello ${i}`);

Tests:

splice
arr.splice( arr.indexOf("hello 15"), 1 )
filter
arr.filter(data => data !== 'hello 15')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
splice
filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; MOA-LX9N; HMSCore 6.15.0.301) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.5735.196 HuaweiBrowser/15.0.4.312 Mobile Safari/537.36

Browser/OS: Chrome 114 on Android

View result in a separate tab

Test name	Executions per second
splice	351.9 Ops/sec
filter	44.8 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 benchmark definition and test cases.

**Benchmark Definition:**
The benchmark is designed to compare two approaches for deleting elements from an array in JavaScript:

1. Using `.splice()`
2. Using `.filter()` (with a callback function)

**Script Preparation Code:**
The script creates an array `arr` with 100,000 elements, each containing the string "hello <number>", where `<number>` is the index of the element.

**Html Preparation Code:**
There is no HTML preparation code provided, which means that this benchmark only tests the JavaScript execution time and does not consider any rendering or layout-related overhead.

**Individual Test Cases:**

1. **splice**
The benchmark definition uses `.splice()` to delete an element from the array. Specifically, it finds the index of the element containing "hello 15" using `arr.indexOf("hello 15")`, then deletes one element starting from that index (index 0) using `.splice(arr.indexOf("hello 15"), 1)`.
2. **filter**
The benchmark definition uses `.filter()` to delete an element from the array. Specifically, it creates a callback function `data => data !== 'hello 15'` which returns `true` if the current element is not equal to "hello 15". Then, it applies this filter to the entire array using `.filter()`, effectively removing all elements that match the condition.

**Pros and Cons:**

* **.splice()**
	+ Pros:
		- Efficient for large arrays, as it modifies the original array in-place.
		- Can be faster than `.filter()` because it avoids creating a new array.
	+ Cons:
		- Can cause performance issues if used with large arrays or deep nesting, due to the overhead of finding and deleting elements.
		- Can modify the original array, which may not be desirable in all situations.
* **.filter()**
	+ Pros:
		- Safe and predictable, as it creates a new array without modifying the original one.
		- Easy to use and understand, especially for small arrays or simple filtering conditions.
	+ Cons:
		- Can be slower than `.splice()` because it creates a new array, which can lead to additional memory allocation and copying overhead.
		- May not be suitable for large arrays due to the overhead of creating a new array.

**Library:**
In this benchmark, there is no explicit library used. However, JavaScript itself is a built-in language, so we're relying on its native execution capabilities.

**Special JS Feature/Syntax:**
There are no special JavaScript features or syntaxes used in these benchmark definitions. The focus is solely on the performance comparison between two approaches.

**Other Alternatives:**
If you wanted to add more alternatives to this benchmark, you could consider using:

* `.reduce()`: Instead of using `.filter()` or `.splice()`, you could use the `reduce()` method to create a new array with the desired elements removed.
* Other filtering methods like `.some()` or `.every()`
* Other array manipulation methods like `.map()`, `.forEach()`, or `.slice()`

Keep in mind that each alternative would have its own pros and cons, and the choice of which one to use depends on the specific requirements and constraints of your project.

Related benchmarks:

Deleting using .splice vs .filter (version: 1)

Comparing performance of: splice vs filter

Created: 2 years ago by: Registered User

Jump to the latest result

splice

filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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