Benchmark: set array index: slice vs Object.assign v3

Tests:

splice
var index = 2; var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; var output = [ ...array.slice(0, index), 10, ...array.slice(index + 1) ];
Object.assign spread
var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; var output = Object.assign([...array], {2: 10});
Object.assign slice
var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; var output = Object.assign(array.slice(), {2: 10});
Object.assign orig
var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; var output = Object.assign([...array], {2: 10});
Slice mutable
var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; var newArray = array.slice(); newArray[2] = 10; var output = newArray;
slice mutable spread
var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; var newArray = [...array]; newArray[2] = 10; var output = newArray;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
splice
Object.assign spread
Object.assign slice
Object.assign orig
Slice mutable
slice mutable spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36

Browser/OS: Chrome 87 on Linux

View result in a separate tab

Test name	Executions per second
splice	5181572.5 Ops/sec
Object.assign spread	1543570.9 Ops/sec
Object.assign slice	1578301.5 Ops/sec
Object.assign orig	1541619.6 Ops/sec
Slice mutable	23776464.0 Ops/sec
slice mutable spread	18636068.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the test cases and explain what's being tested.

**Test Cases**

The benchmark has six individual test cases, each measuring the performance of a different approach to manipulate an array:

1. `splice`: This test case measures the performance of using the `splice` method to replace a specific element in the array with a new value.
2. `Object.assign spread`: This test case measures the performance of using the spread operator (`...`) to create a new array with the elements of the original array and an additional object.
3. `Object.assign slice`: This test case measures the performance of using the `slice` method to create a shallow copy of the original array, and then modifying that copy.
4. `Object.assign orig`: Similar to the previous one, but without creating a new array using `slice`.
5. `Slice mutable`: This test case measures the performance of assigning a new value to an existing element in a mutable array (i.e., an array that can be modified directly).
6. `slice mutable spread`: This test case is similar to the previous one, but uses the spread operator (`...`) when creating a new array.

**Options Compared**

The benchmark compares six different approaches:

1. Using `splice` to replace an element in the array.
2. Using the spread operator (`...`) to create a new array with additional elements.
3. Creating a shallow copy of the original array using `slice`.
4. Modifying a copy of the original array without creating a new one (using `Object.assign orig`).
5. Assigning a new value directly to an existing element in a mutable array.
6. Using the spread operator (`...`) when creating a new array.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **splice**: This method can be slow because it modifies the original array, which can lead to unnecessary copies. However, it can also be faster if the replacement element is already present in the array.
2. **Object.assign spread**: This method creates a new array with the elements of the original array and additional elements using the spread operator. It can be faster than other methods because it avoids modifying the original array.
3. **Object.assign slice**: This method creates a shallow copy of the original array using `slice`, and then modifies that copy. It's similar to the previous one, but without creating a new array using the spread operator.
4. **Object.assign orig**: This method modifies the original array directly without creating a new one. However, it can be slower than other methods because it involves modifying an existing array.
5. **Slice mutable**: Assigning a new value directly to an existing element in a mutable array can be slow because it creates unnecessary copies of the array.
6. **slice mutable spread**: Using the spread operator (`...`) when creating a new array with mutable elements can be faster than other methods because it avoids modifying the original array.

**Libraries and Special JS Features**

None of the test cases use any specific libraries or special JavaScript features beyond the standard `Array` class and the `Object.assign` method.

**Other Considerations**

When choosing an approach for manipulating arrays, consider the following factors:

* **Modifying the original array**: If you need to modify the original array, `splice` might be a good choice. However, if you want to avoid modifying the original array, use one of the other methods.
* **Creating new arrays**: If you need to create a new array with additional elements, `Object.assign spread` or `slice mutable spread` might be faster options.
* **Performance**: Consider the performance implications of each method. For example, using `splice` can lead to unnecessary copies if the replacement element is already present in the array.

Overall, the benchmark helps you understand the trade-offs and performance characteristics of different approaches when manipulating arrays in JavaScript.

Related benchmarks:

set array index: slice vs Object.assign v3 (version: 1)

Comparing performance of: splice vs Object.assign spread vs Object.assign slice vs Object.assign orig vs Slice mutable vs slice mutable spread

Created: 3 years ago by: Registered User

Jump to the latest result

splice

Object.assign spread

Object.assign slice

Object.assign orig

Slice mutable

slice mutable spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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