Benchmark: map vs findIndex to update unknown array index

Script Preparation code:

var arr = new Array(15000);
var r = Math.floor(Math.random() * 15000)

arr = arr.map((e, i) => {
  return {
    id: i
  }
})

Tests:

map to create new array
arr.map(e => e && e.id === r ? {...e, targetted: true} : e)
findIndex to create new array
var idx = arr.findIndex(e => e&& e.id === r); arr[idx] = {...arr[idx], targetted: true}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map to create new array
findIndex to create new array

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
map to create new array	26436.1 Ops/sec
findIndex to create new array	15043.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark and its explanation.

**Benchmark Overview**

The provided benchmark compares two approaches: using `Array.prototype.map()` and `Array.prototype.findIndex()` to update an unknown index in an array. The benchmark is designed to measure the performance difference between these two methods.

**Script Preparation Code**

The script preparation code creates a large array of 15,000 elements, each with a unique ID. The ID is generated randomly using `Math.floor(Math.random() * 15000)`. This code ensures that the array has a large enough size to make a noticeable difference in performance measurements.

```javascript
var arr = new Array(15000);
var r = Math.floor(Math.random() * 15000);

arr = arr.map((e, i) => {
  return { id: i };
});
```

**Html Preparation Code**

There is no HTML preparation code provided. This suggests that the benchmark is focused solely on JavaScript performance and does not require any additional HTML setup.

**Benchmark Definition JSON**

The benchmark definition JSON contains two test cases:

1. **"map to create new array"**: This test case uses `Array.prototype.map()` to update an unknown index in the array.
```javascript
arr.map(e => e && e.id === r ? {...e, targetted: true} : e)
```
2. **"findIndex to create new array"**: This test case uses `Array.prototype.findIndex()` to find the index of an element and then updates it.
```javascript
var idx = arr.findIndex(e => e && e.id === r);
arr[idx] = {...arr[idx], targetted: true}
```

**Options Compared**

The two options compared in this benchmark are:

1. **Using `map()`**: This approach creates a new array with the updated elements, which requires more memory allocation and copying of elements.
2. **Using `findIndex()`**: This approach finds the index of an element and then updates it in place, without creating a new array.

**Pros and Cons**

* **Using `map()`**:
	+ Pros: More concise code, easier to read.
	+ Cons: Creates a new array, which can be memory-intensive for large datasets.
* **Using `findIndex()`**:
	+ Pros: Updates elements in place, reduces memory allocation.
	+ Cons: Requires indexing an element in the array, which may not be as efficient.

**Library and Syntax**

There are no external libraries used in this benchmark. However, it does use some modern JavaScript syntax, such as:

* Arrow functions (`=>`)
* Destructuring assignment (`{...arr[idx], targetted: true}`)
* Template literals (not used explicitly, but implied by the single quotes)

**Special JS Features**

There are no special JS features or syntax mentioned in this benchmark.

**Alternatives**

Other alternatives to measure performance differences between `map()` and `findIndex()` might include:

* Using `forEach()`
* Using a custom loop
* Comparing memory allocation using tools like Chrome DevTools' Memory Profiler

Keep in mind that the choice of alternative depends on the specific requirements and goals of the benchmark.

Related benchmarks:

map vs findIndex to update unknown array index (version: 0)

Comparing performance of: map to create new array vs findIndex to create new array

Created: 5 years ago by: Registered User

Jump to the latest result

map to create new array

findIndex to create new array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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