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

jAg's comparison of unzipping, possibly modifying, and rezipping objects with 125 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 = 125;
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/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Linux

View result in a separate tab

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

24K/s

Object.entries -> reduce (single object)

22K/s

Object.entries -> reduce (temporary objects)

13K/s

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

13K/s

Object.entries -> map -> Object.fromEntries

5K/s

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

4K/s

View exact numbers

Test name	Executions per second
✓ Object.entries -> map -> reduce (single object)	23,553 Ops/sec
Object.entries -> reduce (single object)	22,316 Ops/sec
Object.entries -> reduce (temporary objects)	13,142 Ops/sec
Object.entries -> map -> reduce (temporary objects)	12,722 Ops/sec
Object.entries -> map -> Object.fromEntries	4,505 Ops/sec
new map -> loop over object.entries -> Object.fromEntries	3,546 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll provide an explanation of the benchmark, its options, and considerations.

**Benchmark Overview**

The benchmark compares different approaches for modifying and re-zipping objects with 125 fields in JavaScript. The objective is to iterate through each field, modify it if necessary, and return the final updated object. The test cases focus on the differences between various methods for achieving this goal.

**Options Compared**

1. **Object.entries -> map -> Object.fromEntries**: This approach creates a new array of key-value pairs, maps over it, and then uses `Object.fromEntries` to create an object from the mapped values.
2. **Object.entries -> reduce (single object)**: This approach uses the `reduce()` method on a single object, iterating through its entries and modifying the original object in place.
3. **Object.entries -> reduce (temporary objects)**: Similar to the previous option, but creates temporary objects during the iteration process.
4. **Object.entries -> map -> reduce (single object)**: This approach is similar to the first option but uses `reduce()` on a single object instead of creating an array.
5. **Object.entries -> map -> Object.fromEntries**: Similar to the first option but uses `Object.fromEntries` directly, bypassing the need for `reduce()`.
6. **new Map -> loop over object.entries -> Object.fromEntries**: This approach creates a new Map from the object's entries, iterates over it, and then converts it back to an object using `Object.fromEntries`.

**Pros and Cons**

Each option has its strengths and weaknesses:

* **Object.entries -> map -> Object.fromEntries**:
	+ Pros: Efficient use of modern JavaScript features.
	+ Cons: May incur unnecessary overhead due to the creation of intermediate arrays or objects.
* **Object.entries -> reduce (single object)**:
	+ Pros: Optimizes memory usage by avoiding the creation of temporary objects.
	+ Cons: May be slower than other approaches due to the in-place modification.
* **new Map -> loop over object.entries -> Object.fromEntries**:
	+ Pros: Efficient use of `Map` data structure and avoids creating intermediate arrays or objects.
	+ Cons: May be less familiar to developers, as it requires using a different data structure.

**Considerations**

When choosing an approach, consider the following factors:

* **Performance**: Measure the execution time for each test case to determine which one is the fastest.
* **Memory Usage**: Optimize memory usage by avoiding unnecessary creation of temporary objects or arrays.
* **Code Readability**: Choose an approach that balances performance with code readability and maintainability.

**Libraries and Special Features**

The benchmark uses `Object.fromEntries()` (introduced in ECMAScript 2015) to create an object from an array of key-value pairs. It also leverages the `Map` data structure for efficient iteration over the object's entries.

Note that no special JavaScript features or syntax are used beyond those introduced in modern JavaScript standards.

I hope this explanation helps you understand the benchmark and its options!