Benchmark: Array splice vs object assign

Script Preparation code:

var input = [];
for (var i = 0; i < 50000; i++) {
    input.push({
        id: i,
        data: 'something'
    })
}

Tests:

Array splice
const index = input.findIndex(val => val.id === 999); input.splice(index, 1, {id: 999, data: 'somethingElse'});
ES6 Object Spread
input = { ...input, [999]: {id: 999, data: 'somethingElse'} }
Object property assign
input[999] = {id: 999, data: 'somethingElse'}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array splice
ES6 Object Spread
Object property assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 127 on Windows

View result in a separate tab

Test name	Executions per second
Array splice	964590.2 Ops/sec
ES6 Object Spread	8130.3 Ops/sec
Object property assign	11723838.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is defined by a JSON object that contains the following information:

* `Name`: The name of the benchmark, which is "Array splice vs object assign".
* `Description`: No description is provided for this benchmark.
* `Script Preparation Code`: A JavaScript code snippet that creates an array with 50,000 objects and assigns an ID to each object. This script is used to prepare the input data for the benchmark.
* `Html Preparation Code`: No HTML preparation code is provided.

The purpose of this script is to create a large array of objects that can be used as input for the test cases.

**Individual Test Cases**

There are three test cases defined, each with its own `Benchmark Definition`:

1. **Array Splice**
```javascript
const index = input.findIndex(val => val.id === 999);
input.splice(index, 1, {id: 999, data: 'somethingElse'});
```
This test case uses the `splice()` method to remove an element from the array and replace it with a new object. The `findIndex()` method is used to find the index of the element to be removed.

2. **ES6 Object Spread**
```javascript
input = { ...input, [999]: {id: 999, data: 'somethingElse'} };
```
This test case uses the spread operator (`...`) to create a new object that includes all properties from the original `input` array and adds a new property at index 999.

3. **Object Property Assign**
```javascript
input[999] = {id: 999, data: 'somethingElse'};
```
This test case uses direct property assignment to replace an element in the array with a new object.

**Library Used**

The benchmark does not use any external libraries beyond the built-in JavaScript `Array` and `Object` prototypes. However, it does use some modern JavaScript features, such as arrow functions (e.g., `val => val.id === 999`) and the spread operator (`...`).

**Special JS Features or Syntax**

The benchmark uses several special JavaScript features:

* The `findIndex()` method is used in the Array Splice test case.
* The spread operator (`...`) is used in the ES6 Object Spread test case.
* Direct property assignment (e.g., `input[999] = { ... }`) is used in the Object Property Assign test case.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **Array Splice**
	* Pros:
		+ Fastest execution time among all three test cases.
	* Cons:
		+ Can be slower than other methods due to the need to iterate through the array.
2. **ES6 Object Spread**
	* Pros:
		+ More concise and readable code compared to Array Splice.
	* Cons:
		+ May not be as fast as Array Splice due to the creation of a new object.
3. **Object Property Assign**
	* Pros:
		+ Fastest execution time among all three test cases.
	* Cons:
		+ Can be slower than other methods due to the need to create a new object.

**Other Alternatives**

There are several alternative approaches that could be used in this benchmark, such as:

* Using `Array.prototype.map()` and `Array.prototype.forEach()`
* Using `JSON.parse(JSON.stringify(input))` and then modifying the resulting object
* Using a library like Lodash to achieve the same results

However, these alternatives may not provide significant performance benefits over the existing test cases.

Related benchmarks:

Array splice vs object assign (version: 0)

Comparing performance of: Array splice vs ES6 Object Spread vs Object property assign

Created: 4 years ago by: Guest

Jump to the latest result

Array splice

ES6 Object Spread

Object property assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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