Benchmark: 100 elems: Spread operator vs. Array.map and lodash.set vs spread v2

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

permutations = new Array(20).map(() => ({ pagination: 'blah blah blah' }));
function updatePagination(action, prev) {
  return action;
}
action = 'something else';
state = { data: { permutations: [] } };
index = 5;

Tests:

Spread operator
const updated = Object.assign([...permutations], { [index]: Object.assign({}, permutations[index], { pagination: updatePagination(action, permutations[index]) }) }) return { ...state, data: { ...state.data, permutations: updated } };
Spread operator v2
const updated = Object.assign([...permutations], { [index]: { ...permutations[index], pagination: updatePagination(action, permutations[index]) } }) return { ...state, data: { ...state.data, permutations: updated } };
map
const updated = permutations.map((p, i) => { if (i === index) { return {...p, pagination: updatePagination(action, p)}; } return p; }); return { ...state, data: { ...state.data, permutations: updated } };
spread v3
let updated = [...permutations]; updated[index] = { ...updated[index], pagination: updatePagination(action, updated[index]) }; return { ...state, data: { ...state.data, permutations: updated } };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread operator
Spread operator v2
map
spread v3

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Linux; Android 10; Mi 9T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.115 Mobile Safari/537.36

Browser/OS: Chrome Mobile 92 on Android

View result in a separate tab

Test name	Executions per second
Spread operator	176347.9 Ops/sec
Spread operator v2	193288.3 Ops/sec
map	780254.8 Ops/sec
spread v3	330339.7 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared options, pros and cons of each approach, library usage, special JS features or syntax, and other considerations.

**Benchmark Overview**

The benchmark compares the performance of four approaches to update an object's property in a JavaScript array:

1. **Spread operator**: `Object.assign([...permutations], { [index]: Object.assign({}, permutations[index], { pagination: updatePagination(action, permutations[index]) })})`
2. **Spread operator v2**: Similar to the first approach, but with a different syntax for updating the object's property.
3. **Array.map**: Using `map()` to create a new array with updated objects.
4. **Spread v3**: A variation of the original spread operator approach.

**What's Being Tested**

Each test case measures the execution time of its respective approach, comparing how fast each one can update an object's property in the `permutations` array.

**Options Compared**

The benchmark compares four approaches to achieve similar results:

* **Spread operator**: Using `Object.assign()` with spread syntax (`[...array]`) to merge objects.
* **Spread operator v2**: A variation of the first approach, but with a slightly different syntax for updating the object's property.
* **Array.map**: Using `map()` to create a new array with updated objects.
* **Spread v3**: Another variation of the original spread operator approach.

**Pros and Cons of Each Approach**

Here's a brief summary:

1. **Spread operator**:
	* Pros: Easy to read, intuitive syntax.
	* Cons: Can be slower due to object creation and merging overhead.
2. **Spread operator v2**:
	* Similar pros and cons as the first approach, but with a slightly different syntax.
3. **Array.map**:
	* Pros: Can be faster for large arrays since it avoids creating temporary objects.
	* Cons: May require more memory allocations if not optimized correctly.
4. **Spread v3**:
	* Similar pros and cons to the spread operator approach.

**Library Usage**

The benchmark uses Lodash, a popular JavaScript utility library, in two of the test cases:

1. `lodash.set()`: Used in both Spread operator approaches to update an object's property.
2. `Array.prototype.map()` is also used by the `map` test case.

**Special JS Features or Syntax**

There are no specific special features or syntaxes being tested beyond what's already mentioned (e.g., Lodash, spread operator).

**Other Considerations**

* **JavaScript engine**: The benchmark uses Chrome Mobile 92 as the JavaScript engine.
* **Device platform**: The benchmark is run on an Android device.
* **Array size**: The `permutations` array has a fixed size of 20.

**Alternative Approaches**

Some alternative approaches could be:

1. Using a library like Immutable.js to create immutable objects and avoid changes to original data.
2. Utilizing a more efficient array update algorithm, such as using `splice()` or `forEach()`.
3. Implementing a custom update function that avoids creating temporary objects.

Keep in mind that the benchmark is focused on comparing performance, so alternative approaches might not be relevant for this specific use case.

Related benchmarks:

100 elems: Spread operator vs. Array.map and lodash.set vs spread v2 (version: 2)

A comparison of the performance of the spread operator, [ ...array ], vs. Array.map(i => ...) and

Comparing performance of: Spread operator vs Spread operator v2 vs map vs spread v3

Created: 3 years ago by: Registered User

Jump to the latest result

Spread operator

Spread operator v2

map

spread v3

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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