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'}

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 12 runs

Object property assign

50.0M/s

Array splice

1.4M/s

ES6 Object Spread

15K/s

Fastest: Object property assign (3442.6x faster)

View exact numbers

✓ Object property assign: 50,021,768 ops/sec
• Array splice: 1,413,384 ops/sec
• ES6 Object Spread: 14,530 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

Object property assign

97.9M/s

Array splice

1.2M/s

ES6 Object Spread

56K/s

View exact numbers

Test name	Executions per second
✓ Object property assign	97,856,160 Ops/sec
Array splice	1,237,005 Ops/sec
ES6 Object Spread	55,839 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

Array splice vs object assign (version: 0)

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

Created: 6 years ago by: Guest

Go to the latest result

Array splice

ES6 Object Spread

Object property assign

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array splice vs object assign (version: 0)

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

Created: 6 years ago by: Guest

Go to the latest result

Array splice

ES6 Object Spread

Object property assign

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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