Benchmark: for vs. for-in vs. for-of vs. reduce (map object values)

Script Preparation code:

var source = {
  "box-sizing": "border-box",
  "margin": 0,
  "padding": 0,
  "border-width": 0,
  "border-style": "solid",
  "border-color": "#ddd"
}

function iteratee(value) {
  return `${value} !important`
}

Tests:

for loop
const sourceKeys = Object.keys(source) const result = {} for (let i = 0; i < sourceKeys.length; i++) { result[sourceKeys[i]] = iteratee(source[sourceKeys[i]]) }
for-in loop
const result = {} for (const key in source) { result[key] = iteratee(source[key]) }
for-of loop
const result = {} for (const key of Object.keys(source)) { result[key] = iteratee(source[key]) }
reduce
const result = Object.keys(source).reduce((memo, key) => { return { ...memo, [key]: iteratee(source[key]) } }, {})

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for loop
for-in loop
for-of loop
reduce

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 provided benchmark and explore what's being tested.

**Benchmark Overview**

The benchmark measures the performance of four different approaches to iterate over an object and apply a function to each value:

1. **For Loop**: A traditional `for` loop that uses the `length` property of the array (in this case, an object) to iterate over its values.
2. **For-In Loop**: An `in` keyword-based loop that iterates over an object's own enumerable properties.
3. **For-Of Loop**: A newer syntax introduced in ECMAScript 2015 (`ES6`) that allows iterating over arrays (or objects) using the `for...of` loop.
4. **Reduce Method**: The `reduce()` method of the Array prototype, which applies a function to each element in an array and reduces it to a single value.

**Options Compared**

The benchmark compares these four approaches to achieve the same result: creating a new object by applying a function to each value of the source object.

**Pros and Cons of Each Approach**

1. **For Loop**:
	* Pros: widely supported, easy to understand.
	* Cons: can be slower due to the overhead of checking the `length` property.
2. **For-In Loop**:
	* Pros: concise syntax, easy to read.
	* Cons: may not work as expected for non-enumerable properties, and has some limitations when dealing with objects that have a large number of properties.
3. **For-Of Loop**:
	* Pros: modern, efficient, and flexible.
	* Cons: relatively new syntax, might require more time to understand.
4. **Reduce Method**:
	* Pros: concise, efficient, and often preferred in functional programming scenarios.
	* Cons: requires knowledge of the `reduce()` method and its options.

**Library Used**

None explicitly mentioned in the provided benchmark definition and test cases. However, the use of `Object.keys()`, `Array.prototype.forEach()`, and other standard JavaScript methods suggests that the benchmark is designed to run in a modern browser environment with a recent ECMAScript implementation.

**Special JS Features or Syntax**

The benchmark uses features from ECMAScript 2015 (ES6) syntax, specifically:

* The `for...of` loop.
* The `Object.keys()` method.

These features are widely supported in modern browsers and can be used to write more concise and expressive code.

**Other Alternatives**

If the `reduce()` method is not an option due to its limitations or unfamiliarity, other alternatives could include:

* Using a library like Lodash's `map()` function.
* Implementing a custom loop using recursion or iteration.
* Using a different data structure, such as a Map or Set, if the object's properties have specific characteristics.

Keep in mind that these alternatives may introduce additional overhead or complexity, and might not provide identical performance to the optimized version using the `reduce()` method.

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36 EdgA/126.0.0.0

Browser/OS: Chrome Mobile 126 on Android

View result in a separate tab

Test name	Executions per second
for loop	397633.6 Ops/sec
for-in loop	465685.9 Ops/sec
for-of loop	399500.9 Ops/sec
reduce	210743.0 Ops/sec

Related benchmarks:

for vs. for-in vs. for-of vs. reduce (map object values) (version: 0)

Make a new object by applying a function to each value of the source object.

Comparing performance of: for loop vs for-in loop vs for-of loop vs reduce

Created: 2 years ago by: Guest

Jump to the latest result

for loop

for-in loop

for-of loop

reduce

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):