Benchmark: jAg's comparison of unzipping, possibly modifying, and rezipping objects with 10,000 fields

jAg's comparison of unzipping, possibly modifying, and rezipping objects with 10,000 fields (version: 0) Benchmark.js

You've got an object with a bunch of fields. You want to iterate through each field and if it matches a certain set of values/state, you want to modify it, and then get the final updated object (ie not just the updated values, but all the unchanged values too. The only thing that doesn't matter is the original value).

Comparing performance of: `Object.entries -> map -> Object.fromEntries vs Object.entries -> reduce (single object) vs Object.entries -> map -> reduce (single object) vs Object.entries -> reduce (temporary objects) vs Object.entries -> map -> reduce (temporary objects) vs new map -> loop over object.entries -> Object.fromEntries`

Created: 2 years ago by: Guest

Go to the latest result

Script Preparation code:

data = {};
const ITERATIONS = 10_000;
for (i = 0; i < ITERATIONS; ++i) {
  data[i] = Math.random();
}

function switcher(i) {
  return i < 0.5 ? i : i.toString();
}

Tests:

Object.entries -> map -> Object.fromEntries
Object.fromEntries(Object.entries(data).map((key, value) => [key, switcher(value)]));
Object.entries -> reduce (single object)
Object.entries(data).reduce((acc, [k, v]) => { acc[k] = switcher(v) return acc; }, {});
Object.entries -> map -> reduce (single object)
Object.entries(data).map(([k, v]) => [k, switcher(v)]).reduce((acc, [k, v]) => { acc[k] = v return acc; }, {});
Object.entries -> reduce (temporary objects)
Object.entries(data).reduce((acc, [k, v]) => ({ ...acc, [k]: switcher(v) }), {});
Object.entries -> map -> reduce (temporary objects)
Object.entries(data).map(([k, v]) => [k, switcher(v)]).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});
new map -> loop over object.entries -> Object.fromEntries
m = new Map(Object.entries(data)) for([k, v] of Object.entries(data)) { const newV = switcher(v); if (newV !== v) { m.set(k, newV); } } Object.fromEntries(m)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.entries -> map -> Object.fromEntries
Object.entries -> reduce (single object)
Object.entries -> map -> reduce (single object)
Object.entries -> reduce (temporary objects)
Object.entries -> map -> reduce (temporary objects)
new map -> loop over object.entries -> Object.fromEntries

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Linux

View result in a separate tab

Object.entries -> reduce (single object)

456/s

Object.entries -> map -> reduce (single object)

432/s

Object.entries -> map -> Object.fromEntries

101/s

new map -> loop over object.entries -> Object.fromEntries

98/s

Object.entries -> map -> reduce (temporary objects)

54/s

Object.entries -> reduce (temporary objects)

49/s

View exact numbers

Test name	Executions per second
✓ Object.entries -> reduce (single object)	456 Ops/sec
Object.entries -> map -> reduce (single object)	432 Ops/sec
Object.entries -> map -> Object.fromEntries	101 Ops/sec
new map -> loop over object.entries -> Object.fromEntries	98 Ops/sec
Object.entries -> map -> reduce (temporary objects)	54 Ops/sec
Object.entries -> reduce (temporary objects)	49 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The MeasureThat.net benchmark tests different approaches to iterate over an object's entries, modify specific values, and reconstruct the updated object. The benchmark uses JavaScript and is designed to compare the performance of various methods.

**Approaches Compared**

1. **Object.entries -> map -> reduce (single object)**: Uses `Object.entries()` to get an array of key-value pairs, maps each pair to a new array with modified values using `map()`, and then reduces the resulting array back into an object using `reduce()`.
2. **Object.entries -> map -> reduce (temporary objects)**: Similar to the previous approach, but creates temporary objects during the process.
3. **new map -> loop over object.entries -> Object.fromEntries**: Creates a new Map from the object's entries and then loops over it to modify values, finally converting the modified Map back into an object using `Object.fromEntries()`.
4. **Object.entries -> reduce (single object)**: Uses `Object.entries()` to get an array of key-value pairs and reduces it directly into an object using `reduce()`, without creating intermediate objects.
5. **Object.entries -> map -> Object.fromEntries**: Uses `map()` to create a new array with modified values, and then converts the resulting array back into an object using `Object.fromEntries()`.

**Pros and Cons of Each Approach**

1. **Object.entries -> map -> reduce (single object)**:
	* Pros: Efficient use of intermediate arrays.
	* Cons: Creates multiple temporary objects during the process.
2. **Object.entries -> map -> reduce (temporary objects)**:
	* Pros: Reduces memory allocation and deallocation overhead.
	* Cons: Creates more temporary objects, which can lead to slower performance.
3. **new map -> loop over object.entries -> Object.fromEntries**:
	* Pros: Can avoid creating intermediate arrays, reducing memory allocation and deallocation overhead.
	* Cons: May be slower due to the looping mechanism.
4. **Object.entries -> reduce (single object)**:
	* Pros: Avoids creating intermediate objects and loops.
	* Cons: May be slower due to the direct reduction of the array into an object.
5. **Object.entries -> map -> Object.fromEntries**:
	* Pros: Easy to understand and implement.
	* Cons: Creates multiple temporary objects, which can lead to slower performance.

**Special JS Features/Syntax**

None mentioned in the benchmark definition. However, some approaches may utilize features like `Map` data structures or array methods (e.g., `map()`, `reduce()`).

**Library Used**

The benchmark uses the built-in JavaScript `Object` and `Array` objects, as well as the `Map` data structure introduced in ECMAScript 2015.

**Other Alternatives**

Other approaches to iterate over an object's entries could include:

* Using a library like Lodash or Underscore.js, which provide utility functions for working with arrays and objects.
* Utilizing a different data structure, such as a `Set` or a custom iterator-based implementation.
* Implementing a custom iterative approach using a technique like " closure iteration" or " memoization".

Please note that the performance differences between these approaches may vary depending on the specific use case and JavaScript engine used.