Benchmark: Compare Array.splice() and Array.copyWithin() to move item within an array

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

var data = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99]

function moveItemBySplice(from, to) {
  // remove `from` item and store it
  var f = data.splice(from, 1)[0];
  // insert stored item into position `to`
  data.splice(to, 0, f);
}

function moveItemByCopyWithin(from, to) {
  const f = data[from];
  if (to > from) {
    // copy items after `from` until `to` one index to the left
    data.copyWithin(from, from + 1, to + 1);
  } else {
    // copy items from `to` until before `from` one index to the right
    data.copyWithin(to + 1, to, from);
  }
  // insert stored item into position `to`
  data[to] = f;
}

Tests:

Move element by Array.splice()
moveItemBySplice(3, 40); moveItemBySplice(50, 10); moveItemBySplice(45, 96); moveItemBySplice(7, 15);
Move element by Array.copyWithin()
moveItemByCopyWithin(3, 40); moveItemByCopyWithin(50, 10); moveItemByCopyWithin(45, 96); moveItemByCopyWithin(7, 15);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Move element by Array.splice()
Move element by Array.copyWithin()

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Move element by Array.splice()	2075062.9 Ops/sec
Move element by Array.copyWithin()	221750.9 Ops/sec

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

LLMs can make mistakes. Check important info.

In this benchmark, the performance of two JavaScript methods, `Array.splice()` and `Array.copyWithin()`, is compared for moving items within an array. Both these methods allow you to manipulate arrays but do so in different ways, which can affect performance based on the circumstances.

### Comparison of Options

1. **Array.splice()**:
   - **Functionality**: `Array.splice()` is a versatile method primarily used for removing and/or adding items to an array. In this benchmark, it's used to remove the item from the `from` index, and then it inserts it back into the `to` index.
   - **Pros**:
     - Simple and intuitive to use; it's explicit in what it does.
     - Allows for more complex operations beyond just moving elements, such as removing multiple items or adding new elements.
   - **Cons**:
     - Performance can be slower when dealing with large arrays due to the operations of removing and inserting items, which may involve shifting elements around in the array.
     - The operation modifies the original array directly, which might be an issue if preservation of the original array is needed.

2. **Array.copyWithin()**:
   - **Functionality**: `Array.copyWithin()` is designed to copy part of an array to another location within the same array without modifying its length. In the benchmark, it effectively shifts elements to create space for the moved item, and then that item is put in the desired place.
   - **Pros**:
     - Typically faster than `splice()` for moving elements, especially in scenarios where many elements need to be shifted because it performs fewer operations overall.
     - Modifies an array in a single operation rather than doing separate removals and insertions.
   - **Cons**:
     - Can be less intuitive and harder to understand at first for developers who are not familiar with it.
     - Limited to copying parts of the same array, which may not fit all use cases as flexibly as `splice()`.

### Benchmark Results
The recent benchmark results show:
- The `Array.splice()` method achieved **approximately 1,471,389 executions per second**.
- The `Array.copyWithin()` method achieved **approximately 170,620 executions per second**.

From the results, we can see that `Array.splice()` performed significantly better in this particular use case, which may suggest its directness or specific optimizations in the JavaScript engine.

### Other Considerations
- **Optimization**: The performance difference could be influenced by the specific implementations of these methods in the JavaScript engine (in this case, Chrome 130). Different environments (like Firefox or Node.js) might yield different results due to variations in optimizations.
- **Use Case**: Choosing between the two methods should depend on the specific requirements of the task at hand. If performance is critical and you're moving items within an array frequently, `Array.copyWithin()` may be preferable, while `Array.splice()` could be more suitable for varied array manipulations or when working with smaller datasets where performance differences are negligible.

### Alternatives
Additional alternatives for manipulating arrays include using:
1. **Array.map()**: Useful for transforming elements without mutating the original array.
2. **Array.filter()**: Can be combined with other methods to remove items instead of moving them.
3. **Manual operations**: Such as creating a new array and pushing or shifting items around, which could be more overhead but can be optimized for specific tasks.

Overall, the choice of method will vary based on the application's needs, performance considerations, and developer familiarity with the language features.

Related benchmarks:

Compare Array.splice() and Array.copyWithin() to move item within an array (version: 1)

Comparing performance of: Move element by Array.splice() vs Move element by Array.copyWithin()

Created: 5 months ago by: Guest

Jump to the latest result

Move element by Array.splice()

Move element by Array.copyWithin()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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