Benchmark: Combining Object Slices

Script Preparation code:

function createSlices(numSlices, propsPerSlice = 5) {
  const arr = [];
  const entries = [];

  for (let i = 0; i < numSlices; i++) {
    const o = {};
    for (let j = 0; j < propsPerSlice; j++) {
      const key = `key_${i}_${j}`;
      const value = `${i}_${j}`;
      o[key] = value;
      entries.push([key, value]);
    }
    arr.push(o);
  }

  return [arr, entries];
}

var [slices, entries] = createSlices(100);

Tests:

Reduce / Spread
slices.reduce((store, slice) => ({ ...store, ...slice }), {});
Map Object.entries / Object.fromEntries
Object.fromEntries( slices .map((slice) => Object.entries(slice)) .flat() );
Object.assign - single spread, no mutation
Object.assign({}, ...slices);
Object.assign - single spread, mutate first
Object.assign(...slices);
Simple fromEntries
Object.fromEntries(entries);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce / Spread
Map Object.entries / Object.fromEntries
Object.assign - single spread, no mutation
Object.assign - single spread, mutate first
Simple fromEntries

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark measures how quickly different approaches can combine object slices in JavaScript. An object slice is a subset of an object, and this benchmark aims to find the most efficient way to merge these slices together.

**Options Compared**

There are four options compared:

1. `Object.assign({}, ...slices)` (single spread, no mutation)
2. `Object.assign(...slices)` (single spread, mutate first)
3. `Object.fromEntries(slices.map((slice) => Object.entries(slice)).flat())` (Map Object.entries / Object.fromEntries)
4. `reduce((store, slice) => ({ ...store, ...slice }), {})` (Reduce / Spread)

**Pros and Cons of Each Approach**

1. **Object.assign({}, ...slices)**:
	* Pros: straightforward and widely supported.
	* Cons: may not be the most efficient approach for large objects or complex merge scenarios.
	* Additional note: this approach mutates the original object, which might be a concern in some situations.
2. **Object.assign(...slices)**:
	* Pros: can handle more complex merge scenarios than the first option and maintains the original order of properties.
	* Cons: can be slower due to the mutation of the original object.
3. **Object.fromEntries(slices.map((slice) => Object.entries(slice)).flat())**:
	* Pros: offers a concise and readable solution, especially for objects with a small number of entries.
	* Cons: may not perform well for very large objects or complex merges due to its inherent flatMap operation complexity.
4. **reduce((store, slice) => ({ ...store, ...slice }), {})**:
	* Pros: can handle large and complex object merges efficiently by reducing the need for repeated array manipulation.
	* Cons: may be less readable than other options, especially for those without prior experience with this approach.

**Other Considerations**

The benchmark also explores using `Object.entries()` in conjunction with `flat()`. This approach is useful when dealing with objects that contain arrays of properties. However, its performance might vary depending on the object size and complexity.

Additionally, MeasureThat.net provides the results for each browser version tested, allowing users to compare performance across different browsers and environments.

**Alternatives**

Some alternative approaches not included in this benchmark are:

* Using `Array.prototype.reduce()` with a custom callback function (similar to the Reduce / Spread approach).
* Utilizing `lodash.merge()`, which is designed for more complex object merge scenarios.
* Implementing a custom merging algorithm tailored to specific use cases or requirements.

It's essential to note that performance differences between these approaches can be subtle, and results might vary depending on the specific use case, object size, and complexity.

Latest run results:

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

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

Browser/OS: Chrome 93 on Mac OS X 10.13.6

View result in a separate tab

Test name	Executions per second
Reduce / Spread	343.1 Ops/sec
Map Object.entries / Object.fromEntries	4919.0 Ops/sec
Object.assign - single spread, no mutation	15033.9 Ops/sec
Object.assign - single spread, mutate first	24551.4 Ops/sec
Simple fromEntries	13556.4 Ops/sec

Related benchmarks:

Combining Object Slices (version: 1)

See https://www.richsnapp.com/article/2019/06-09-reduce-spread-anti-pattern

Comparing performance of: Reduce / Spread vs Map Object.entries / Object.fromEntries vs Object.assign - single spread, no mutation vs Object.assign - single spread, mutate first vs Simple fromEntries

Created: 3 years ago by: Registered User

Jump to the latest result

Reduce / Spread

Map Object.entries / Object.fromEntries

Object.assign - single spread, no mutation

Object.assign - single spread, mutate first

Simple fromEntries

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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