Benchmark: test object copy vs adding properties

Tests:

Using reduce and the spread operator
const styles = { foo: { color: 'red', }, bar: { color: 'green', '&:focus': { color: 'blue', }, }, }; Object .keys(styles) .reduce((classes, selector) => ({ ...classes, [selector]: selector, }), {});
Using map and adding to an object
const styles = { foo: { color: 'red', }, bar: { color: 'green', '&:focus': { color: 'blue', }, }, }; const obj = {}; Object .keys(styles) .forEach(style => { obj[style] = style; })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using reduce and the spread operator
Using map and adding to an object

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the provided benchmark.

**What is being tested?**

The test case measures the performance difference between two approaches to iterate over an object's keys:

1. Using `reduce` and the spread operator (`...`).
2. Using `map` and adding properties to an existing object using dot notation (`obj[style] = style;`).

**Options comparison**

Both approaches have their pros and cons:

* **Using `reduce` and the spread operator**: This approach is concise and efficient, as it avoids the need for explicit property iteration or concatenation. However, it can be less readable due to its functional programming nature.
* **Using `map` and adding to an object**: This approach is more explicit and easier to understand, as it uses a familiar imperative programming pattern (forEach + dot notation). However, it can lead to performance issues if the map function creates many temporary objects or updates existing properties excessively.

**Library usage**

There is no specific library being used in these benchmark test cases. However, `Object.keys()` and `...` are built-in JavaScript features that are commonly used for object iteration.

**Special JS feature/syntax**

The only special syntax used here is the spread operator (`...`), which was introduced in ECMAScript 2015 (ES6). It allows for concise object creation and iteration.

**Other alternatives**

If you were to rewrite these test cases using alternative approaches, some options might include:

* Using `for...in` or `for...of` loops for explicit property iteration.
* Utilizing `Object.assign()` for object updates or concatenation.
* Employing other functional programming techniques, like using `Array.prototype.filter()` or `Array.prototype.forEach()`.
* Leveraging third-party libraries like Lodash or Ramda, which provide additional utility functions for object manipulation and iteration.

Keep in mind that the choice of approach depends on your specific use case, performance requirements, and personal coding style.

Latest run results:

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

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

Browser/OS: Chrome 70 on Mac OS X 10.14.1

View result in a separate tab

Test name	Executions per second
Using reduce and the spread operator	2198646.8 Ops/sec
Using map and adding to an object	3884342.5 Ops/sec

Related benchmarks:

test object copy vs adding properties (version: 0)

Comparing performance of: Using reduce and the spread operator vs Using map and adding to an object

Created: 5 years ago by: Guest

Jump to the latest result

Using reduce and the spread operator

Using map and adding to an object

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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