Benchmark: Array.filter vs. Array.indexOf + splice

Script Preparation code:

var result = [];
var arrayTest = [];
for(var i = 0; i === 10000; i++){
  if(i === 6000){
    arrayTest.push(2);
  }else{
    arrayTest.push(Math.round(Math.random()));
  }
}

Tests:

Array.filter
result = arrayTest.filter(v => v !== 2);
Array.indexOf + Array.splice
result = arrayTest.splice((arrayTest.indexOf(2)-1),1);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.filter
Array.indexOf + Array.splice

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
Array.filter	3662937.5 Ops/sec
Array.indexOf + Array.splice	3576650.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

The provided JSON represents two test cases for measuring the performance of JavaScript arrays. The tests are designed to compare the execution speed of two approaches:

**Approach 1: Array.filter**
```javascript
result = arrayTest.filter(v => v !== 2);
```
This approach uses a callback function to create a new array that includes only elements from `arrayTest` that don't match the value `2`.

**Approach 2: Array.indexOf + Array.splice**
```javascript
result = arrayTest.splice((arrayTest.indexOf(2)-1),1);
```
This approach uses the `indexOf` method to find the index of the first occurrence of `2` in `arrayTest`, and then uses `splice` to remove the element at that index.

**What's being tested?**

The test is measuring which approach is faster: using `Array.filter` or using `Array.indexOf + Array.splice`.

**Pros and Cons:**

* **Array.filter**:
	+ Pros:
		- More concise and expressive code
		- Creates a new array, leaving the original array unchanged
	+ Cons:
		- May incur additional memory allocation overhead due to creating a new array
		- Can be slower for very large arrays if `V8` (JavaScript engine) can't optimize it efficiently.
* **Array.indexOf + Array.splice**:
	+ Pros:
		- Modifies the original array, which might be more efficient in terms of memory allocation
		- Can be faster for large arrays as it modifies the existing data structure
	+ Cons:
		- Less concise and less expressive code
		- Removes elements from the array, modifying its size and potentially affecting indexing.

**Library/External Dependency:**

There is no external library or dependency being used in these tests. The `Math` object and `Array` methods are built-in JavaScript functionality.

**Special JS Feature/Syntax:**

There are no special JavaScript features or syntaxes used in this benchmark. It only involves standard array methods and basic arithmetic operations.

**Other Alternatives:**

If you want to measure the performance of other approaches, here are some alternatives:

* Using `Array.map` instead of `Array.filter`
* Using `Array.slice` instead of `Array.splice`
* Implementing a custom filtering function from scratch
* Using a different data structure, such as a linked list or a hash table

Keep in mind that each alternative may have its own trade-offs and performance characteristics.

Related benchmarks:

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

Comparing performance of: Array.filter vs Array.indexOf + Array.splice

Created: 4 years ago by: Guest

Jump to the latest result

Array.filter

Array.indexOf + Array.splice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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