Benchmark: for vs. for-in vs. for-of vs. map vs. reduce (map object entries then join)

Script Preparation code:

var source = {
  "box-sizing": "border-box",
  "margin": 0,
  "padding": 0,
  "border-width": 0,
  "border-style": "solid",
  "border-color": "#ddd",
  "letter-spacing": "calc(0.04 * (1rem - 1em))",
  "transition-property": "none",
  "transition-duration": "0.3s"
}

function iteratee(property, value) {
  return `${property}:${value}`
}

Tests:

for loop (without join)
const sourceKeys = Object.keys(source) let result = "" for (let i = 0; i < sourceKeys.length; i++) { result += iteratee(sourceKeys[i], source[sourceKeys[i]]) if (i < sourceKeys.length - 1) { result += ";" } }
for loop (with join)
const sourceKeys = Object.keys(source) const resultArray = new Array(sourceKeys.length) for (let i = 0; i < sourceKeys.length; i++) { resultArray[i] = iteratee(sourceKeys[i], source[sourceKeys[i]]) } const result = resultArray.join(";")
for-in loop
const resultArray = [] for (const key in source) { resultArray.push(iteratee(key, source[key])) } const result = resultArray.join(";")
for-of loop
const resultArray = [] for (const key of Object.keys(source)) { resultArray.push(iteratee(key, source[key])) } const result = resultArray.join(";")
map
const result = Object.keys(source) .map((key) => `${key}:${source[key]}`) .join(";")
reduce
const result = Object.keys(source).reduce((memo, key) => { const mapResult = iteratee(key, source[key]) return (memo) ? `${memo};${mapResult}` : mapResult })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for loop (without join)
for loop (with join)
for-in loop
for-of loop
map
reduce

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 101 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for loop (without join)	516021.9 Ops/sec
for loop (with join)	392430.7 Ops/sec
for-in loop	459976.7 Ops/sec
for-of loop	396324.8 Ops/sec
map	637998.2 Ops/sec
reduce	579395.3 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a benchmarking test case on MeasureThat.net, which compares the performance of different JavaScript iteration approaches: for loops with and without join, for-in loops, for-of loops, map, and reduce.

**Iteration Approaches Compared**

1. **For Loop (Without Join)**:
	* This approach uses a traditional for loop with an index variable to iterate over the source object's keys.
	* The result is built by concatenating strings using the `iteratee` function.
2. **For Loop (With Join)**:
	* Similar to the previous approach, but with the addition of joining the results into a single string using the `join()` method.
3. **For-In Loop**:
	* This approach uses the `in` keyword to iterate over the source object's keys, which is a deprecated syntax in modern JavaScript.
	* The result is built by pushing the concatenated strings onto an array and then joining them later.
4. **For-Of Loop**:
	* Introduced in ECMAScript 2015 (ES6), this approach uses the `for...of` loop to iterate over the source object's keys, which is a more concise and modern way of iterating.
	* The result is built by pushing the concatenated strings onto an array and then joining them later.
5. **Map**:
	* This approach uses the `Array.prototype.map()` method to create a new array with the transformed key-value pairs.
	* The resulting array is then joined into a single string using the `join()` method.
6. **Reduce**:
	* This approach uses the `Array.prototype.reduce()` method to accumulate the transformed key-value pairs into a single string.
	* Note that this implementation uses a trick by concatenating strings with the `reduce` callback function, which can lead to performance issues if not done correctly.

**Pros and Cons of Each Approach**

1. **For Loop (Without Join)**:
	* Pros: Simple and easy to understand.
	* Cons: Can be slower due to string concatenation overhead.
2. **For Loop (With Join)**:
	* Pros: Reduces the number of string concatenations, which can improve performance.
	* Cons: Requires more code and understanding of join functionality.
3. **For-In Loop**:
	* Pros: None notable.
	* Cons: This approach is deprecated and not recommended for new code.
4. **For-Of Loop**:
	* Pros: Concise and modern syntax, reduces the need for manual indexing.
	* Cons: May require additional code to understand its behavior.
5. **Map**:
	* Pros: Convenient and concise way to transform data.
	* Cons: Creates a new array, which can be memory-intensive.
6. **Reduce**:
	* Pros: Accumulates data in a single string, easy to use.
	* Cons: Requires careful handling of string concatenation and callback functions.

**Performance**

The provided benchmark results show that the For-In Loop is significantly slower than the other approaches, likely due to its deprecated syntax and potential issues with iteration. The Map approach performs well, as it leverages the optimized `Array.prototype.map()` method.

In conclusion, when choosing an iteration approach for this test case, consider the trade-offs between simplicity, conciseness, performance, and modernity. If you need a simple and readable solution, the For Loop (Without Join) or For-Of Loop might be suitable. For more complex transformations, Map or Reduce could be better options.

Related benchmarks:

for vs. for-in vs. for-of vs. map vs. reduce (map object entries then join) (version: 0)

Apply a function to each key-value pair in the source object, then join the results into a string.

Comparing performance of: for loop (without join) vs for loop (with join) vs for-in loop vs for-of loop vs map vs reduce

Created: 2 years ago by: Guest

Jump to the latest result

for loop (without join)

for loop (with join)

for-in loop

for-of loop

map

reduce

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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