Benchmark: Spread operator vs. Array.map and lodash.set

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(10000).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 } };

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Spread operator

99K/s

Spread operator v2

80K/s

Fastest: Spread operator (1.2x faster)

View exact numbers

✓ Spread operator: 99,464 ops/sec
• Spread operator v2: 79,680 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread operator
Spread operator v2

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

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Spread operator v2

80K/s

Spread operator

75K/s

View exact numbers

Test name	Executions per second
✓ Spread operator v2	79,680 Ops/sec
Spread operator	75,015 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark definition and results.

**Benchmark Definition**

The benchmark compares three different approaches to updating an array of objects, specifically the `permutations` array with 10,000 elements. The three approaches are:

1. **Spread operator**: Using the spread operator `[ ...array ]` to create a new copy of the `permutations` array and then using `Object.assign()` to update a specific element.
2. **Array.map()**: Using `Array.map()` to create a new array with updated elements, without modifying the original `permutations` array.

**Third approach not shown in code**

However, based on the comparison name "Spread operator vs. Array.map and lodash.set", I assume there's also a third approach being compared, which is using Lodash's `set()` method to update a specific element.

Let's discuss each approach:

### Spread Operator

The spread operator is a concise way to create a new array or object by expanding an existing one. In this case, `[ ...permutations ]` creates a shallow copy of the entire `permutations` array.

Pros:

* Concise and easy to read
* Performs well for small arrays

Cons:

* Creates a new array with shallow copied elements, which can lead to memory issues if working with large datasets.
* May require additional processing to update specific elements.

### Array.map()

`Array.map()` is a more traditional way to create a new array by applying a transformation function to each element of the original array. In this case, it's used to create a new array with updated elements.

Pros:

* More control over the transformation process
* Can be optimized for large datasets

Cons:

* Requires more code and may be less readable than the spread operator.
* May still require additional processing to update specific elements.

### Lodash.set()

The third approach, using `lodash.set()`, is not shown in the provided code, but based on the comparison name, it's likely used to update a specific element in the `permutations` array.

Pros:

* Provides an optimized way to update specific elements.
* Can be more efficient than spreading operators or map functions for large datasets.

Cons:

* Requires loading and using Lodash library.
* May add overhead due to the extra library dependency.

**Conclusion**

The benchmark results show that the "Spread operator v2" approach performs better (44012.55 E/s) compared to the original spread operator (42647.71 E/s). This suggests that the newer version of the spread operator or a different implementation is more efficient.

Keep in mind that these results may vary depending on specific use cases, JavaScript engine versions, and system configurations.

**Alternatives**

Other alternatives for updating an array of objects include:

1. Using `Array.prototype.reduce()` to accumulate updates.
2. Employing Immutable data structures (e.g., Immutable.js) to maintain a single version of truth.
3. Leveraging modern JavaScript features like `Object.fromEntries()` or `Map` for more efficient object manipulation.

These alternatives may provide better performance, readability, and maintainability depending on the specific use case.

Spread operator vs. Array.map and lodash.set (version: 3) Benchmark.js

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

Comparing performance of: `Spread operator vs Spread operator v2`

Created: 8 years ago by: Registered User

Go to the latest result

Spread operator

Spread operator v2

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

Spread operator vs. Array.map and lodash.set (version: 3) Benchmark.js

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

Comparing performance of: Spread operator vs Spread operator v2

Created: 8 years ago by: Registered User

Go to the latest result

Spread operator

Spread operator v2

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

Related benchmarks

Comparing performance of: `Spread operator vs Spread operator v2`