Benchmark: Remove array element by index

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

Script Preparation code:

const filterByIndex = (arr, index) => arr.filter((_, i) => i !== index);
const removeByIndex = (arr, index) => arr.slice(0, index).concat(arr.slice(index + 1));
const removeByIndex2 = (arr, index) => [...arr.slice(0, index), ...arr.slice(index + 1)];

const arr = Array.from({ length: 1000 }, (_, i) => i);
const index = 500;

Tests:

lodash pullAt
_.pullAt(arr, index);
filterByIndex
filterByIndex(arr, index);
removeByIndex (concat)
removeByIndex(arr, index);
removeByIndex2
removeByIndex2(arr, index);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash pullAt
filterByIndex
removeByIndex (concat)
removeByIndex2

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
lodash pullAt	3097462.5 Ops/sec
filterByIndex	151548.5 Ops/sec
removeByIndex (concat)	314766.7 Ops/sec
removeByIndex2	160800.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark provided assesses the performance of different methods for removing an array element by its index in JavaScript. Let's break down the different approaches being evaluated, their pros and cons, and some additional considerations based on the provided JSON data.

### Benchmark Methods

1. **lodash pullAt**:
   - **Code**: `_.pullAt(arr, index);`
   - **Library**: This method uses **Lodash**, a popular utility library that provides modular methods for common programming tasks, simplifying JavaScript code. Lodash is widely used for its performance optimizations and syntactic convenience.
   - **Pros**: 
     - Convenience: Easy to use with the power of a well-maintained library.
     - Optimized for performance by the library authors.
   - **Cons**:
     - Importing the library can introduce overhead if not already used in the project.
     - May be overkill if the operation is simple and should be implemented natively.

2. **filterByIndex**:
   - **Code**: `filterByIndex(arr, index);`
   - **Implementation**: This uses the array `filter()` method.
   - **Pros**: 
     - Readable: Clear intent of filtering elements.
     - No external dependencies: Straightforward JavaScript.
   - **Cons**:
     - Creates a new array instead of modifying the existing one, which can be less efficient for large arrays.
     - Performance may be impacted due to the creation of a large intermediate array.

3. **removeByIndex (concat)**:
   - **Code**: `removeByIndex(arr, index);`
   - **Implementation**: This method constructs a new array by concatenating two slices of the original array while skipping the index to remove.
   - **Pros**:
     - Clear separation of the operation into slices: Easy to follow.
     - Creates a new array without modifying the original.
   - **Cons**:
     - Potentially less efficient due to multiple calls to `slice()` and `concat()`.
     - More memory usage due to the intermediate arrays created.

4. **removeByIndex2**:
   - **Code**: `removeByIndex2(arr, index);`
   - **Implementation**: Similar to `removeByIndex`, but utilizes the spread operator (`...`) to construct a new array.
   - **Pros**:
     - Concise: Less code than the first method.
     - Modern syntax: The spread operator allows for improved readability in new JavaScript.
   - **Cons**:
     - Similar inefficiencies as the `removeByIndex` method.
     - The spread operator can be less intuitive to those unfamiliar.

### Benchmark Results

The benchmark results provide an overview of how fast each method executes:

- **lodash pullAt**: **3,097,462.5 Executions Per Second**
- **removeByIndex (concat)**: **314,766.6875 Executions Per Second**
- **removeByIndex2**: **160,800.171875 Executions Per Second**
- **filterByIndex**: **151,548.53125 Executions Per Second**

### Insights from the Results

- **Performance Leader**: The Lodash `pullAt` method outperforms all native implementations significantly. This highlights Lodash's efficiency and optimization.
- **Native Methods**: Among native methods, `removeByIndex` (using `concat`) performs better than `filterByIndex` and `removeByIndex2`. This could be due to the combined efficiency of calling `slice()` twice and concatenating rather than filtering through all elements.
- **Memory vs Performance**: All methods that create a new array (like `filterByIndex`, `removeByIndex`, and `removeByIndex2`) will incur memory overhead, which can impact performance depending on the size of the array.

### Other Considerations

- **Array Mutability**: All tested methods create new arrays rather than modifying the original array. If mutability is important (i.e., if you want to modify the original in place), `lodash pullAt` is the only option that aligns with this.
- **Readability**: As a general note, while performance is vital, the readability and clarity of the code are also crucial, especially when working in teams or on long-term projects.

### Alternatives

Other alternatives to removing an element from an array by index can include:

- **Splice Method**: Using `Array.prototype.splice(index, 1)` will remove the element in place without creating a new array, but it alters the original array, which may not be desirable in all contexts.
- **Custom Implementations**: Developers could implement their own efficient algorithms tailored to specific needs; however, these would require thorough benchmarking to ensure optimal performance.

In conclusion, the benchmark illustrates the performance characteristics of various methods for a common array operation while highlighting the efficiency of third-party libraries versus native JavaScript capabilities.

Related benchmarks:

Remove array element by index (version: 1)

Comparing performance of: lodash pullAt vs filterByIndex vs removeByIndex (concat) vs removeByIndex2

Created: 2 months ago by: Guest

Jump to the latest result

lodash pullAt

filterByIndex

removeByIndex (concat)

removeByIndex2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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