Benchmark: update element in list

Script Preparation code:

var elements = new Array(1000);
elements = elements.map((_, i) => ({ id: i, value: i * 100}));

var newElement = { id: 123, value: 15 };

Tests:

spread clone with filter
elements = [...elements.filter((s) => s.is !== newElement.id), newElement];
find by index then replace
var index = elements.findIndex((s) => s.id === newElement.id); if (index !== -1) { elements[index] = newElement; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread clone with filter
find by index then replace

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
spread clone with filter	1941.9 Ops/sec
find by index then replace	4627601.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark measures the performance of two approaches to update an element in a list: using `Array.prototype.filter()` with spread cloning, and using `Array.prototype.findIndex()` followed by array assignment.

**Approach 1: Spread Clone with Filter**

This approach uses `Array.prototype.filter()` to create a new array that includes all elements except the one to be replaced. The filtered array is then assigned back to the original `elements` array using spread cloning (`[...elements.filter((s) => s.id !== newElement.id), newElement]`). This approach assumes that the list only contains unique `id`s and can efficiently handle removal of a single element.

**Approach 2: Find Index Then Replace**

This approach uses `Array.prototype.findIndex()` to find the index of the element to be replaced, and then assigns the new element to the found position using array assignment (`elements[index] = newElement`). This approach is more straightforward but may have performance implications if the list is large or if the removal operation is expensive.

**Pros and Cons**

* **Approach 1: Spread Clone with Filter**
	+ Pros:
		- Efficiently removes a single element from the list without shifting all elements afterwards.
		- Can be faster for larger lists due to less memory allocation and deallocation.
	+ Cons:
		- May not work correctly if there are duplicate `id`s in the list (as it assumes unique `id`s).
		- Requires more memory allocation due to the creation of a new array.
* **Approach 2: Find Index Then Replace**
	+ Pros:
		- Easy to understand and implement.
		- Works correctly with any `id` value, including duplicates.
	+ Cons:
		- May be slower for larger lists due to shifting all elements after the removed element.

**Library: Lodash**

The benchmark uses the `lodash` library, specifically the `filter()` function. Lodash is a popular utility library that provides a wide range of functions for tasks like array manipulation, string manipulation, and more. In this case, it's used to simplify the implementation of the `Array.prototype.filter()` method.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark.

**Other Alternatives**

Alternative approaches to updating an element in a list could include:

* Using `Array.prototype.splice()`: This would involve removing the element at the specified index and then pushing the new element into its place.
* Using a custom implementation with a loop: This would involve iterating over the array, finding the correct position for the new element, and assigning it there.

These alternative approaches might offer different performance characteristics or trade-offs in terms of simplicity and code readability.

Related benchmarks:

update element in list (version: 0)

Comparing performance of: spread clone with filter vs find by index then replace

Created: one year ago by: Guest

Jump to the latest result

spread clone with filter

find by index then replace

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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