Benchmark: splice VS filter: filtering big list of elements

Script Preparation code:

var list = [];
var filterOutList = [10, 100, 1000, 50000, 50100, 50200, 50300, 99999]
for (var i = 0; i < 1000 * 1000; i++) {
  list.push(i);
}

Tests:

filter
list = list.filter((el) => !filterOutList.includes(el))
splice
let i = 0 while(i < list.length) { if (filterOutList.includes(list[i])) { list.splice(i, 1) continue } i++ }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter
splice

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 145 on Windows

View result in a separate tab

Test name	Executions per second
filter	33.0 Ops/sec
splice	39.9 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the JavaScript microbenchmark on MeasureThat.net.

**Benchmark Definition:**
The benchmark is designed to test two different approaches for filtering out specific elements from a large list in JavaScript:

1. Using the `filter()` method
2. Using the `splice()` method with an index and length offset

**Options compared:**

* **Filter()**: This method creates a new array with all elements that pass the test implemented by the provided function.
	+ Pros:
		- Efficient, as it only iterates over the original array once.
		- Creates a new array, which can be beneficial for preserving the original data.
	+ Cons:
		- Requires creating a new array, which can be memory-intensive.
* **Splice()**: This method removes elements from an array and returns the removed element(s).
	+ Pros:
		- Can be more efficient than creating a new array, as it only requires updating references to existing elements.
		- Can be faster for smaller lists due to reduced overhead.
	+ Cons:
		- Can be slow and memory-intensive for large lists, especially if the list is modified frequently.

**Other considerations:**

* Both methods have a time complexity of O(n), where n is the length of the original array. However, the `filter()` method has a constant-time overhead due to the function creation, whereas the `splice()` method has a linear-time overhead due to the removal and insertion operations.
* The `filter()` method creates a new array with the filtered elements, which can be beneficial for preserving the original data. On the other hand, the `splice()` method modifies the original array in place, but this comes at the cost of potential performance issues when dealing with large lists.

**Library usage:**
There is no explicit library mentioned in the benchmark definition or test cases. However, the use of modern JavaScript features like arrow functions (`(el) => !filterOutList.includes(el)`) and template literals (`"let i = 0\r\nwhile(i < list.length) {\r\n\tif (filterOutList.includes(list[i])) {\r\n\t\tlist.splice(i, 1)\r\n\t\tcontinue\r\n    }\r\n \ti++\r\n}"`) suggests that the benchmark is written in modern JavaScript.

**Special JS features/syntax:**
There are no special JS features or syntax mentioned in the test cases. The only notable feature is the use of template literals, which was introduced in ECMAScript 2015 (ES6).

Related benchmarks:

splice VS filter: filtering big list of elements (version: 0)

100k list

Comparing performance of: filter vs splice

Created: 3 years ago by: Registered User

Jump to the latest result

filter

splice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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