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

map to create new array

26K/s

findIndex to create new array

15K/s

View exact numbers

Test name	Executions per second
✓ map to create new array	26,436 Ops/sec
findIndex to create new array	15,043 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.

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

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

Created: 5 years ago by: Registered User

Go 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):

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

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

Created: 5 years ago by: Registered User

Go 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):

Related benchmarks

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