Benchmark: Array.filter VS Array.toSpliced for element deletion

Script Preparation code:

const arr = Array.from({
    length: 10_000
}).map((_, i) => i)

const deleteIndex = Math.floor(Math.random() * arr.length)

Tests:

Array.toSpliced
const newArr = arr.toSpliced(deleteIndex, 1)
Array.filter
const newArr = arr.filter((_, i) => i != deleteIndex)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.toSpliced
Array.filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 134 on Ubuntu

View result in a separate tab

Test name	Executions per second
Array.toSpliced	80049.5 Ops/sec
Array.filter	11895.6 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):

LLMs can make mistakes. Check important info.

The benchmark in question evaluates two different approaches for removing an element from an array in JavaScript: `Array.toSpliced` and `Array.filter`. Here's a detailed breakdown of the options being compared, their pros and cons, considerations, and alternatives.

### Comparison of Approaches

1. **`Array.toSpliced`**:
   - **Benchmark Definition**: `const newArr = arr.toSpliced(deleteIndex, 1)`
   - **Description**: This method creates a new array by removing a specified number of elements (in this case, 1) starting from the given index (`deleteIndex`).
   - **Performance**: The benchmark results show `Array.toSpliced` achieved approximately 80,049 executions per second.
  
   **Pros**:
   - It's concise and expresses the intent of deletion clearly.
   - Returns a new array without modifying the original, aligning with functional programming practices.

**Cons**:
   - It may not be supported in very old JavaScript environments since `Array.toSpliced` is part of newer ECMAScript proposals and may not be available prior to certain browser updates.

2. **`Array.filter`**:
   - **Benchmark Definition**: `const newArr = arr.filter((_, i) => i != deleteIndex)`
   - **Description**: This function creates a new array containing all elements that pass the test implemented by the provided function. In this case, it returns all elements except for the one at `deleteIndex`.
   - **Performance**: The results show `Array.filter` performed significantly slower, achieving about 11,895 executions per second.

**Pros**:
   - Very widely supported across all browsers as it has been part of JavaScript for a long time.
   - Flexible as it allows for complex filtering conditions beyond just removing a single element.

**Cons**:
   - Potentially less efficient for simple tasks like removing one element since it evaluates every element in the array.
   - More verbose for this particular task, as it uses a callback function to determine which elements to include.

### Other Considerations

- **Context of Use**: When choosing between these approaches, consider the context of the application. If you need to support older browsers or environments, `Array.filter` may be the safer choice, while `Array.toSpliced` would be preferable if performance is critical and you're developing for modern environments.
  
- **Mutability**: Both methods create a new array, which is beneficial in functional programming contexts where immutability is favored.

### Alternatives

Other alternative methods to remove elements from an array in JavaScript include:

- **Using `Array.slice`**: You can use array slicing to skip over the element at `deleteIndex`. This approach combines arrays before and after the specified index:
  ```javascript
  const newArr = [...arr.slice(0, deleteIndex), ...arr.slice(deleteIndex + 1)];
  ```
- **Using `splice`**: If it's acceptable to mutate the original array instead of creating a new one, you could use:
  ```javascript
  arr.splice(deleteIndex, 1);
  ```
  However, this changes the original array, which might not be desired in all situations.

- **Combining with `Set`**: For scenarios that require multiple unique deletions, using a `Set` can improve performance since lookups are faster than arrays:
  ```javascript
  const indicesToRemove = new Set([deleteIndex1, deleteIndex2]);
  const newArr = arr.filter((_, i) => !indicesToRemove.has(i));
  ```

In summary, this benchmark highlights the performance differences between two strategies for element deletion in arrays, giving software engineers insight into the trade-offs involved in choosing one method over another.

Related benchmarks:

Array.filter VS Array.toSpliced for element deletion (version: 1)

Benchmark the performance of creating a new array with an element removed by using either Array.toSpliced or Array.filter

Comparing performance of: Array.toSpliced vs Array.filter

Created: 3 months ago by: Guest

Jump to the latest result

Array.toSpliced

Array.filter

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):