Benchmark: findIndex + toSpliced vs map

Script Preparation code:

var items = [{name: 'name1', value: 1},{name: 'name2', value: 1},{name: 'name3', value: 1},{name: 'name4', value: 1}];
var search = 'name4';
var result = [];

Tests:

findIndex + toSpliced
var index = items.findIndex(({name}) => name === search); if (index >= 0) { result = items.toSpliced(index, 1, {...items[index], value: 2}); }
map
result = items.map(item => item.name === search ? {...item, value: 2} : item)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
findIndex + toSpliced
map

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/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
findIndex + toSpliced	8265143.0 Ops/sec
map	10795513.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its results in detail.

**Benchmark Overview**

The benchmark is designed to compare two approaches: using `Array.prototype.findIndex()` with `Array.prototype.toSpliced()` (Method 1) versus using `Array.prototype.map()` (Method 2). The benchmark creates an array of four objects, each with a name property. It then searches for an object with a specific name (`'name4'`) and applies a transformation to the found element by setting its value to 2.

**Library Used**

In both test cases, `Array.prototype.toSpliced()` is used, which is a part of the ECMAScript standard (ES6) specification. Its purpose is to replace or return elements in an array.

**Options Compared**

The two methods being compared are:

1. **Method 1: findIndex + toSpliced**
	* Uses `Array.prototype.findIndex()` to search for the element
	* If found, uses `Array.prototype.toSpliced()` to replace the element with a new object created by merging the original element with additional properties (`{...items[index], value: 2}`)
2. **Method 2: map**
	* Uses `Array.prototype.map()` to create a new array with transformed elements
	* If the condition is true, creates a new object that merges the original element with additional properties (`item.name === search ? {...item, value: 2} : item`)

**Pros and Cons**

1. **Method 1 (findIndex + toSpliced)**
	* Pros:
		+ More efficient because it only modifies the existing array elements
		+ Can be faster for small arrays or when exact matching is important
	* Cons:
		+ Requires more memory allocation due to creating a new object and replacing the element in the original array
		+ May not work as expected if the search result is at the end of the array (due to toSpliced's behavior)
2. **Method 2 (map)**
	* Pros:
		+ More concise and easier to read, especially for larger arrays
		+ Does not require modifying the original array
	* Cons:
		+ Creates a new array with additional memory allocation
		+ May be slower for large arrays or when exact matching is important

**Other Considerations**

* The benchmark uses `executionsPerSecond` as the metric, which indicates how many times each method executes in one second. This can give an idea of performance differences.
* The test cases are designed to focus on finding a specific element and applying a transformation, rather than optimizing for other scenarios (e.g., sorting or searching with partial matches).

**Special JS Features/Syntax**

Neither of the methods uses special JavaScript features or syntax that would require additional explanation. However, it's worth noting that `Array.prototype.toSpliced()` is a relatively new method introduced in ES6, which might be unfamiliar to some developers.

In conclusion, the benchmark provides a simple and effective way to compare two approaches for searching and transforming elements in an array. By understanding the pros and cons of each method, developers can choose the most suitable approach for their specific use case.

Related benchmarks:

findIndex + toSpliced vs map (version: 0)

Comparing performance of: findIndex + toSpliced vs map

Created: 2 years ago by: Guest

Jump to the latest result

findIndex + toSpliced

map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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