Benchmark: reassigning an object with 10000 objects

Script Preparation code:

var array = [];

for (var i = 1; i <= 10000; i++) {
    array.push({ id: i, name: `Item ${i}` });
}


var newObject = { id: 8868, name: 'Updated Item 2' };

Tests:

index
var index = array.findIndex(item => item.id === newObject.id); var updatedArray; if (index !== -1) { updatedArray = [ ...array.slice(0, index), // Elements before the updated item newObject, // The updated item ...array.slice(index + 1) // Elements after the updated item ]; } else { // If the item isn't found, the array remains unchanged updatedArray = array; }
map
var arr = array.map(item => { if (item.id === newObject.id) { return newObject; } return item; });

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 runs

index

1.4M/s

map

1.2M/s

Fastest: index (1.2x faster)

View exact numbers

✓ index: 1,401,220 ops/sec
• map: 1,214,390 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
index
map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2.1 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

index

3K/s

map

3K/s

View exact numbers

Test name	Executions per second
✓ index	2,749 Ops/sec
map	2,503 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared options, pros and cons, library usage, special JS features, and other considerations.

**Benchmark Overview**

The benchmark tests the performance of JavaScript functions to reassign an array with 10,000 objects. The two test cases compare the `index` method (using `findIndex`) and the `map` function.

**Script Preparation Code**

The script preparation code creates a large array (`array`) by pushing 10,000 objects onto it using a `for` loop. Each object has an `id` property and a `name` property set to a string. A second object (`newObject`) is also created with its own properties.

**Html Preparation Code**

There is no HTML preparation code provided for this benchmark, which means the test only focuses on JavaScript performance.

**Individual Test Cases**

The two test cases are:

1. **index**: This test case uses the `findIndex` method to search for a specific object (`newObject`) in the large array (`array`). If found, it creates a new array by slicing and concatenating existing elements.
2. **map**: This test case uses the `map` function to create a new array with modified objects. It checks if an object's `id` matches the `id` of `newObject`, and returns the original object if a match is found.

**Options Compared**

The two test cases compare the following options:

* **index**: Using `findIndex` to search for an element in the array.
* **map**: Using the `map` function to create a new array with modified objects.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **index**:
	* Pros: Faster lookup and replacement.
	* Cons: May cause unnecessary computations if the object is not found.
2. **map**:
	* Pros: Can modify objects in place, reducing memory allocation.
	* Cons: May be slower due to array copying.

**Library Usage**

There is no library usage in these test cases. However, the `slice` method and `concat` method are used within the `findIndex` and `map` functions, respectively. These methods are built-in JavaScript methods.

**Special JS Features**

Neither of the two test cases uses special JavaScript features such as async/await, promises, or decorators.

**Other Considerations**

When interpreting benchmark results, consider factors like:

* **Cache locality**: How well do the test cases utilize cache memory?
* **Branch prediction**: Can the test cases predict the branch (if statement) execution?
* **Execution order**: Does the order of execution matter for these test cases?

**Alternatives**

Other alternatives to these approaches include:

1. **filter()**: Instead of using `findIndex`, you can use the `filter()` method to create a new array with objects that match a condition.
2. **forEach()**: You can also iterate over the array using the `forEach()` method and update elements in place.

Keep in mind that these alternatives may not provide the exact same performance characteristics as the original test cases, but they can offer alternative solutions depending on your specific requirements.

reassigning an object with 10000 objects (version: 14) Benchmark.js

Comparing performance of: `index vs map`

Created: 2 years ago by: Registered User

Go to the latest result

index

map

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

reassigning an object with 10000 objects (version: 14) Benchmark.js

Comparing performance of: index vs map

Created: 2 years ago by: Registered User

Go to the latest result

index

map

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 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: `index vs map`