Benchmark: map vs findIndex & slice

Tests:

map
function updateTodo(update, list) { console.log('LIST', list); const updatedAt = new Date().toISOString(); return list.map((item) => item.id === update.id ? { ...item, ...update, updatedAt } : item ); } const update = {id: 5, done: true} const list = [{id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 5, done: false}] const other = updateTodo(update, list)
findIndex & spread
function updateTodo(update, list) { const updatedAt = new Date().toISOString(); const indexToUpdate = list.findIndex((item) => item.id === update.id); const newList = [...list]; newList[indexToUpdate] = { ...newList[indexToUpdate], ...update, updatedAt }; return newList; } const update = {id: 5, done: true} const list = [{id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 5, done: false}] const other = updateTodo(update, list)
findIndex & slice
function updateTodo(update, list) { const updatedAt = new Date().toISOString(); const indexToUpdate = list.findIndex((item) => item.id === update.id); const newList = list.slice(); newList[indexToUpdate] = { ...newList[indexToUpdate], ...update, updatedAt }; return newList; } const update = {id: 5, done: true} const list = [{id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 1, done: false}, {id: 5, done: false}] const other = updateTodo(update, list)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
findIndex & spread
findIndex & slice

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

MeasureThat.net provides a platform for creating and running JavaScript microbenchmarks to compare different approaches to solving similar problems. The benchmark in question is designed to test three variations of updating an array of objects: using `map()`, `findIndex()` with `slice()`, and `findIndex()` with spreading the new object.

**Benchmark Definitions**

The three benchmark definitions are:

1. **`map()`**: This approach uses the `map()` method to create a new array by iterating over each element in the original array, applying an update function, and returning a new array with the updated elements.
2. **`findIndex() & spread()`**: This approach first finds the index of the element to be updated using `findIndex()`, then creates a shallow copy of the original array using `slice()`, updates the desired element by spreading the new object onto it, and returns the modified array.
3. **`findIndex() & slice()`**: This approach is similar to the previous one but uses `slice()` to create a shallow copy of the original array instead of creating a new array with `map()`.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **`map()`**:
	* Pros: Efficient, concise, and easy to read.
	* Cons: Creates a new array, which can be memory-intensive for large datasets.
2. **`findIndex() & spread()`**:
	* Pros: Modifies the original array in place, avoids creating unnecessary copies.
	* Cons: Requires more complex logic, potentially slower due to indexing and spreading operations.
3. **`findIndex() & slice()`**:
	* Pros: Similar to `findIndex() & spread()`, but uses a shallow copy instead of creating a new array.
	* Cons: Still requires more complexity than the `map()` approach.

**Library**

None of these approaches rely on external libraries or frameworks. However, the `slice()` method is a built-in JavaScript function that creates a shallow copy of an array.

**Special JS Features**

The `findIndex()` and spreading operations (`...`) are part of modern JavaScript syntax introduced in ECMAScript 2015 (ES6). The `map()` method has been available since ES5.

**Other Alternatives**

If you need to update large arrays or have specific performance requirements, you may want to consider alternative approaches:

* **Using a library like Lodash**: Offers more functional programming capabilities, including array manipulation functions.
* **Iterating over the array manually**: Using `for` loops or `forEach()` can provide fine-grained control over iteration but may be slower due to the overhead of loop management.

Keep in mind that benchmarking results can vary depending on the specific use case and system configuration. MeasureThat.net provides a great platform for testing different approaches, but it's essential to consider additional factors like memory usage, cache efficiency, and potential performance bottlenecks.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/118.0

Browser/OS: Firefox 118 on Windows

View result in a separate tab

Test name	Executions per second
map	128756.2 Ops/sec
findIndex & spread	1390964.5 Ops/sec
findIndex & slice	1407747.4 Ops/sec

Related benchmarks:

map vs findIndex & slice (version: 1)

Comparing performance of: map vs findIndex & spread vs findIndex & slice

Created: one year ago by: Registered User

Jump to the latest result

map

findIndex & spread

findIndex & slice

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):